/* ===========================================================================
   asj.com.tr — Ana stil dosyası
   ---------------------------------------------------------------------------
   ÇERÇEVE YOK. Bootstrap, jQuery, Font Awesome, magnific-popup, cycle2 —
   hiçbiri yüklenmiyor. Düzen CSS grid/flex ile, ikonlar satır içi SVG ile
   (defaultcontroller::icon), davranışlar sade JavaScript ile yapılıyor.

   NEDEN: eski site her sayfada Bootstrap 3, jQuery 2.1.4, jquery.easing,
   Placeholders.js, cycle2, resmenu, magnific-popup, Font Awesome'ın tam web
   fontu ve üç ayrı stil dosyası indiriyordu — toplamın neredeyse tamamı
   kullanılmayan koddu. Sayfada kullanılan ikon sayısı ONDAN azdı.

   ── TASARIM KARARI: ANTRASİT ÇERÇEVE + AYDINLIK İÇERİK ────────────────────
   Firmanın logosu KOYU ANTRASİT (#3B3B41) zemin üzerinde KIRIK BEYAZ
   (#F5F9EF) harflerden oluşur — yani logonun kendi doğal zemini KOYUDUR.
   Bu yüzden sitenin "çerçevesi" (üst şerit, başlık, bölüm bantları, altlık)
   logonun antrasitindedir ve logo kendi zemininde, kendi renginde durur;
   logo siteye uydurulmaz, arayüz logoya göre kurulur.

   İÇERİK ise KETEN BEYAZI (#FAF8F4) üzerindedir. Gerekçe ölçülebilir: sitenin
   bütün fotoğrafları iç mekân çekimleridir — açık renk tül, keten, ahşap
   jaluzi, beyaz duvar. Koyu bir zemin bu karelerin kendi aydınlığını yutar;
   açık zeminde her kare kendi fotoğrafı olarak okunur. Uzun metinler
   (referans listesi, ürün açıklamaları) da açık zeminde yorulmadan okunur.

   VURGU RENGİ: pirinç/kum (#8A6D3B; koyu zeminde açığı #C9A86A). Logonun kendisi tek renkli olduğu için
   ikinci bir MARKA rengi yoktur; bu ton nötr bir ARAYÜZ vurgusudur ve
   fotoğraflardaki ahşap/pirinç detaylarla aynı aileden gelir. Fotoğrafların
   kendi renkleriyle (teal, hardal, kırmızı) yarışmaz.

   BÖLÜMLER
     1. Değişkenler
     2. Sıfırlama + tipografi
     3. Yardımcılar: .kutu .dugme .etiket .ikon .bolum
     4. Üst şerit + başlık + menü + dil seçici
     5. Ana sayfa slaytı
     6. Ana sayfa bölümleri (ürün, rakam, motorlu, hakkımızda, referans, mağaza)
     7. İç sayfa bandı (.bant) + kırıntı yolu
     8. İç sayfa düzenleri (ürün, galeri, referans, video, iletişim)
     9. Formlar
    10. Altlık
    11. Büyütme penceresi (lightbox)
    12. Duyarlılık (medya sorguları)
    13. Baskı + erişilebilirlik tercihleri

   @author    Sezai ÇETİN <sezai@3xcode.com>
   @copyright 2026
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. DEĞİŞKENLER
   --------------------------------------------------------------------------- */
:root{
	/* ---- LOGODAN OKUNAN İKİ RENK ------------------------------------------
	   Kaynak: _eski/images/asj_logo.png — dosyadaki iki baskın piksel değeri
	   (285.636 piksel #3B3B41, 21.343 piksel #F5F9EF). Yani bunlar "logoya
	   yakın" tonlar değil, logonun KENDİ renkleridir. */
	--antrasit:		#3B3B41;
	--kirik-beyaz:	#F5F9EF;

	/* antrasit ailesinin tonları (aynı H/S, farklı açıklık) */
	--antrasit-2:	#4A4A51;	/* kart/çizgi ayrımı */
	--antrasit-3:	#5E5E66;
	--antrasit-cizgi:#55555D;

	/* ---- VURGU: pirinç/kum -------------------------------------------------
	   ⚠ İKİ TON, ÇÜNKÜ KONTRAST FARKLI:
	     --vurgu      açık (keten) zeminde METİN ve ikon olarak kullanılır —
	                  #FAF8F4 üzerinde 4.57:1, WCAG AA eşiğini (4.5) geçer.
	     --vurgu-acik antrasit zeminde metin olarak kullanılır —
	                  #3B3B41 üzerinde 4.92:1.
	   Dolu buton zemini de --vurgu'dur; üzerine KREM yazılır (4.59:1). */
	--vurgu:		#8A6D3B;
	--vurgu-acik:	#C9A86A;
	--vurgu-koyu:	#6E562D;
	--vurgu-zemin:	rgba(138,109,59,.10);

	/* ---- AÇIK ZEMİN AİLESİ (keten) ----------------------------------------- */
	--keten:		#FAF8F4;
	--keten-2:		#F1EDE6;
	--keten-3:		#E7E1D7;
	--cizgi:		#DFD9CE;
	--beyaz:		#FFFFFF;

	/* ---- METİN -------------------------------------------------------------
	   --metin-soluk keten üzerinde 5.09:1 — yardımcı metinler de eşiği geçer
	   (eski sitede ikincil yazılar #999 idi, beyazda 2.8:1). */
	--metin:		#2B2B30;
	--metin-2:		#56545A;
	--metin-soluk:	#6D6A63;
	--metin-ters:	#F5F9EF;
	--metin-ters-2:	rgba(245,249,239,.74);

	/* ölçü */
	--kutu-en:		1240px;
	--yuvarlak:		4px;
	--yuvarlak-b:	8px;

	--golge-1:		0 1px 2px rgba(43,43,48,.05), 0 4px 16px rgba(43,43,48,.06);
	--golge-2:		0 12px 36px rgba(43,43,48,.12);
	--golge-3:		0 24px 60px rgba(43,43,48,.22);

	--gecis:		.24s cubic-bezier(.4,0,.2,1);
}


