/* =====================================================================
   SİREM ÇELİK KAPI — TASARIM SİSTEMİ

   Marka renkleri eski siteden korundu: pirinç #dd9933, lacivert #001c40.
   Geri kalan her şey yeniden kuruldu.

   Yaklaşım: çelik kapı bir yapı elemanı — ağır, hassas, çerçeveli.
   Tasarım bunu taşıyor: keskin köşeler, ince çizgiler, derin lacivert
   zeminler, pirinç yalnızca vurgu olarak. Gölge neredeyse hiç yok;
   katmanlar çizgiyle ayrılıyor.

   İçindekiler
     1. Değişkenler
     2. Sıfırlama ve temel
     3. Tipografi
     4. Düzen
     5. Düğmeler
     6. Başlık ve gezinme
     7. Kahraman bölümü
     8. Kartlar (ürün, kategori, yazı)
     9. Bölümler
    10. İçerik gövdesi
    11. SSS
    12. Form
    13. Alt bilgi
    14. Mobil eylem çubuğu
    15. Yardımcılar
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. YAZI TİPİ

   Yerelden sunuluyor. Google Fonts'a bağlanmıyoruz: hem render
   engelleyici bir istek hem de ziyaretçi IP'sinin üçüncü tarafa
   aktarılması (KVKK) anlamına geliyordu — eski sitedeki durum buydu.

   Dosyalar: public/assets/fonts/ altına konur.
   Alt küme: latin + latin-ext (Türkçe karakterler latin-ext içinde).
   Dosyalar yoksa tarayıcı sistem yazı tipine düşer, site bozulmaz.
   --------------------------------------------------------------------- */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20BF;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20BF;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0100-024F, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20A0-20BF;
}

/* ---------------------------------------------------------------------
   1. DEĞİŞKENLER
   --------------------------------------------------------------------- */

:root {
	/* Marka */
	--navy:        #001c40;
	--navy-700:    #052a5c;
	--navy-500:    #0d3f7d;
	--brass:       #dd9933;
	--brass-600:   #c07f1e;
	--brass-700:   #9c6614;

	/* Nötrler — mavi eğilimli çelik grileri, saf gri değil */
	--ink:         #0c1420;
	--ink-2:       #414d5c;
	--ink-3:       #6d7a89;
	--line:        #e0e6ec;
	--line-2:      #cbd4dd;
	--ground:      #ffffff;
	--ground-2:    #f4f7f9;
	--ground-3:    #eaeff4;

	/* Durum */
	--ok:          #15653f;
	--warn:        #8a5a00;
	--err:         #b3261e;

	/* Tipografi */
	--font:        "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
	--mono:        ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

	/* 1.25 oranlı ölçek, akışkan */
	--t-xs:        0.8125rem;
	--t-sm:        0.9375rem;
	--t-base:      1.0625rem;
	--t-lg:        1.1875rem;
	--t-xl:        clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--t-2xl:       clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
	--t-3xl:       clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
	--t-4xl:       clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);

	/* Aralık */
	--sp-1:        0.25rem;
	--sp-2:        0.5rem;
	--sp-3:        0.75rem;
	--sp-4:        1rem;
	--sp-5:        1.5rem;
	--sp-6:        2rem;
	--sp-7:        3rem;
	--sp-8:        4rem;
	--sp-9:        6rem;

	--bolum:       clamp(3rem, 2rem + 4vw, 6rem);

	/* Ölçüler */
	--kap:         1220px;
	--kap-dar:     740px;
	--radius:      3px;
	--radius-lg:   5px;
}