/* ---------------------------------------------------------------------------
   2. SIFIRLAMA + TİPOGRAFİ
   ---------------------------------------------------------------------------
   İKİ YAZI TİPİ, İŞ BÖLÜMÜ AÇIK:
     Fraunces (değişken, optik eksenli serif) → yalnız BAŞLIKLAR. Perde ve
       döşemelik kumaş bir dekorasyon ürünüdür; bu site bir iç mimarlık
       dergisi gibi okunmalı. Fraunces'in `SOFT`/`WONK` eksenleri büyük
       puntoda yumuşak, kumaşa yakın bir karakter veriyor.
     Inter → gövde metni, menü, buton, form. Küçük puntoda ve Kiril
       alfabesinde (site Rusça da yayınlıyor) Fraunces'ten çok daha okunur.
   ⚠ Fraunces'in Kiril desteği YOK: Rusça başlıklar da Inter'e düşer
     (aşağıdaki `:lang(ru)` kuralı bunu AÇIKÇA yapıyor, yoksa tarayıcı
     gelişigüzel bir yedek yazı tipi seçerdi).
   --------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
	margin:0;
	font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size:16px;
	line-height:1.7;
	color:var(--metin);
	background:var(--keten);
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

h1,h2,h3,h4{
	margin:0 0 .55em;
	font-family:'Fraunces', Georgia, 'Times New Roman', serif;
	font-weight:500;
	font-variation-settings:'SOFT' 30, 'WONK' 1, 'opsz' 40;
	line-height:1.14;
	letter-spacing:-.015em;
	color:var(--metin);
}
h1{ font-size:clamp(2rem, 1.3rem + 2.9vw, 3.4rem); }
h2{ font-size:clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); }
h3{ font-size:clamp(1.15rem, 1rem + .6vw, 1.4rem); }
h4{ font-size:1.08rem; font-weight:600; }

/* Kiril: Fraunces bu alfabeyi içermiyor — açıkça Inter'e geçiliyor */
:lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) h4{
	font-family:'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
	font-weight:600;
	letter-spacing:-.02em;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--vurgu); text-decoration:none; transition:color var(--gecis); }
a:hover{ color:var(--vurgu-koyu); }

img,svg,iframe{ max-width:100%; }
img{ height:auto; display:block; }

ul,ol{ margin:0 0 1.15em; padding-left:1.25em; }
li{ margin-bottom:.35em; }

address{ font-style:normal; }

/* klavye odağı her yerde görünür olsun (eski sitede outline tamamen kapalıydı) */
:focus-visible{ outline:3px solid var(--vurgu); outline-offset:2px; border-radius:3px; }

/* ekran okuyucu için "içeriğe geç" — yalnız odaklanınca görünür */
.atla{
	position:absolute; left:-9999px; top:0; z-index:200;
	background:var(--antrasit); color:var(--kirik-beyaz);
	padding:14px 22px; font-weight:600;
}
.atla:focus{ left:0; color:var(--kirik-beyaz); }

/* Ekranda görünmez ama ekran okuyucunun ve arama motorunun OKUDUĞU metin.
   `display:none` KULLANILMAZ — o, içeriği erişilebilirlik ağacından da siler
   ve başlık hiç sayılmaz. */
.gorsel-gizli{
	position:absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}


/* ---------------------------------------------------------------------------
   3. YARDIMCILAR
   --------------------------------------------------------------------------- */
.kutu{ width:100%; max-width:var(--kutu-en); margin:0 auto; padding:0 24px; }
.kutu-dar{ max-width:860px; }

.ikon{ width:1em; height:1em; flex:none; vertical-align:-.14em; }

/* Bölüm üst etiketi — ince harf aralıklı küçük başlık */
.etiket{
	display:block; margin-bottom:.85em;
	font-family:'Inter', sans-serif;
	font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
	color:var(--vurgu);
}
.koyu .etiket{ color:var(--vurgu-acik); }