/* ---------------------------------------------------------------------
   2. SIFIRLAMA VE TEMEL
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
}

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

a { color: var(--navy-500); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brass-700); }

:focus-visible {
	outline: 2px solid var(--brass);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection { background: var(--brass); color: #17110a; }

/* İçeriğe atla */
.atla {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--sp-3) var(--sp-5);
	background: var(--navy);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.atla:focus { left: var(--sp-4); top: var(--sp-4); color: #fff; }

/* ---------------------------------------------------------------------
   3. TİPOGRAFİ
   --------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-4);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.022em;
	text-wrap: balance;
	color: var(--ink);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); }

p { margin: 0 0 var(--sp-4); }

/* Göz kaşı — bölüm üstündeki küçük etiket */
.kas {
	font-family: var(--mono);
	font-size: var(--t-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--brass-700);
	margin: 0 0 var(--sp-3);
	display: block;
}

.kas--acik { color: var(--brass); }

/* Giriş paragrafı */
.giris {
	font-size: var(--t-lg);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 62ch;
}

.olcu { max-width: 68ch; }

/* ---------------------------------------------------------------------
   4. DÜZEN
   --------------------------------------------------------------------- */

.kap {
	width: 100%;
	max-width: var(--kap);
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

.kap--dar { max-width: var(--kap-dar); }

.bolum { padding-block: var(--bolum); }
.bolum--ust { padding-top: var(--bolum); padding-bottom: 0; }
.bolum--gri { background: var(--ground-2); }
.bolum--lacivert { background: var(--navy); color: #fff; }
.bolum--lacivert h1,
.bolum--lacivert h2,
.bolum--lacivert h3 { color: #fff; }
.bolum--lacivert p { color: rgba(255, 255, 255, 0.82); }

.izgara { display: grid; gap: var(--sp-5); }
.izgara--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.izgara--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.izgara--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.bolum-basi {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}

.bolum-basi h2 { margin-bottom: 0; }
.bolum-basi > div { max-width: 62ch; }

/* ---------------------------------------------------------------------
   5. DÜĞMELER
   --------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.btn--pirinc { background: var(--brass); color: #1a1408; }
.btn--pirinc:hover { background: var(--brass-600); color: #1a1408; }

.btn--lacivert { background: var(--navy); color: #fff; }
.btn--lacivert:hover { background: var(--navy-700); color: #fff; }

.btn--cizgi {
	background: transparent;
	border-color: var(--line-2);
	color: var(--ink);
}
.btn--cizgi:hover { border-color: var(--navy); color: var(--navy); }

.btn--cizgi-acik {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: #fff;
}
.btn--cizgi-acik:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

.btn--wa { background: #25d366; color: #04220f; }
.btn--wa:hover { background: #1eb857; color: #04220f; }

.btn--blok { width: 100%; }

.btn-grup { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------------------------------------------------------------------
   6. BAŞLIK VE GEZİNME
   --------------------------------------------------------------------- */

.ust-serit {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--t-sm);
}

.ust-serit .kap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	min-height: 42px;
	padding-block: var(--sp-2);
}

.ust-serit a { color: #fff; text-decoration: none; font-weight: 600; }
.ust-serit a:hover { color: var(--brass); }

.ust-serit__slogan {
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--t-xs);
	letter-spacing: 0.02em;
}

.ust-iletisim { display: flex; gap: var(--sp-5); align-items: center; }

.baslik {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ground);
	border-bottom: 1px solid var(--line);
}

.baslik .kap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: 76px;
}

.logo { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; }
.logo img { height: 42px; width: auto; }

.logo__ad {
	font-size: var(--t-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--navy);
	line-height: 1.05;
}
.logo__alt {
	display: block;
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Ana menü */
.menu { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.menu li { position: relative; }

.menu > li > a {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	font-size: 1rem;
	font-weight: 600;
	/* Büyük harfte harfler birbirine yapışır; aralık açmak şart. */
	text-transform: uppercase;
	letter-spacing: 0.045em;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius);
}

.menu > li > a:hover,
.menu > li > a[aria-current="page"] { color: var(--navy); background: var(--ground-2); }

.menu__alt {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	list-style: none;
	margin: 0;
	padding: var(--sp-2);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 32px -16px rgba(12, 20, 32, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
}

.menu li:hover > .menu__alt,
.menu li:focus-within > .menu__alt {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu__alt a {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--t-sm);
	color: var(--ink-2);
	text-decoration: none;
	border-radius: var(--radius);
}
.menu__alt a:hover { background: var(--ground-2); color: var(--navy); }

.baslik__eylem { display: flex; align-items: center; gap: var(--sp-3); }

/* Mobil menü düğmesi */
.menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	cursor: pointer;
}
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.menu-btn span::before,
.menu-btn span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }

/* ---------------------------------------------------------------------
   7. KAHRAMAN BÖLÜMÜ
   --------------------------------------------------------------------- */

.kahraman {
	position: relative;
	background: var(--navy);
	color: #fff;
	overflow: hidden;
}

/* Zemine derinlik veren ince ışık — düz lacivert yerine hacim */
.kahraman::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(90% 70% at 78% 40%, rgba(221, 153, 51, 0.14), transparent 62%),
		radial-gradient(70% 60% at 8% 78%, rgba(13, 63, 125, 0.55), transparent 70%);
	pointer-events: none;
}

.kahraman .kap { position: relative; z-index: 1; }

.kahraman__ic {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: stretch;
	gap: var(--sp-7);
	min-height: min(86vh, 760px);
}

.kahraman__metin {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--sp-8);
}

.kahraman__metin h1 {
	color: #fff;
	margin-bottom: var(--sp-5);
	font-size: clamp(2.4rem, 1.4rem + 4vw, 4.25rem);
	letter-spacing: -0.03em;
	line-height: 1.03;
}

.kahraman__metin h1 em {
	font-style: normal;
	color: var(--brass);
}

.kahraman__metin p { color: rgba(255, 255, 255, 0.82); font-size: var(--t-lg); max-width: 46ch; }

/*
   Görsel taraf.

   Fotoğraflar fabrika ortamında telefonla çekilmiş; arka planı geri
   plana itmek için hafif koyulaştırma ve alt gradyan uygulanıyor.
   Pirinç çerçeve kapıyı vitrine alıyor — asıl ürün o.
*/
.kahraman__gorsel {
	position: relative;
	align-self: stretch;
	margin-block: var(--sp-6);
	border: 1px solid rgba(221, 153, 51, 0.45);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}

.kahraman__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.06);
}

.kahraman__gorsel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 18, 40, 0.55) 0%, transparent 45%);
	pointer-events: none;
}

/* Görselin üstündeki model etiketi */
.kahraman__etiket {
	position: absolute;
	left: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.45rem 0.85rem;
	background: rgba(0, 18, 40, 0.72);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.kahraman__etiket::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--brass);
}

/* Güven şeridi */
.guven {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.guven__oge { display: flex; flex-direction: column; gap: 2px; }
.guven__deger { font-size: var(--t-xl); font-weight: 700; color: var(--brass); font-variant-numeric: tabular-nums; }
.guven__etiket { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.7); letter-spacing: 0.02em; }

/* Sayfa başlığı (iç sayfalar) */
.sayfa-basi {
	background: var(--navy);
	color: #fff;
	padding-block: var(--sp-7);
}
.sayfa-basi h1 { color: #fff; margin-bottom: var(--sp-2); }
.sayfa-basi p { color: rgba(255, 255, 255, 0.78); max-width: 62ch; margin-bottom: 0; }

/* Kırıntı */
.kirinti { font-size: var(--t-xs); margin-bottom: var(--sp-4); }
.kirinti ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.kirinti li::after { content: "/"; margin-left: var(--sp-2); color: rgba(255, 255, 255, 0.35); }
.kirinti li:last-child::after { content: ""; }
.kirinti a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.kirinti a:hover { color: var(--brass); }
.kirinti [aria-current] { color: #fff; }

/* ---------------------------------------------------------------------
   8. KARTLAR
   --------------------------------------------------------------------- */

.kart {
	display: flex;
	flex-direction: column;
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, transform .16s ease;
}

.kart:hover { border-color: var(--line-2); transform: translateY(-2px); color: inherit; }

.kart__gorsel {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--ground-3);
	overflow: hidden;
}
.kart__gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kart:hover .kart__gorsel img { transform: scale(1.03); }

.kart__govde { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.kart__kat { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-700); }
.kart__ad { font-size: var(--t-base); font-weight: 600; line-height: 1.35; margin: 0; letter-spacing: -0.01em; }
.kart__ozet { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }

.kart__eylem {
	margin-top: auto;
	padding-top: var(--sp-3);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--navy-500);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}