.dugme{
	display:inline-flex; align-items:center; justify-content:center; gap:.55em;
	padding:14px 28px;
	border:1px solid transparent; border-radius:var(--yuvarlak);
	font-family:inherit; font-size:.92rem; font-weight:600; line-height:1.2;
	letter-spacing:.01em; cursor:pointer; text-align:center;
	transition:background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme .ikon{ width:1.05em; height:1.05em; }
.dugme.tam{ width:100%; }

/* ⚠ PİRİNÇ BUTONDA YAZI AÇIK OLMAK ZORUNDA, koyu DEĞİL (ölçüldü):
     krem #FFF8EC üzerinde 4.59:1 — AA eşiğini (4.5) geçer
     antrasit #3B3B41 ise yalnız 2.29:1 — eşiğin çok altında
   Pirinç orta değerli bir ton olduğu için sezgi yanıltıyor; ölçmeden
   buton yazısını koyultma. */
.dugme-vurgu{ background:var(--vurgu); color:#FFF8EC; }
.dugme-vurgu:hover{ background:var(--vurgu-koyu); color:#FFF8EC; transform:translateY(-2px); }

.dugme-koyu{ background:var(--antrasit); color:var(--kirik-beyaz); }
.dugme-koyu:hover{ background:#2E2E33; color:var(--kirik-beyaz); transform:translateY(-2px); }

.dugme-hat{ background:transparent; color:var(--metin); border-color:var(--cizgi); }
.dugme-hat:hover{ background:var(--antrasit); border-color:var(--antrasit); color:var(--kirik-beyaz); }

/* Koyu zemin üzerindeki hatlı buton.
   ⚠ `.ana-menu` DE BURADA: mobil menü paneli antrasit zeminlidir ama `.koyu`
   sınıfını taşımaz; kural yalnız `.koyu` ile yazıldığında panelin alt
   kısmındaki "Teklif alın" butonu KOYU GRİ yazıyla antrasit zemine basılıyor
   ve fiilen görünmüyordu (telefon ekran görüntüsüyle yakalandı). */
.koyu .dugme-hat,
.ana-menu .dugme-hat,
.bant .dugme-hat{ color:var(--kirik-beyaz); border-color:rgba(245,249,239,.34); }
.koyu .dugme-hat:hover,
.ana-menu .dugme-hat:hover,
.bant .dugme-hat:hover{ background:var(--kirik-beyaz); color:var(--antrasit); border-color:var(--kirik-beyaz); }
.dugme-beyaz{ background:var(--kirik-beyaz); color:var(--antrasit); }
.dugme-beyaz:hover{ background:#FFF; color:var(--antrasit); transform:translateY(-2px); }

.bolum{ padding:clamp(56px, 4vw + 34px, 104px) 0; }
.bolum-keten{ background:var(--keten-2); }
.bolum-beyaz{ background:var(--beyaz); }

/* koyu bölüm — antrasit zemin, kırık beyaz yazı */
.koyu{ background:var(--antrasit); color:var(--metin-ters); }
.koyu h1,.koyu h2,.koyu h3,.koyu h4{ color:var(--kirik-beyaz); }
.koyu p{ color:var(--metin-ters-2); }
.koyu a{ color:var(--vurgu-acik); }
.koyu a:hover{ color:var(--kirik-beyaz); }

.bolum-basligi{ max-width:720px; margin:0 auto clamp(34px,3vw,56px); text-align:center; }
.bolum-basligi p{ color:var(--metin-2); font-size:1.06rem; }
.bolum-basligi-sol{ margin-left:0; text-align:left; }

/* ⚠ KOYU ZEMİN İSTİSNALARI — ÖZGÜLLÜK TUZAĞI
   `.bolum-ust p` ve `.bolum-basligi p` ile `.koyu p` AYNI özgüllüktedir
   (0,1,1) ve bu bölüm dosyada `.koyu`dan SONRA geldiği için kazanıyordu:
   antrasit bölümlerin alt başlıkları koyu gri (#56545A) basılıyor ve
   fiilen okunmuyordu (ana sayfa referans bölümünde ekran görüntüsüyle
   yakalandı). Burada açıkça geri alınıyor. */
.koyu .bolum-ust p,
.koyu .bolum-basligi p,
.koyu .yazi{ color:var(--metin-ters-2); }
.koyu .bolum-ust h2,
.koyu .bolum-basligi h2{ color:var(--kirik-beyaz); }

/* başlık + "tümünü gör" aynı satırda */
.bolum-ust{
	display:flex; align-items:flex-end; justify-content:space-between;
	gap:24px; flex-wrap:wrap; margin-bottom:clamp(28px,2.5vw,44px);
}
.bolum-ust h2{ margin-bottom:0; }
.bolum-ust p{ color:var(--metin-2); max-width:620px; margin-top:.6em; }

.izgara{ display:grid; gap:26px; }
.izgara-2{ grid-template-columns:repeat(2,1fr); }
.izgara-3{ grid-template-columns:repeat(3,1fr); }
.izgara-4{ grid-template-columns:repeat(4,1fr); }

.yazi{ color:var(--metin-2); font-size:1.04rem; }
.yazi h2,.yazi h3{ color:var(--metin); margin-top:1.7em; }
.yazi h2:first-child,.yazi h3:first-child{ margin-top:0; }
.yazi a{ text-decoration:underline; text-underline-offset:3px; }


/* ---------------------------------------------------------------------------
   4. ÜST ŞERİT + BAŞLIK + MENÜ
   ---------------------------------------------------------------------------
   ⚠ BAŞLIK ANTRASİTTİR — TASARIM TERCİHİ DEĞİL, MARKA KURALI.
   Logo koyu zeminde kırık beyaz harflerden oluşuyor; kendi zemini budur.
   Açık zeminli bir başlıkta logo ya kendi koyu kutusuyla sayfaya yamanırdı
   ya da renk değiştirmek zorunda kalırdı — ikisi de logoyu siteye uydurmak
   olurdu. Doğrusu tersi: logo kendi halinde kalır, arayüz ona göre kurulur.
   --------------------------------------------------------------------------- */
.ust-serit{
	background:#323237;                 /* başlıktan bir ton koyu: iki şerit ayrışsın */
	color:var(--metin-ters-2);
	font-size:.82rem;
	border-bottom:1px solid rgba(245,249,239,.08);
}
.ust-serit-ic{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:42px; }
.ust-serit-bilgi{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.ust-oge{
	display:inline-flex; align-items:center; gap:.5em; padding:9px 0;
	color:inherit; white-space:nowrap;
}
.ust-oge:hover{ color:var(--kirik-beyaz); }
.ust-oge .ikon{ color:var(--vurgu-acik); width:15px; height:15px; }

.ust-serit-sag{ display:flex; align-items:center; gap:16px; }
.ust-serit-sosyal{ display:flex; gap:6px; }
.ust-serit-sosyal a{
	display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
	color:var(--metin-ters-2); background:rgba(245,249,239,.08);
}
.ust-serit-sosyal a:hover{ background:var(--vurgu); color:#FFF8EC; }
.ust-serit-sosyal .ikon{ width:15px; height:15px; }

/* --- DİL SEÇİCİ ---
   Üç kısa kod (TR EN RU) yan yana. Açılır liste KULLANILMADI: üç seçenek bir
   açılır menünün masrafına değmez ve kapalı bir menü yabancı ziyaretçiye dil
   seçeneği olduğunu HİÇ göstermez. Eski sitede de kodlar açıktaydı, o düzen
   korundu — ama etkin dil artık kendine bağlantı basmıyor. */
.dil-secici{ display:flex; align-items:center; gap:2px; }
.dil-secici a,
.dil-secici .dil-etkin{
	display:grid; place-items:center;
	min-width:32px; height:30px; padding:0 8px;
	border-radius:3px;
	font-size:.76rem; font-weight:600; letter-spacing:.07em; line-height:1;
}
.dil-secici a{ color:var(--metin-ters-2); }
.dil-secici a:hover{ background:rgba(245,249,239,.12); color:var(--kirik-beyaz); }
/* etkin dil dolu pirinç: hangi dilde olduğun tek bakışta belli olsun */
.dil-secici .dil-etkin{ background:var(--vurgu); color:#FFF8EC; }

.dil-secici-mobil{
	gap:8px; justify-content:center;
	padding-bottom:18px; margin-bottom:6px;
	border-bottom:1px solid rgba(245,249,239,.14);
}
.dil-secici-mobil a,
.dil-secici-mobil .dil-etkin{ min-width:52px; height:42px; font-size:.88rem; }
.dil-secici-mobil a{ background:rgba(245,249,239,.08); }

/* --- BAŞLIK --- */
.site-basligi{
	position:sticky; top:0; z-index:90;
	background:var(--antrasit);
	border-bottom:1px solid rgba(245,249,239,.08);
	transition:box-shadow var(--gecis);
}
/* ⚠ BURADA `backdrop-filter` KULLANILMAZ — MOBİL MENÜYÜ BOZAR.
   Mobil menü paneli (.ana-menu) bu başlığın İÇİNDE ve `position:fixed`.
   backdrop-filter (tıpkı transform/filter/perspective gibi) elemanı
   `position:fixed` torunları için KAPSAYICI BLOK yapar; o anda panelin
   top/bottom'ı görünüm yüksekliğine değil başlık kutusuna göre çözülür ve
   panel kısacık bir şeride çöker. (konseyturizm.com.tr'de telefonda
   yaşandı.) Zemin zaten tam opak; bulanıklığın görsel katkısı yok. */
.site-basligi.kaydirildi{ box-shadow:0 8px 28px rgba(43,43,48,.28); }
.site-basligi-ic{
	display:flex; align-items:center; gap:20px;
	min-height:84px; transition:min-height var(--gecis);
}
.site-basligi.kaydirildi .site-basligi-ic{ min-height:68px; }

/* --- MARKA (partials/logo.php) ---
   Logo firmanın kendi görselidir ve KENDİ ZEMİNİYLE birlikte değil, şeffaf
   SVG olarak basılır; rengi `currentColor` ile gelir. Başlık ve altlık zaten
   antrasit olduğu için logo her ikisinde de kendi kırık beyazındadır. */
.marka{ display:flex; align-items:center; flex:none; line-height:1; }
.marka-logo{ display:block; width:auto; height:40px; color:var(--kirik-beyaz); transition:height var(--gecis); }
.site-basligi.kaydirildi .marka-logo{ height:34px; }
.marka-footer .marka-logo{ height:44px; }

/* --- ANA MENÜ (masaüstü) --- */
.ana-menu{ margin-left:auto; }
.ana-menu > ul{
	display:flex; align-items:center; gap:4px;
	margin:0; padding:0; list-style:none;
}
.ana-menu > ul > li{ margin:0; }
.ana-menu > ul > li > a{
	display:block; padding:10px 14px;
	font-size:.9rem; font-weight:500; letter-spacing:.01em;
	color:var(--metin-ters-2); border-radius:var(--yuvarlak);
	transition:color var(--gecis), background var(--gecis);
}
.ana-menu > ul > li > a:hover{ color:var(--kirik-beyaz); background:rgba(245,249,239,.07); }
/* etkin sayfa: altında pirinç çizgi — renk tek başına yeterli bir işaret değil */
.ana-menu > ul > li > a.etkin{
	color:var(--kirik-beyaz);
	box-shadow:inset 0 -2px 0 var(--vurgu-acik);
	background:transparent;
}

.basligi-eylem{ flex:none; padding:12px 22px; font-size:.88rem; }

/* mobil menü düğmesi — masaüstünde gizli */
.menu-dugme{
	display:none; margin-left:auto;
	width:46px; height:46px; padding:0;
	background:transparent; border:1px solid rgba(245,249,239,.26); border-radius:var(--yuvarlak);
	cursor:pointer;
}
.menu-dugme span{
	display:block; width:20px; height:1.5px; margin:4px auto;
	background:var(--kirik-beyaz); transition:transform var(--gecis), opacity var(--gecis);
}
.menu-dugme[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.menu-alt{ display:none; }
.menu-perde{
	position:fixed; inset:0; z-index:75;   /* panel 80, başlık 90 */
	background:rgba(43,43,48,.55);
}


/* ---------------------------------------------------------------------------
   5. ANA SAYFA SLAYTI
   ---------------------------------------------------------------------------
   Slaytlar üst üste duruyor; etkin olan `opacity` ile beliriyor. `display`
   DEĞİŞTİRİLMİYOR: display:none verilen bir karenin arka plan görseli bazı
   tarayıcılarda hiç indirilmez ve geçiş sırasında kare boş görünür.
   --------------------------------------------------------------------------- */
.slayt{
	position:relative;
	min-height:clamp(460px, 76vh, 760px);
	background:var(--antrasit);
	overflow:hidden;
}
.slayt-oge{
	position:absolute; inset:0;
	background-size:cover; background-position:center;
	opacity:0; transition:opacity .9s ease;
	pointer-events:none;
}
.slayt-oge.etkin{ opacity:1; pointer-events:auto; }

/* ⚠ PERDE ŞART: slayt görselleri açık renk iç mekân fotoğrafları (beyaz tül,
   açık duvar). Üzerine doğrudan yazılan kırık beyaz metin OKUNMAZ. Perde
   soldan sağa açılan bir degrade — fotoğrafın sağ tarafı açıkta kalır. */
.slayt-oge::after{
	content:''; position:absolute; inset:0; z-index:1;
	background:linear-gradient(100deg, rgba(43,43,48,.86) 0%, rgba(43,43,48,.66) 42%, rgba(43,43,48,.20) 76%, rgba(43,43,48,.08) 100%);
}

/* metin kutusu HER SLAYTIN İÇİNDE (bkz. views/home.php): kare ile metin tek
   `opacity` geçişiyle birlikte taşınır, ayrı eşlemeye gerek kalmaz */
.slayt-ic{
	position:relative; z-index:2;
	display:flex; align-items:center;
	height:100%;
	padding:80px 0;
}
.slayt-metin{ max-width:620px; color:var(--kirik-beyaz); }
.slayt-metin .etiket{ color:var(--vurgu-acik); }
.slayt-metin h1,.slayt-metin h2{ color:var(--kirik-beyaz); margin-bottom:.4em; }
.slayt-metin p{
	font-size:clamp(1rem, .93rem + .35vw, 1.18rem);
	color:rgba(245,249,239,.86); margin-bottom:1.8em;
}

/* yalnız fotoğraf taşıyan slaytlarda metin kutusu hiç basılmaz; perde de
   hafifler (fotoğrafın kendisi gösterilmek isteniyor) */
.slayt-oge.yazisiz::after{
	background:linear-gradient(100deg, rgba(43,43,48,.42) 0%, rgba(43,43,48,.16) 60%, rgba(43,43,48,.06) 100%);
}

.slayt-ok{
	position:absolute; top:50%; z-index:3; transform:translateY(-50%);
	display:grid; place-items:center; width:46px; height:46px;
	background:rgba(43,43,48,.42); border:1px solid rgba(245,249,239,.28);
	border-radius:50%; color:var(--kirik-beyaz); cursor:pointer;
	transition:background var(--gecis);
}
.slayt-ok:hover{ background:var(--antrasit); }
.slayt-onceki{ left:22px; }
.slayt-sonraki{ right:22px; }
.slayt-ok .ikon{ width:20px; height:20px; }

.slayt-noktalar{
	position:absolute; left:0; right:0; bottom:26px; z-index:3;
	display:flex; justify-content:center; gap:10px;
}
.slayt-noktalar button{
	width:28px; height:3px; padding:0;
	background:rgba(245,249,239,.34); border:0; border-radius:2px; cursor:pointer;
	transition:background var(--gecis), width var(--gecis);
}
.slayt-noktalar button.etkin{ background:var(--vurgu-acik); width:44px; }
/* dokunma hedefi görselden büyük olsun (3 px yüksek bir çubuğa parmakla
   isabet ettirmek zor) */
.slayt-noktalar button::before{ content:''; position:absolute; margin:-14px -4px; padding:14px 4px; }


/* ---------------------------------------------------------------------------
   6. ANA SAYFA BÖLÜMLERİ
   --------------------------------------------------------------------------- */

/* --- ÜRÜN KARTI ---
   ⚠ SABİT ORAN (4/5, dikey): ürün fotoğraflarının ölçüleri çok farklı
   (333x500'den 1927x1280'e). Kutuya oran verilmezse kart yüksekliği
   fotoğrafa göre değişir ve ızgara basamaklanır. `object-fit:cover` kareyi
   oranı bozmadan kırpar. */
.urun-kart{
	display:block; position:relative;
	background:var(--beyaz); border:1px solid var(--cizgi); border-radius:var(--yuvarlak-b);
	overflow:hidden; color:inherit;
	transition:transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.urun-kart:hover{ transform:translateY(-4px); box-shadow:var(--golge-2); border-color:var(--keten-3); color:inherit; }

.urun-kart-foto{ position:relative; aspect-ratio:4/5; background:var(--keten-2); overflow:hidden; }
.urun-kart-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.urun-kart:hover .urun-kart-foto img{ transform:scale(1.045); }

.urun-kart-ic{ padding:20px 22px 24px; }
/* ⚠ h2 VE h3 BİRLİKTE: kart başlığının etiketi SAYFAYA GÖRE değişiyor —
   ürünler sayfasında sayfanın h1'i "Ürünler" olduğu için kart başlığı h2,
   ana sayfada bölüm başlığı zaten h2 olduğu için kart h3. İkisi de AYNI
   boyutta çizilmeli; yoksa ürünler sayfasındaki kartlar gövde h2 ölçüsüyle
   (2.5rem'e kadar) basılıyordu. */
.urun-kart-ic h2,
.urun-kart-ic h3{ margin-bottom:.35em; font-size:1.22rem; }
.urun-kart-ic p{ color:var(--metin-soluk); font-size:.92rem; line-height:1.6; }
.urun-kart-git{
	display:inline-flex; align-items:center; gap:.45em; margin-top:14px;
	font-size:.84rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
	color:var(--vurgu);
}
.urun-kart:hover .urun-kart-git .ikon{ transform:translateX(4px); }
.urun-kart-git .ikon{ width:15px; height:15px; transition:transform var(--gecis); }

/* --- RAKAM ŞERİDİ (antrasit) --- */
.rakamlar{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center; }
.rakam{ padding:12px 16px; border-left:1px solid rgba(245,249,239,.14); }
.rakam:first-child{ border-left:0; }
.rakam-sayi{
	display:block;
	font-family:'Fraunces', Georgia, serif; font-variation-settings:'SOFT' 20,'WONK' 0,'opsz' 60;
	font-size:clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem); line-height:1;
	color:var(--vurgu-acik);
}
:lang(ru) .rakam-sayi{ font-family:'Inter', sans-serif; font-weight:600; }
.rakam-ad{
	display:block; margin-top:10px;
	font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
	color:var(--metin-ters-2);
}

/* --- İKİ SÜTUNLU ANLATIM (motorlu perde, hakkımızda, mağaza) --- */
.ikili{
	display:grid; grid-template-columns:1fr 1fr;
	gap:clamp(32px, 4vw, 72px); align-items:center;
}
.ikili-ters .ikili-gorsel{ order:2; }

/* görsel kolonu: büyük kare + altında iki küçük kare */
.ikili-gorsel{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ikili-gorsel a,
.ikili-gorsel span{
	display:block; overflow:hidden; border-radius:var(--yuvarlak-b);
	background:var(--keten-2); aspect-ratio:1/1;
}
.ikili-gorsel > :first-child{ grid-column:1 / -1; aspect-ratio:16/10; }
.ikili-gorsel img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.ikili-gorsel a:hover img{ transform:scale(1.04); }

.ikili-metin p{ color:var(--metin-2); }
.koyu .ikili-metin p{ color:var(--metin-ters-2); }
.ikili-metin .dugme{ margin-top:22px; }

/* --- REFERANS SEÇKİSİ --- */
.referans-kart{
	display:flex; flex-direction:column; gap:6px;
	padding:22px 24px;
	background:var(--beyaz); border:1px solid var(--cizgi); border-radius:var(--yuvarlak-b);
	border-left:3px solid var(--vurgu);
	transition:box-shadow var(--gecis), transform var(--gecis);
}
.referans-kart:hover{ box-shadow:var(--golge-1); transform:translateY(-2px); }
.referans-kart h3{ margin:0; font-size:1.06rem; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:-.01em; }
.referans-yer{
	display:inline-flex; align-items:center; gap:.4em;
	font-size:.83rem; color:var(--metin-soluk);
}
.referans-yer .ikon{ width:14px; height:14px; color:var(--vurgu); }
.referans-uygulama{ margin:4px 0 0; font-size:.9rem; color:var(--metin-2); }

.koyu .referans-kart{
	background:rgba(245,249,239,.05); border-color:rgba(245,249,239,.12);
	border-left-color:var(--vurgu-acik);
}
.koyu .referans-kart h3{ color:var(--kirik-beyaz); }
.koyu .referans-yer{ color:var(--metin-ters-2); }
.koyu .referans-yer .ikon{ color:var(--vurgu-acik); }
.koyu .referans-uygulama{ color:var(--metin-ters-2); }

/* --- İLETİŞİM ÇAĞRI BANDI --- */
.cagri{ text-align:center; }
.cagri h2{ margin-bottom:.4em; }
.cagri p{ max-width:620px; margin:0 auto 2em; }
.cagri-dugmeler{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }


/* ---------------------------------------------------------------------------
   7. İÇ SAYFA BANDI (.bant)
   ---------------------------------------------------------------------------
   Sayfanın tek <h1>'i ve kırıntı yolu burada. Fotoğraf varsa koyu perdeyle
   gösterilir, yoksa bant antrasit kalır ve ince bir doku deseni çizilir —
   böylece firma hiç kapak fotoğrafı yüklemeden de sayfa eksiksiz durur.
   --------------------------------------------------------------------------- */
.bant{
	position:relative;
	padding:clamp(48px, 5vw, 86px) 0 clamp(40px, 4vw, 64px);
	background:var(--antrasit); background-size:cover; background-position:center;
	color:var(--kirik-beyaz); overflow:hidden;
}
.bant-fotolu::before{
	content:''; position:absolute; inset:0;
	background:linear-gradient(90deg, rgba(43,43,48,.92) 0%, rgba(43,43,48,.74) 55%, rgba(43,43,48,.52) 100%);
}
/* fotoğrafsız bantta ince dikey çizgi deseni — perde lamelini andırır */
.bant-desen{
	position:absolute; inset:0; opacity:.5;
	background-image:repeating-linear-gradient(90deg, rgba(245,249,239,.05) 0 1px, transparent 1px 22px);
}
.bant-fotolu .bant-desen{ display:none; }
.bant-ic{ position:relative; z-index:2; }
.bant h1{ color:var(--kirik-beyaz); margin-bottom:.25em; }
.bant-alt{ max-width:680px; color:rgba(245,249,239,.82); font-size:1.05rem; margin:0; }

.kirinti{
	display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
	margin-bottom:1.1em; font-size:.82rem; color:rgba(245,249,239,.64);
}
.kirinti a{ color:rgba(245,249,239,.78); }
.kirinti a:hover{ color:var(--kirik-beyaz); }
.kirinti-ayrac{ opacity:.45; }
.kirinti-etkin{ color:var(--vurgu-acik); }


/* ---------------------------------------------------------------------------
   8. İÇ SAYFA DÜZENLERİ
   --------------------------------------------------------------------------- */

/* --- GALERİ --- */
.galeri{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.galeri-oge{
	display:block; position:relative; overflow:hidden;
	aspect-ratio:1/1; background:var(--keten-2); border-radius:var(--yuvarlak-b);
}
.galeri-oge img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.galeri-oge:hover img{ transform:scale(1.05); }
/* büyüteç işareti — karenin tıklanabilir olduğu belli olsun */
.galeri-oge::after{
	content:''; position:absolute; inset:0;
	background:rgba(43,43,48,.28); opacity:0; transition:opacity var(--gecis);
}
.galeri-oge:hover::after{ opacity:1; }
.galeri-buyutec{
	position:absolute; right:12px; bottom:12px; z-index:2;
	display:grid; place-items:center; width:34px; height:34px;
	background:rgba(43,43,48,.6); border-radius:50%; color:var(--kirik-beyaz);
	opacity:0; transition:opacity var(--gecis);
}
.galeri-oge:hover .galeri-buyutec{ opacity:1; }
.galeri-buyutec .ikon{ width:17px; height:17px; }

/* --- ÜRÜN DETAYI --- */
.urun-ust{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,4vw,64px); align-items:start; }
.urun-ana-foto{ border-radius:var(--yuvarlak-b); overflow:hidden; background:var(--keten-2); }
.urun-ana-foto img{ width:100%; }
.urun-bilgi .yazi{ font-size:1.05rem; }
.urun-bilgi .dugme{ margin-top:26px; }

/* --- REFERANSLAR SAYFASI --- */
.referans-filtre{
	display:flex; flex-wrap:wrap; gap:9px;
	margin-bottom:clamp(26px,3vw,40px);
}
.referans-filtre button{
	padding:9px 18px;
	background:var(--beyaz); border:1px solid var(--cizgi); border-radius:999px;
	font-family:inherit; font-size:.86rem; font-weight:500; color:var(--metin-2);
	cursor:pointer; transition:all var(--gecis);
}
.referans-filtre button:hover{ border-color:var(--vurgu); color:var(--vurgu); }
.referans-filtre button.etkin{ background:var(--antrasit); border-color:var(--antrasit); color:var(--kirik-beyaz); }
.referans-filtre .adet{ margin-left:.5em; opacity:.6; font-size:.82em; }

.referans-liste{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:0; }
/* ⚠ li FLEX, kart `height:100%`: metin uzunlukları çok farklı ("Genel
   mekanlar" ile "Motorlu stor, blackout stor, screen stor ve katlamalı
   sistemler" aynı satırda olabiliyor). Esnetilmezse aynı satırdaki kartlar
   farklı yükseklikte duruyor ve ızgara basamaklı görünüyordu (ekran
   görüntüsüyle yakalandı). */
.referans-liste > li{ margin:0; list-style:none; display:flex; }
.referans-liste > li > .referans-kart{ width:100%; }

/* mimarlık firmaları — proje değil, isim listesi */
.mimarlik{ display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none; }
.mimarlik li{
	margin:0; padding:10px 18px;
	background:var(--beyaz); border:1px solid var(--cizgi); border-radius:999px;
	font-size:.9rem; color:var(--metin-2);
}

/* --- VİDEOLAR --- */
.video-kart{
	display:block; position:relative; overflow:hidden;
	border-radius:var(--yuvarlak-b); background:var(--antrasit); color:inherit;
}
.video-kapak{ position:relative; aspect-ratio:16/9; }
.video-kapak img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, opacity var(--gecis); }
.video-kart:hover .video-kapak img{ transform:scale(1.04); opacity:.82; }
.video-oynat{
	position:absolute; inset:0; display:grid; place-items:center;
	color:var(--kirik-beyaz);
}
.video-oynat .ikon{ width:58px; height:58px; filter:drop-shadow(0 4px 14px rgba(43,43,48,.5)); }
.video-ad{
	padding:16px 20px; background:var(--antrasit); color:var(--kirik-beyaz);
	font-size:1rem; font-weight:500;
}

/* --- BELGE (PDF) SATIRI --- */
.belge-liste{ display:grid; gap:12px; padding:0; margin:0; list-style:none; }
.belge-liste li{ margin:0; }
.belge{
	display:flex; align-items:center; gap:14px;
	padding:16px 20px;
	background:rgba(245,249,239,.06); border:1px solid rgba(245,249,239,.16);
	border-radius:var(--yuvarlak-b); color:var(--kirik-beyaz);
	transition:background var(--gecis), border-color var(--gecis);
}
/* ⚠ `.koyu a` (0,1,1) `.belge`den (0,1,0) güçlü: dosya adı pirinç basılıyordu.
   Dosya adı bir "bağlantı metni" değil, satırın kendisi bağlantı — kırık beyaz
   okunur (10.42:1), pirinç ise 4.92:1'de kalıyordu. */
.koyu .belge{ color:var(--kirik-beyaz); }
.belge:hover,
.koyu .belge:hover{ background:rgba(245,249,239,.12); border-color:var(--vurgu-acik); color:var(--kirik-beyaz); }
.belge .ikon{ width:22px; height:22px; color:var(--vurgu-acik); }
.belge-ad{ flex:1; font-weight:500; }
.belge-tip{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--metin-ters-2); }

/* --- İLETİŞİM --- */
.iletisim-izgara{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,4vw,64px); align-items:start; }
.iletisim-liste{ padding:0; margin:0 0 28px; list-style:none; }
.iletisim-liste li{ display:flex; gap:14px; margin:0 0 20px; }
.iletisim-liste .ikon{ width:20px; height:20px; margin-top:4px; color:var(--vurgu); }
.iletisim-liste b{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.14em;
				   text-transform:uppercase; color:var(--metin-soluk); margin-bottom:2px; }
.iletisim-liste a{ color:var(--metin); }
.iletisim-liste a:hover{ color:var(--vurgu); }

.harita{
	border-radius:var(--yuvarlak-b); overflow:hidden;
	border:1px solid var(--cizgi); background:var(--keten-2); line-height:0;
}
.harita iframe{ width:100%; height:440px; border:0; display:block; }


/* ---------------------------------------------------------------------------
   9. FORMLAR
   --------------------------------------------------------------------------- */
.form{
	padding:clamp(24px,3vw,36px);
	background:var(--beyaz); border:1px solid var(--cizgi); border-radius:var(--yuvarlak-b);
}
.form h2{ margin-bottom:.7em; font-size:1.5rem; }

.form-satir{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-alan{ margin-bottom:16px; }
.form-alan label{
	display:block; margin-bottom:6px;
	font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--metin-2);
}
.form-alan input,
.form-alan textarea{
	width:100%; padding:13px 15px;
	font-family:inherit; font-size:.96rem; color:var(--metin);
	background:var(--keten); border:1px solid var(--cizgi); border-radius:var(--yuvarlak);
	transition:border-color var(--gecis), background var(--gecis);
}
.form-alan textarea{ min-height:140px; resize:vertical; }
.form-alan input:focus,
.form-alan textarea:focus{ background:var(--beyaz); border-color:var(--vurgu); outline-offset:0; }
/* sunucudan "bu alan hatalı" dönünce (form.js işaretler) */
.form-alan.hatali input,
.form-alan.hatali textarea{ border-color:#B3261E; background:#FDF4F3; }

.form-kod{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:end; }
.form-kod-gorsel{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.form-kod-gorsel img{ border-radius:var(--yuvarlak); border:1px solid var(--cizgi); }
.kod-yenile{
	display:inline-flex; align-items:center; gap:.35em;
	padding:0; background:none; border:0; cursor:pointer;
	font-family:inherit; font-size:.78rem; color:var(--metin-soluk);
}
.kod-yenile:hover{ color:var(--vurgu); }
.kod-yenile .ikon{ width:13px; height:13px; }

.form-gonder{ margin-top:4px; }

.form-sonuc:empty{ display:none; }
.form-sonuc{ margin-top:16px; }
.form-sonuc .basarili,
.form-sonuc .hata{
	padding:14px 18px; border-radius:var(--yuvarlak); font-size:.94rem;
	border:1px solid transparent;
}
.form-sonuc .basarili{ background:#EDF6EE; border-color:#BFDDC2; color:#1E4620; }
.form-sonuc .hata{ background:#FDF4F3; border-color:#E9C3BF; color:#8C1D18; }

/* KVKK/bilgi notu */
.form-not{ margin-top:14px; font-size:.82rem; color:var(--metin-soluk); }


/* ---------------------------------------------------------------------------
   10. ALTLIK
   --------------------------------------------------------------------------- */
.altlik{ background:var(--antrasit); color:var(--metin-ters-2); padding:clamp(48px,4vw,76px) 0 0; }
.altlik-izgara{
	display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr;
	gap:clamp(26px,3vw,48px);
}
.altlik h5{
	margin:0 0 18px;
	font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600;
	letter-spacing:.16em; text-transform:uppercase; color:var(--kirik-beyaz);
}
.altlik ul{ padding:0; margin:0; list-style:none; }
.altlik li{ margin:0 0 10px; }
.altlik a{ color:var(--metin-ters-2); font-size:.94rem; }
.altlik a:hover{ color:var(--kirik-beyaz); }
.altlik-tanim{ margin:18px 0 22px; font-size:.94rem; max-width:34ch; color:var(--metin-ters-2); }

.altlik-iletisim li{ display:flex; gap:10px; align-items:flex-start; }
.altlik-iletisim .ikon{ width:17px; height:17px; margin-top:4px; color:var(--vurgu-acik); }

.altlik-sosyal{ display:flex; gap:9px; margin-top:20px; }
.altlik-sosyal a{
	display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
	background:rgba(245,249,239,.08); color:var(--kirik-beyaz);
}
.altlik-sosyal a:hover{ background:var(--vurgu); color:#FFF8EC; }
.altlik-sosyal .ikon{ width:17px; height:17px; }

.altlik-alt{
	margin-top:clamp(36px,4vw,60px); padding:22px 0;
	border-top:1px solid rgba(245,249,239,.12);
}
.altlik-alt-ic{
	display:flex; align-items:center; justify-content:space-between;
	gap:16px; flex-wrap:wrap; font-size:.84rem;
}
/* kamber common::sign() üretici imzasını buraya basar; logosu 60x25 px
   yayınlanıyor, BÜYÜTÜLMEZ (bulanıklaşır) */
#ucxfooter img{ display:inline-block; vertical-align:middle; }


/* ---------------------------------------------------------------------------
   11. BÜYÜTME PENCERESİ (lightbox)
   --------------------------------------------------------------------------- */
body.buyutec-acik{ overflow:hidden; }
.buyutec{
	position:fixed; inset:0; z-index:200;
	display:grid; place-items:center;
	padding:56px 20px;
	background:rgba(30,30,34,.94);
}
.buyutec img{ max-width:100%; max-height:84vh; border-radius:var(--yuvarlak); box-shadow:var(--golge-3); }
.buyutec-kapat,
.buyutec-ok{
	position:absolute; display:grid; place-items:center;
	width:46px; height:46px; padding:0;
	background:rgba(245,249,239,.10); border:1px solid rgba(245,249,239,.24);
	border-radius:50%; color:var(--kirik-beyaz); cursor:pointer;
	transition:background var(--gecis);
}
.buyutec-kapat:hover,
.buyutec-ok:hover{ background:rgba(245,249,239,.22); }
.buyutec-kapat{ top:18px; right:18px; }
.buyutec-onceki{ left:18px; top:50%; transform:translateY(-50%); }
.buyutec-sonraki{ right:18px; top:50%; transform:translateY(-50%); }
.buyutec-kapat svg,.buyutec-ok svg{ width:21px; height:21px; }
.buyutec-sayac{
	position:absolute; left:0; right:0; bottom:18px;
	text-align:center; color:rgba(245,249,239,.76); font-size:.86rem; margin:0;
}


/* ---------------------------------------------------------------------------
   12. DUYARLILIK
   ---------------------------------------------------------------------------
   Kırılma noktaları içeriğin kendisine göre seçildi:
     1080px — ana menü altı maddesi artık logo + buton ile aynı satıra sığmıyor
      900px — dört sütunlu ızgaralar iki sütuna iniyor
      640px — tek sütun, telefon
   --------------------------------------------------------------------------- */
@media (max-width:1080px){
	.menu-dugme{ display:block; }
	.basligi-eylem{ display:none; }

	/* ⚠ PANEL BAŞLIĞIN İÇİNDE: `.ana-menu` DOM'da `.site-basligi`in ÇOCUĞU
	   (aria-controls ile bağlı). Başlık z-index:90 ile KENDİ YIĞIN BAĞLAMINI
	   kuruyor; panelin z-index'i (80) o bağlamın İÇİNDE değerlendiriliyor ve
	   kardeşi olan logo ile kapatma düğmesinin (z-index auto) ÜSTÜNE
	   biniyor. Sonuç: menü açıkken X düğmesi panelin arkasında kalıyor ve
	   tıklanamıyordu — menüyü kapatmanın tek yolu Esc ya da perdeydi.
	   (elementFromPoint ile ölçüldü: X'in merkezinde `ana-menu` çıkıyordu.)
	   Çözüm: ikisini panelin üstüne al. `position` olmadan z-index işlemez. */
	.menu-dugme,
	.marka-header{ position:relative; z-index:85; }

	/* MOBİL MENÜ PANELİ — başlığın altında tam ekran
	   ⚠ `top` değeri başlık yüksekliğine EŞİT; 84px sabit değil, çünkü
	   kaydırılınca başlık 68px'e iniyor. Bu yüzden panel `position:fixed` ve
	   `inset` ile çözülüyor, başlığa göre değil GÖRÜNÜME göre. */
	/* ⚠ z-index BAŞLIKTAN KÜÇÜK (80 < 90): panel 95 olduğunda başlığın
	   üstünü de kapatıyor ve KAPATMA DÜĞMESİ panelin ARKASINDA kalıyordu —
	   menü açıldıktan sonra kapatmanın tek yolu Esc ya da perdeye dokunmaktı
	   (telefon ekran görüntüsüyle yakalandı). Panel başlığın altında kalınca
	   X düğmesi görünür ve tıklanabilir oluyor; ikisi de antrasit olduğu için
	   görsel olarak yine tek parça duruyor. `padding-top` başlık yüksekliği
	   kadar boşluk bırakıyor. */
	/* ⚠ ÜST BOŞLUK SABİT DEĞİL, ÖLÇÜLÜR: panel `inset:0` ile görünümün
	   tepesinden başlıyor ama üstünde başlık duruyor. Başlığın yüksekliği
	   SABİT DEĞİL — üst şerit kaydırılınca görünümden çıkıyor ve başlık
	   84 px'den 68 px'e iniyor; yani üstte kalan alan 127 px de olabiliyor
	   68 px de. Sabit bir `padding-top` verildiğinde menünün ilk maddesi
	   logonun üstüne biniyordu (telefon ekran görüntüsüyle yakalandı).
	   Değeri assets/js/main.js menü açılırken ölçüp `--menu-ust`e yazıyor;
	   buradaki 128px yalnız JS çalışmazsa kullanılan yedektir. */
	.ana-menu{
		position:fixed; inset:0; z-index:80;
		display:flex; flex-direction:column;
		margin:0; padding:var(--menu-ust, 128px) 24px 32px;
		background:var(--antrasit);
		overflow-y:auto;
		transform:translateX(100%); visibility:hidden;
		transition:transform var(--gecis), visibility var(--gecis);
	}
	.ana-menu.acik{ transform:none; visibility:visible; }
	.ana-menu > ul{ flex-direction:column; align-items:stretch; gap:0; }
	.ana-menu > ul > li > a{
		padding:15px 4px; font-size:1.05rem;
		border-bottom:1px solid rgba(245,249,239,.10); border-radius:0;
	}
	.ana-menu > ul > li > a.etkin{ box-shadow:none; color:var(--vurgu-acik); }

	.menu-alt{ display:block; margin-top:auto; padding-top:26px; }
	.menu-alt .dugme{ width:100%; margin-top:10px; }

	body.menu-acik{ overflow:hidden; }
}

@media (max-width:980px){
	.ikili{ grid-template-columns:1fr; }
	.ikili-ters .ikili-gorsel{ order:0; }
	.urun-ust{ grid-template-columns:1fr; }
	.iletisim-izgara{ grid-template-columns:1fr; }
	.altlik-izgara{ grid-template-columns:1fr 1fr; }
	.referans-liste{ grid-template-columns:repeat(2,1fr); }
	.izgara-4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
	.izgara-3{ grid-template-columns:repeat(2,1fr); }
	.galeri{ grid-template-columns:repeat(3,1fr); }
	.ust-serit-bilgi .ust-oge-saat{ display:none; }
}

@media (max-width:767px){
	/* üst şeritte TEK telefon kalır; e-posta, saat, ikinci numara ve sosyal
	   gider. Gerekçe: 390 px'de dört öğe iki satıra sarıyor ve slaytı 42 px
	   aşağı itiyordu (ölçüldü). Dar ekranda birincil iş ARANABİLİR olmak;
	   ikinci numara zaten altlıkta ve iletişim sayfasında duruyor. */
	.ust-serit-bilgi .ust-oge-mail{ display:none; }
	.ust-serit-bilgi .ust-oge:nth-of-type(n+2){ display:none; }
	.ust-serit-sosyal{ display:none; }

	.slayt{ min-height:clamp(420px, 68vh, 560px); }
	.slayt-ic{ padding:56px 0; }
	.slayt-ok{ display:none; }          /* dokunarak kaydırma var */
	.slayt-metin{ max-width:none; }
	/* telefonda perde her yandan koyulaşır: metin ortada duruyor */
	.slayt-oge::after{
		background:linear-gradient(180deg, rgba(43,43,48,.62) 0%, rgba(43,43,48,.78) 100%);
	}

	.izgara-2,.izgara-3,.izgara-4{ grid-template-columns:1fr; }
	.galeri{ grid-template-columns:repeat(2,1fr); gap:10px; }
	.referans-liste{ grid-template-columns:1fr; }
	.rakamlar{ grid-template-columns:repeat(2,1fr); gap:28px 0; }
	.rakam{ border-left:0; }
	.rakam:nth-child(2n){ border-left:1px solid rgba(245,249,239,.14); }
	.altlik-izgara{ grid-template-columns:1fr; }
	.form-satir{ grid-template-columns:1fr; gap:0; }
	.form-kod{ grid-template-columns:1fr; }
	.form-kod-gorsel{ align-items:flex-start; }
	.harita iframe{ height:340px; }
	.cagri-dugmeler .dugme{ width:100%; }
}

@media (max-width:420px){
	.kutu{ padding:0 18px; }
	.ikili-gorsel{ grid-template-columns:1fr; }
	.ikili-gorsel > :first-child{ aspect-ratio:4/3; }
}


/* ---------------------------------------------------------------------------
   13. ERİŞİLEBİLİRLİK TERCİHLERİ + BASKI
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	*,*::before,*::after{
		animation-duration:.001ms !important; animation-iteration-count:1 !important;
		transition-duration:.001ms !important; scroll-behavior:auto !important;
	}
	.slayt-oge{ transition:none; }
}

@media print{
	.ust-serit,.site-basligi,.slayt,.altlik,.menu-perde,.buyutec,.cagri{ display:none !important; }
	body{ background:#fff; color:#000; }
	.bant{ background:#fff !important; color:#000; padding:0 0 18px; }
	.bant h1,.bant-alt,.kirinti{ color:#000; }
	a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}