.kart:hover .kart__eylem { color: var(--brass-700); }

/* Kategori kartı — daha büyük, lacivert zemin */
.kat-kart {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 330px;
	padding: var(--sp-5);
	background: var(--navy);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}

.kat-kart img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	z-index: -2;
}
.kat-kart:hover img { transform: scale(1.05); }

/* Fotoğrafın üstüne okunabilirlik için lacivert perde */
.kat-kart::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 18, 40, 0.92) 8%, rgba(0, 22, 48, 0.45) 55%, rgba(0, 22, 48, 0.15) 100%);
}

.kat-kart__ic { position: relative; z-index: 1; }
.kat-kart h3 { color: #fff; font-size: var(--t-xl); margin-bottom: var(--sp-1); }
.kat-kart span { font-size: var(--t-sm); color: rgba(255, 255, 255, 0.78); }
.kat-kart::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: var(--brass);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.kat-kart:hover::after { transform: scaleX(1); }

/* Yazı kartı */
.yazi-kart .kart__gorsel { aspect-ratio: 16 / 10; }
.yazi-kart .kart__tarih { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }

/* Hizmet kutusu — görselsiz, çizgili */
.hizmet {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background: var(--ground);
	border: 1px solid var(--line);
	border-top: 3px solid var(--brass);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease;
}
.hizmet:hover { border-color: var(--line-2); border-top-color: var(--brass); color: inherit; }
.hizmet h3 { font-size: var(--t-lg); margin: 0; }
.hizmet p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

/* ---------------------------------------------------------------------
   9. BÖLÜMLER
   --------------------------------------------------------------------- */

/* Teklif çağrısı */
.cta {
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--sp-6);
}

.cta h2 { color: #fff; font-size: var(--t-2xl); margin-bottom: var(--sp-2); }
.cta p { color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 54ch; }
.cta__eylem { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Bölge listesi */
.bolge-liste { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }

.bolge-liste a {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: var(--t-sm);
	color: var(--ink-2);
	text-decoration: none;
	transition: border-color .14s ease, color .14s ease;
}
.bolge-liste a:hover { border-color: var(--brass); color: var(--navy); }

/* Teknik özellik tablosu */
.ozellik { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ozellik th,
.ozellik td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); }
.ozellik th { width: 45%; font-weight: 600; color: var(--ink-2); }
.ozellik td { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink); }
.ozellik tr:last-child th,
.ozellik tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------------
   10. İÇERİK GÖVDESİ
   --------------------------------------------------------------------- */

.icerik { max-width: 68ch; }
.icerik > *:first-child { margin-top: 0; }
.icerik h2 { font-size: var(--t-2xl); margin-top: var(--sp-7); }
.icerik h3 { font-size: var(--t-xl); margin-top: var(--sp-6); }
.icerik p { color: var(--ink-2); }
.icerik ul, .icerik ol { color: var(--ink-2); padding-left: 1.25rem; margin-bottom: var(--sp-4); }
.icerik li { margin-bottom: var(--sp-2); }
.icerik strong { color: var(--ink); font-weight: 600; }

.icerik blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-4) var(--sp-5);
	border-left: 3px solid var(--brass);
	background: var(--ground-2);
	font-size: var(--t-lg);
	color: var(--ink);
}

.icerik table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); }
.icerik th, .icerik td { padding: var(--sp-3); border: 1px solid var(--line); text-align: left; }

/* ---------------------------------------------------------------------
   11. SIKÇA SORULAN SORULAR
   --------------------------------------------------------------------- */

.sss { border-top: 1px solid var(--line); max-width: 68ch; }

.sss__oge { border-bottom: 1px solid var(--line); }

.sss__oge summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	font-size: var(--t-lg);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.sss__oge summary::-webkit-details-marker { display: none; }

.sss__oge summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1;
	color: var(--brass);
	transition: transform .2s ease;
}
.sss__oge[open] summary::after { content: "−"; }

.sss__oge > p {
	margin: 0 0 var(--sp-4);
	padding-right: var(--sp-6);
	color: var(--ink-2);
}

/* ---------------------------------------------------------------------
   12. FORM
   --------------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-4); }
.form__satir { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.alan { display: flex; flex-direction: column; gap: var(--sp-2); }

.alan label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.alan label .zorunlu { color: var(--err); }

.alan input,
.alan textarea,
.alan select {
	width: 100%;
	padding: 0.8rem 1rem;
	font: inherit;
	font-size: var(--t-base);
	color: var(--ink);
	background: var(--ground);
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	transition: border-color .14s ease;
}

.alan input:hover,
.alan textarea:hover { border-color: var(--ink-3); }

.alan input:focus,
.alan textarea:focus,
.alan select:focus { border-color: var(--navy); outline: 2px solid rgba(0, 28, 64, 0.14); outline-offset: 0; }

.alan textarea { min-height: 130px; resize: vertical; }

/* Bal küpü — bota görünür, insana görünmez */
.tuzak { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.uyari {
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	font-size: var(--t-sm);
	border: 1px solid;
	margin-bottom: var(--sp-4);
}
.uyari--ok { background: #eaf5ef; border-color: #b9dcc8; color: var(--ok); }
.uyari--hata { background: #fceceb; border-color: #f0c5c2; color: var(--err); }

/* ---------------------------------------------------------------------
   13. ALT BİLGİ
   --------------------------------------------------------------------- */

.alt {
	background: var(--navy);
	color: rgba(255, 255, 255, 0.76);
	padding-top: var(--sp-8);
	font-size: var(--t-sm);
}

.alt__izgara {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: var(--sp-6);
	padding-bottom: var(--sp-7);
}

.alt h3 {
	font-size: var(--t-xs);
	font-family: var(--mono);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: var(--sp-4);
}

.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.alt a { color: rgba(255, 255, 255, 0.76); text-decoration: none; }
.alt a:hover { color: #fff; }

.alt__marka .logo__ad { color: #fff; }
.alt__marka p { color: rgba(255, 255, 255, 0.6); max-width: 34ch; margin-top: var(--sp-4); }

.alt__iletisim li { display: flex; gap: var(--sp-2); }
.alt__iletisim .etiket { color: rgba(255, 255, 255, 0.5); min-width: 62px; }

.alt__dip {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: var(--sp-4);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--sp-3);
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.52);
}

/* ---------------------------------------------------------------------
   14a. SAĞ YAPIŞKAN İLETİŞİM WIDGET'I

   Masaüstünde ekranın sağ kenarında sabit durur. Kapalıyken yalnızca
   simge görünür; üzerine gelince etiket açılır. Mobilde gizlenir —
   orada alttaki eylem çubuğu aynı işi daha erişilebilir yapıyor.
   --------------------------------------------------------------------- */

.yan-widget {
	position: fixed;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.yan-widget[hidden] { display: none; }

.yan-widget__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 0;
	border-radius: 50%;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
	transition: transform .16s ease, box-shadow .16s ease;
}

.yan-widget__btn:hover,
.yan-widget__btn:focus-visible {
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
}

.yan-widget__btn svg { width: 26px; height: 26px; }

/* Renkler eski sitedeki widget ile aynı */
.yan-widget__btn--tel    { background: #16b45a; }
.yan-widget__btn--wa     { background: #5cb85c; }
.yan-widget__btn--harita { background: #e8402a; }
.yan-widget__btn--kapat  { background: #2b6cd4; }
.yan-widget__btn--kapat svg { width: 20px; height: 20px; }

/*
   Sol tarafta açılan etiket. Dinlenme hâlinde görünmez, bu yüzden
   widget eski görünümünü birebir korur; fare ya da klavye odağıyla
   ne olduğunu söyler.
*/
.yan-widget__btn span {
	position: absolute;
	right: calc(100% + 10px);
	padding: 6px 11px;
	background: var(--ink);
	color: #fff;
	font-size: var(--t-xs);
	font-weight: 600;
	white-space: nowrap;
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transform: translateX(6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	pointer-events: none;
}

.yan-widget__btn span::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: var(--ink);
}

.yan-widget__btn:hover span,
.yan-widget__btn:focus-visible span {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* ---------------------------------------------------------------------
   14. MOBİL EYLEM ÇUBUĞU

   Bu iş kolunda dönüşüm telefonla oluyor. Mobilde ekranın altında
   sabit duran ara/WhatsApp çubuğu en yüksek etkili tek öğe.
   --------------------------------------------------------------------- */

.mobil-cubuk {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: var(--ground);
	border-top: 1px solid var(--line);
	padding: var(--sp-2);
	gap: var(--sp-2);
	box-shadow: 0 -4px 20px -8px rgba(12, 20, 32, 0.2);
}

.mobil-cubuk .btn { flex: 1; padding-block: 0.8rem; }

/* ---------------------------------------------------------------------
   15. YARDIMCILAR
   --------------------------------------------------------------------- */

.gizli {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.merkez { text-align: center; }
.merkez .giris { margin-inline: auto; }

.sayfalama { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.sayfalama a, .sayfalama span {
	min-width: 42px;
	padding: 0.6rem 0.8rem;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: var(--t-sm);
	text-decoration: none;
	color: var(--ink-2);
	font-variant-numeric: tabular-nums;
}
.sayfalama a:hover { border-color: var(--navy); color: var(--navy); }
.sayfalama [aria-current] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------------------------------------------------------------------
   DUYARLI DÜZEN
   --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.alt__izgara { grid-template-columns: 1fr 1fr; }
	.kahraman__ic { min-height: 480px; }
}

@media (max-width: 860px) {
	.menu, .baslik__eylem .btn { display: none; }
	.menu-btn { display: flex; }

	/* Açılan mobil menü — başlığın altına tam genişlik yerleşir */
	.menu.menu--acik {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: var(--sp-3);
		gap: 0;
		background: var(--ground);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 12px 28px -18px rgba(12, 20, 32, 0.4);
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}

	.menu.menu--acik > li > a { padding-block: var(--sp-4); }

	/* Alt menüler mobilde hep açık; hover diye bir şey yok */
	.menu.menu--acik .menu__alt {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-left: 2px solid var(--line);
		border-radius: 0;
		margin-left: var(--sp-4);
		min-width: 0;
	}

	/* Sağ widget mobilde gizlenir; alttaki çubuk aynı işi yapıyor. */
	.yan-widget { display: none; }

	.kahraman__ic { grid-template-columns: 1fr; }
	.kahraman__metin { padding: var(--sp-7) 0; order: 2; }
	.kahraman__gorsel { order: 1; aspect-ratio: 16 / 10; }
	.kahraman__gorsel::after { border-left: 0; border-bottom: 4px solid var(--brass); }

	.cta { grid-template-columns: 1fr; }

	.mobil-cubuk { display: flex; }
	body { padding-bottom: 68px; }

	.ust-serit__slogan { display: none; }
}

@media (max-width: 600px) {
	.alt__izgara { grid-template-columns: 1fr; gap: var(--sp-5); }
	.izgara--3, .izgara--4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.guven { gap: var(--sp-4); }
}

/* ---------------------------------------------------------------------
   HAREKET TERCİHİ
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ---------------------------------------------------------------------
   YAZDIRMA
   --------------------------------------------------------------------- */

@media print {
	.ust-serit, .baslik, .alt, .mobil-cubuk, .cta, .atla { display: none !important; }
	body { color: #000; background: #fff; font-size: 11pt; }
	a { text-decoration: none; color: #000; }
}