/* ==========================================================================
   Filiz Küntaş Sigorta
   Renk, tipografi ve sayfa akışı brief'ten. Turuncu yalnız aksiyon rengidir.
   ========================================================================== */

/* --------------------------------------------------------------- fontlar */

@font-face {
	font-family: 'Marcellus';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url('../fonts/Marcellus-latin-ext-400.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Marcellus';
	font-style: normal;
	font-weight: 400;
	font-display: optional;
	src: url('../fonts/Marcellus-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Manrope-latin-ext-400.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Manrope-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/Manrope-latin-ext-500.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/Manrope-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/Manrope-latin-ext-600.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/Manrope-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/Manrope-latin-ext-700.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/Manrope-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Web fontu yüklenene kadar kullanılan yedekler, metrikleri eşitlenmiş. */
@font-face {
	font-family: 'Marcellus Yedek';
	src: local('Georgia'), local('Times New Roman');
	size-adjust: 99.62%;
	ascent-override: 97.78%;
	descent-override: 28.09%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Manrope Yedek';
	src: local('Helvetica Neue'), local('Arial');
	size-adjust: 102.01%;
	ascent-override: 104.5%;
	descent-override: 29.41%;
	line-gap-override: 0%;
}

/* --------------------------------------------------------------- değişkenler */

:root {
	--lacivert: #003781;      /* Allianz mavisi */
	--lacivert-koyu: #002B66;
	--sampanya: #D6C294;      /* mat şampanya — brief RGB(214,194,148) */
	--sampanya-koyu: #886F34; /* beyaz zeminde okunaklı ton, ~4.8:1 kontrast */
	--turuncu: #F36F21;       /* aksiyon rengi */
	--turuncu-koyu: #C94F08;  /* beyaz zeminde bağlantı metni */
	--beyaz: #FFFFFF;
	--kirik: #FAF8F4;
	--metin: #2B3A4E;
	--cizgi: #E6E1D8;

	--baslik: 'Marcellus', 'Marcellus Yedek', Georgia, serif;
	--govde: 'Manrope', 'Manrope Yedek', system-ui, -apple-system, sans-serif;

	--kenar: clamp(20px, 5vw, 56px);
	--bolum: clamp(64px, 9vw, 120px);
	--genislik: 1180px;
	/* Sabit tuval (owner kararı 28.08.2026): site 1280×800'de onaylandı; iki
	   kolonlu bantların içeriği bu genişliğe kilitlenir ve büyük ekranda
	   ortalanır. Renk bantları kenardan kenara akmaya devam eder. 1280 üzeri
	   her ekran böylece onaylanan görünümün aynısını verir. */
	--tuval: 1280px;
}

/* --------------------------------------------------------------- temel */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--beyaz);
	color: var(--metin);
	font-family: var(--govde);
	font-size: 1.125rem;
	line-height: 1.7;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	margin: 0;
	font-family: var(--baslik);
	font-weight: 400;
	color: var(--lacivert);
	line-height: 1.3;
	letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.3rem, 1.3rem + 4vw, 4.4rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.25; }

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

::selection { background: var(--sampanya); color: var(--lacivert); }

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

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

.ic {
	width: 100%;
	max-width: var(--genislik);
	margin-inline: auto;
	padding-inline: var(--kenar);
}

/* Ürün bento'su .ic'den (1180) geniş ama tuvali aşmaz — 1560'tı, sabit tuval
   kararıyla 1280'e çekildi (28.08.2026): geniş ekranda kartlar büyümez. */
.ic--genis { max-width: var(--tuval); }

.bolum { padding-block: var(--bolum); }
.bolum--sampanya { background: var(--sampanya); color: var(--lacivert); }
.bolum--lacivert { background: var(--lacivert); color: var(--beyaz); }
.bolum--lacivert h2 { color: var(--beyaz); }

/* Lacivert ile beyaz arası her geçişte ince şampanya çizgi (tabela detayı). */
.bolum--sampanya + .bolum { border-top: 1px solid rgba(214, 194, 148, 0.4); }

.bolum-basligi { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------- butonlar */

/* Turuncu zemin + beyaz yazı: kontrast ~2.95:1, WCAG'ın 3:1 büyük-metin
   eşiğinin bile altında — bilerek tercih edildi (2026-08-17, açık onayla). */
.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0.75rem 1.75rem;
	background: var(--turuncu);
	color: var(--beyaz);
	font-family: var(--govde);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}
.dugme:hover { background: #FF7F35; transform: translateY(-1px); }
.dugme:active { transform: none; }

.dugme--kucuk { min-height: 44px; padding: 0.5rem 1.1rem; }

/* İkincil aksiyonlar: dolgusuz, ince kenarlıklı pill — drsarah'ın sakin buton dili.
   Ana "Beni Ara" CTA'sı (.dugme) buna DÖNÜŞMEZ, dolgulu turuncu kalır. */
.dugme-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.75rem 1.75rem;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: var(--lacivert);
	font-family: var(--govde);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	transition: background-color 200ms ease, color 200ms ease;
}
.dugme-ghost:hover { background: var(--lacivert); color: var(--beyaz); }

.bag {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--turuncu-koyu);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------- eksik veri */

.eksik {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	padding: 0.4rem 0.7rem;
	border: 1px dashed var(--turuncu-koyu);
	border-radius: 4px;
	background: rgba(243, 111, 33, 0.08);
	color: #BE4A07;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.35;
}
.eksik em { font-style: normal; font-weight: 500; letter-spacing: 0; opacity: 0.85; }

/* Şampanya zeminde turuncu okunmuyor; uyarı laciverte döner. */
.bolum--sampanya .eksik {
	color: var(--lacivert);
	border-color: rgba(0, 55, 129, 0.55);
	background: rgba(255, 255, 255, 0.4);
}

.tabela .eksik,
.altbilgi .eksik {
	color: #FFD9C2;
	border-color: #FFD9C2;
	background: rgba(255, 217, 194, 0.12);
}

/* --------------------------------------------------------------- tabela (üst bant) */

/* Sayfa başında tam opak lacivert; scroll başlayınca (.tabela--dolu) %85
   opağa (yarı saydam) döner. */
.tabela {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--lacivert);
	color: var(--beyaz);
	border-bottom: 2px solid transparent;
}
.tabela--gecisli {
	transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
.tabela--dolu {
	background: rgba(0, 55, 129, 0.85);
	border-bottom-color: var(--sampanya);
}
/* Üstte acente ismi, altında kategori listesi + buton — tamamı ortalı. */
.tabela__ic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding-block: 0.9rem;
	text-align: center;
}

/* Kategori listesi — .menu'nün eski nav görünümü, ama link değil: sadece
   Kategoriler artık #urunler bölümüne inen bağlantılar (owner 28.08.2026). */
.tabela__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 0;
}
.tabela__nav a {
	font-size: 1.125rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	text-decoration: none;
}
.tabela__nav a:hover,
.tabela__nav a:focus-visible { color: var(--beyaz); text-decoration: underline; text-underline-offset: 4px; }
.tabela__nav a:not(:last-of-type)::after {
	content: "·";
	margin-inline: 0.85rem;
	color: var(--sampanya);
	/* Ayraç hover'da alta çizgi almasın. */
	display: inline-block;
	text-decoration: none;
}

.tabela__ic .dugme--kucuk { align-self: flex-end; }

/* Görsel logo yok artık — bu isim tabelanın wordmark'ı, gövde metni değil:
   büyük ve belirgin kalsın. */
.tabela__ad {
	font-family: var(--baslik);
	font-size: 2.25rem;
	line-height: 1.15;
}

.acente { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: inherit; flex: none; }
.acente__ad {
	font-family: var(--baslik);
	font-size: 1.125rem;
	line-height: 1.15;
}
.acente__unvan {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sampanya);
}
.altbilgi .acente { color: var(--beyaz); }

/* Allianz logosu artık yalnız alt bilgide; zeminin rengini devralır (currentColor). */
.allianz { height: 28px; width: auto; flex: none; }
@media (max-width: 599px) { .allianz { height: 22px; } }

/* 430px altında üst banttaki CTA gizlenir: sabit alt bar (.ara-bar) aynı işi
   görüyor, yan yana sığmayınca bant taşıyordu. Acente ismi marka gereği kalır. */
@media (max-width: 430px) {
	.tabela__ic .dugme--kucuk:not(.tabela__iletisim) { display: none; }
}

/* Mobilde tabeladaki düğme "Bize Ulaşın"a döner ve Beni Ara formuna iner;
   masaüstünde bu düğme yok, "Beni Arayın" kalır (owner 31.08.2026). */
.tabela__iletisim { display: none; }
@media (max-width: 767px) {
	.tabela__ic .dugme--kucuk:not(.tabela__iletisim) { display: none; }
	/* Mobil tabela iki satırlık isim + düğme yüzünden ~175px: html'deki 88px'lik
	   scroll-padding yetmiyordu, form kartının "Beni Arayın" başlığı bandın
	   altında kalıyordu (owner 31.08.2026). Fark burada tamamlanıyor. */
	#beni-ara { scroll-margin-top: 100px; }
	/* Acente isminin altında ortalı — sağa yaslı hali tabelayı dengesiz bırakıyordu. */
	/* Seçici .tabela__ic ile: yukarıdaki `.tabela__ic .dugme--kucuk { align-self:
	   flex-end }` kuralını geçmek için aynı özgüllük gerekiyor. */
	.tabela__ic .tabela__iletisim { display: inline-flex; align-self: center; }
}

@media (max-width: 560px) {
	.tabela__ic { gap: 0.6rem; padding-block: 0.7rem; }
	.allianz { height: 18px; }
	.dugme--kucuk { padding: 0.5rem 0.85rem; white-space: nowrap; }
}

/* Mobilde kategori şeridi (Sağlık/Hayat/Emeklilik/Elementer) gizli — link
   değiller, dar ekranda iki satıra kırılıp bandı şişiriyordu (owner 27.08.2026). */
@media (max-width: 767px) {
	.tabela__nav { display: none; }
}

/* --------------------------------------------------------------- hero */

.hero {
	background: var(--beyaz);
}

.hero__duzen {
	display: grid;
	align-items: center;
	max-width: var(--tuval);
	margin-inline: auto;
}
/* Foto artık .ic dışında, .hero'nun direkt çocuğu — sağ kenara kadar
   taşıyor (kenar/ic padding'i yalnız metin sütununda kalıyor). Grid gap
   YOK: gap, metin tarafının arka planıyla görsel birleşip foto kenarını
   section'lar arası kaydırıyordu (foto her section'da farklı tarafta).
   Boşluk bunun yerine metin sütununun iç padding'inde — foto kenarı
   böylece her zaman tam %50'de sabit kalıyor. */
.hero__metin {
	padding-block: clamp(40px, 5vw + 2vh, 90px);
	padding-inline-start: clamp(4rem, 12vw, 10rem);
	padding-inline-end: clamp(2rem, 4vw, 3.5rem);
}
/* aspect-ratio:3/4 kolonun tam genişliğini doldurmuyor (sağda beyazlık
   bırakıyordu); hero'da foto stretch edilen grid hücresini birebir dolduruyor.
   margin:auto YALNIZ yatayda ortalar — dikeyde de auto olunca kolon fotoğraftan
   uzun kaldığında (kısa ekran/pencere) boşluk üstte VE altta bölünüyor, foto
   "havada" görünüyordu. Alta sabitlendi: kişi her ekranda zemine basıyor.
   ASIL KÖK NEDEN (27.08.2026): grid satırının yüksekliği foto belirliyor
   (aspect-ratio + genişlik yüzdesi), metin ise sabit — geniş ekranda (1920px+)
   foto yüzdeyle büyümeye devam ederken metin doğal yüksekliğinde sabit
   kalıyor, satır fotoya göre şişip metnin altında/fotonun üstünde dev boşluk
   açıyordu (foto kendi kutusunu her zaman dolduruyor, sorun hep metinde
   görünmez kalıyordu — arka plan rengiyle aynı olduğu yerde fark edilmiyordu).
   width min() ile 1440px'teki değerde tavanlanıyor: o genişliğe kadar hiçbir
   şey değişmiyor, ondan sonra foto büyümeyi bırakıyor, boşluk çığ gibi
   büyümüyor. */
.hero .portre--tam { width: min(50%, 360px); height: auto; aspect-ratio: 2 / 3; margin-inline: auto; margin-block: auto 0; }
.hero .portre--tam img { object-position: center 70%; }
/* Foto sütunu metinle yarı yarıya, bölüm boyunca tavan-tabana dayanıyor
   (referans: drsarahraeandreski.com hero — kropsuz değil, geniş kolonda
   object-fit:cover). */
@media (min-width: 940px) {
	.hero__duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
	/* Foto sağ kenara SABİT mesafede — metnin dış çerçevesiyle aynı clamp.
	   Ortalama (auto/auto) bu boşluğu kolon oranından türetiyordu: her bölümde
	   farklı çıkıyordu (hero 180px, Hakkımda 49px — owner bulgusu 27.08.2026).
	   Artık üç bölümün fotoğrafı da sayfanın 160px'lik çerçevesine oturuyor. */
	.hero .portre--tam { margin-inline: auto clamp(4rem, 12vw, 10rem); }
}
/* Başlık genişliğe göre değil ekran yüksekliğine göre de küçülsün —
   kısa (dizüstü) ekranlarda hero, geniş masaüstü ekranlarla aynı oranda
   dursun; sadece vw ile büyüyen font kısa ekranda gövdeyi taşırıyordu. */
.hero__metin h1 { font-family: var(--govde); font-size: 1.75rem; max-width: 30ch; text-wrap: balance; }
.hero__alt {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	max-width: 52ch;
	font-size: 1.125rem;
	color: var(--metin);
}
/* 404 sayfasının iki butonu için (hero.php artık bu class'ı kullanmıyor). */
.hero__eylem { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Filiz Küntaş Sigorta ismi artık burada değil, hero__alt'ın altında ayrı
   paragraf. Bu blok yalnız Allianz logosu + iki yetkilendirme satırı. */
.hero__marka-ad {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	font-family: var(--baslik);
	font-size: 1.125rem;
	color: var(--lacivert);
}
.hero__marka {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	align-items: center;
	gap: 1rem 1.25rem;
}
.hero__marka .allianz { height: 36px; color: var(--lacivert); flex: none; }
/* Mobil: logo ile unvanlar yan yana sıkışıp unvanları kelime kelime kırıyordu —
   alt alta geçiyor (owner 27.08.2026). Masaüstü yan yana kalır. */
@media (max-width: 767px) {
	.hero__marka { flex-direction: column; align-items: flex-start; }
}
/* İki kolonlu düzen 940px'te başlıyor; 768-939 arası (tablet) da tek kolon
   akıyor ama mobil kuralları almıyordu — foto boyu ve akış sırası mobildekiyle
   aynı olsun diye sınır 939'a çekildi (owner 01.09.2026). */
@media (max-width: 939px) {
	/* Foto mobilde %30 büyütüldü: %50 → %65 (owner 27.08.2026). */
	.hero .portre--tam { width: min(65%, 360px); }
}
.hero__unvanlar { display: grid; gap: 0.15rem; }
.hero__unvanlar li { font-size: 1.125rem; color: var(--lacivert); }
/* nowrap yalnız masaüstünde: mobilde uzun unvan satırı (ör. "Allianz Yaşam ve
   Emeklilik A.Ş Yetkili Acentesi") sarmayınca sayfa yatayda taşıyordu. */
@media (min-width: 940px) {
	.hero__unvanlar li { white-space: nowrap; }
}

/* 404: hero'nun sade hali. */
.hata404 { min-height: 52vh; display: grid; align-items: center; }

/* --------------------------------------------------------------- hakkımda */

.portre {
	margin: 0;
	aspect-ratio: 3 / 4;
	display: grid;
	place-items: center;
	text-align: center;
	overflow: hidden;
}
/* İç boşluk yalnız fotoğraf gelmediğinde, uyarı kutusu için. */
.portre .eksik { margin: 1.25rem; }
.portre img { width: 100%; height: 100%; object-fit: cover; }
/* Allianz'ın Gücü bandı — hero'daki gibi foto sol kenara kadar taşıyor,
   dikey boşluk (hero'yla aynı vh'lı oran) yalnız metin sütununda. */
.hakkimda__gucu {
	display: grid;
	align-items: center;
	max-width: var(--tuval);
	margin-inline: auto;
}
.hakkimda__metin { padding-block: clamp(64px, 9vw + 4vh, 140px); }
/* Foto solda olduğu için boşluk metnin sol iç kenarında (grid gap değil —
   hero'da öğrenilen ders: gap, section arası foto kenarını kaydırıyordu).
   Hero'daki asimetrik desen: foto YAKIN kenar küçük boşluk, DIŞ kenar geniş
   boşluk (owner talebi 27.08.2026). Üstteki boşluk daha da daraltıldı (96px
   tavan yerine 56px) — foto bottom-pinned olduğundan üst boşluk buna bağlı. */
#hakkimda .hakkimda__metin {
	padding-block: clamp(24px, 3vw + 1.5vh, 56px);
	padding-inline-start: clamp(2rem, 4vw, 3.5rem);
	padding-inline-end: clamp(4rem, 12vw, 10rem);
}
/* margin-block: auto 0 — foto alta sabit, kolon uzun kaldığında havada kalmasın. */
#hakkimda .portre--tam { width: min(50%, 302px); height: auto; aspect-ratio: 2 / 3; margin-inline: auto; margin-block: auto 0; }
/* Mobil: foto metnin ALTINA iner (markup'ta önce geliyor, masaüstü sol kolon
   için) ve hero'daki mobil foto ölçüsüyle birebir aynı olur (owner 27.08.2026). */
@media (max-width: 939px) {
	#hakkimda .portre--tam { order: 1; width: min(65%, 360px); }
}
@media (min-width: 940px) {
	/* Metin kolonu fotoğraftan daha geniş (owner talebi 27.08.2026: maddeler
	   tek satıra sığsın diye kademeli genişletildi, 50/50 → 42/58 → 35/65 —
	   madde fontu sabit 18px olduğundan en uzun madde HER genişlikte 639px
	   istiyor; 1280px laptopta bunun sığması için kolon %65 + iç boşluk 2rem
	   gerekiyor. Dış 160px çerçevesi değişmedi. */
	.hakkimda__gucu { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); align-items: stretch; }
	/* align-content: center — kolon yüksekliğini foto belirliyor, metin içerik
	   yüksekliğinden uzun kalan alanı üst/alta EŞİT dağıtır (owner 27.08.2026:
	   "üstteki boşluk ile alttaki aynı olsun"; içerik üste yapışıp altta boşluk
	   bırakıyordu). */
	#hakkimda .hakkimda__metin { padding-inline-start: 2rem; display: grid; align-content: center; }
	/* Grid'de h2'nin alt margin'i ile ul'nin üst margin'i birleşmez (collapse
	   yok) — üst margin sıfırlanıp akıştaki 1.5rem aralık korunuyor. */
	#hakkimda .hakkimda__maddeler { margin-top: 0; }
	/* Foto SOL kenara sabit mesafede (160px çerçevesi) — ortalama da denendi,
	   owner iki denemeden sonra bu haline döndü (27.08.2026).
	   width sabit 302px: kolon 35'e daralınca %50 payı fotoğrafı küçültüyordu;
	   calc emniyeti dar kolonda çerçeveden taviz vermeden sığdırır. */
	#hakkimda .portre--tam { width: min(302px, calc(100% - clamp(4rem, 12vw, 10rem))); margin-inline: clamp(4rem, 12vw, 10rem) auto; }
}

/* Yuvarlak yakın çekim — .portre--yatay'ın yerini alır (Task 1'de silinmedi, burada siliniyor). */
.portre--yuvarlak { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 260px; }

.hakkimda__metin p + p { margin-top: 1.1rem; }
.hakkimda__metin h2 { margin-bottom: 1.5rem; max-width: 20ch; }
.hakkimda__metin p { max-width: 85ch; }

.hakkimda__maddeler { display: grid; gap: 0.85rem; margin-top: 1.5rem; }
.hakkimda__maddeler li {
	position: relative;
	padding-inline-start: 1.35rem;
	font-size: 1.125rem;
	line-height: 1.5;
}
.hakkimda__maddeler li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.6em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--lacivert);
}

#hakkimda .hakkimda__metin h2 { font-family: var(--govde); font-weight: 600; font-size: 1.75rem; color: var(--beyaz); max-width: none; }
#hakkimda .hakkimda__maddeler li { font-family: var(--govde); font-weight: 600; font-size: 1.125rem; color: var(--beyaz); }
#hakkimda .hakkimda__maddeler li::before { background: var(--beyaz); }
/* Başlık kısa, tek satıra masaüstünde güvenle sığar. Madde metinleri UZUN
   cümleler — nowrap onlarda 1024-1280px gibi yaygın laptop genişliklerinde
   sağ kenardan kesiliyordu (kolon %50'ye düşünce cümle sığmıyor). Maddeler
   doğal sarsın: hiçbir genişlikte kesilmeyen tek düzen bu. */
@media (min-width: 940px) {
	#hakkimda .hakkimda__metin h2 { white-space: nowrap; }
}

/* Hakkımda bandı — Allianz'ın Gücü bandıyla aynı desen, foto sağda: tam
   kanama, dikey boşluk metin sütununda, gap yok (foto kenarı gap sağdaki
   fotoda sola kayardı; boşluk yerine metnin sağ iç kenarında). */
.hakkimda__detay {
	position: relative;
	display: grid;
	align-items: center;
	max-width: var(--tuval);
	margin-inline: auto;
}
/* Hero'daki asimetrik desen burada da: foto sağda, yakın kenar (sağ) küçük
   boşluk, dış kenar (sol) geniş boşluk (owner talebi 27.08.2026). */
.hakkimda__detay .hakkimda__metin {
	align-self: start;
	padding-block: clamp(20px, 2.5vw + 1vh, 40px);
	padding-inline-start: clamp(4rem, 12vw, 10rem);
	padding-inline-end: clamp(2rem, 4vw, 3.5rem);
}
/* width min() — hero'daki gibi 1440px'teki değerde tavanlı (bkz. hero'daki
   uzun kök-neden notu, 27.08.2026). Üçüncü terim emniyet: kolon, foto + sabit
   sağ boşluğa dar gelirse foto küçülür, boşluk asla 160px çerçevesinden taviz
   vermez (margin sığmayınca auto 0'a düşüp boşluğu sessizce yutuyordu). */
#hakkimda-detay .portre--tam { width: min(80%, 392px, calc(100% - clamp(4rem, 12vw, 10rem))); height: auto; aspect-ratio: 2 / 3; margin-inline: auto; margin-block: auto 0; }
/* Mobil: hero'daki mobil foto ölçüsüyle birebir aynı (owner 27.08.2026).
   Foto markup'ta zaten metinden sonra — sıra değişikliği gerekmez. */
@media (max-width: 939px) {
	#hakkimda-detay .portre--tam { width: min(65%, 360px); }
}
@media (min-width: 940px) {
	/* 66/34 → 61/39: %34 kolon 392px foto + 160px kenar boşluğuna dar geliyordu. */
	.hakkimda__detay { grid-template-columns: minmax(0, 61fr) minmax(0, 39fr); align-items: stretch; }
	/* Foto sağ kenara sabit mesafede — hero'yla aynı clamp (bkz. hero'daki not). */
	#hakkimda-detay .portre--tam { margin-inline: auto clamp(4rem, 12vw, 10rem); }
}

/* Mobil kenar boşlukları: üç çift-sütunlu bandın metni de iletişim bölümüyle
   aynı sağ-sol mesafeyi (var(--kenar)) kullanır — masaüstündeki 160px'lik
   çerçeve dar ekranda satırları gereksiz sıkıştırıyordu. Aynı blokta metin ile
   fotoğraf arasındaki boşluk da kısaltıldı (owner 31.08.2026).
   Sınır 939: tek kolona düşen her ekran (tablet dahil) aynı akışı alır
   (owner 01.09.2026). */
@media (max-width: 939px) {
	.hero__metin,
	#hakkimda .hakkimda__metin,
	.hakkimda__detay .hakkimda__metin { padding-inline: var(--kenar); }

	.hero__metin { padding-block: 40px 4px; }
	#hakkimda .hakkimda__metin { padding-block: 24px 4px; }
	.hakkimda__detay .hakkimda__metin { padding-block: 20px 4px; }
}

#hakkimda-detay .hakkimda__metin h2 { font-size: 1.75rem; }
#urunler .bolum-basligi h2 { font-size: 1.75rem; }
#iletisim .bolum-basligi h2 { font-size: 1.75rem; }

/* --------------------------------------------------------------- ürünler (bento) */

.bento { display: grid; gap: clamp(0.85rem, 1.6vw, 1.35rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(6, 1fr); } }

/* Beyaz kart + gri kenarlık + köşede dekoratif üçgen — referans mockup'ın kart
   dili. Bölüm zemini lacivert kalır, kartlar üzerinde beyaz "fiş" gibi durur. */
.bento__kart {
	position: relative;
	min-width: 0;
	min-height: 374px;
	background: var(--beyaz);
	border: 1px solid #D9DCE1;
	border-radius: 10px;
}

/* Köşedeki dekoratif üçgen. 10px inset = border-radius: köşenin kavisine
   hiç değmiyor. Kartlar arasında 3 ton dönüyor — turuncu yok, o yalnız
   aksiyon rengi. */
.bento__kart::after {
	content: "";
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	pointer-events: none;
}
.bento__kart:nth-child(3n+1)::after { background: var(--lacivert); }
.bento__kart:nth-child(3n+2)::after { background: var(--sampanya); }
.bento__kart:nth-child(3n)::after { background: #D9DCE1; }

/* Başlık artık <button> (mobil akordeon) — masaüstünde görünüm değişmesin diye
   buton varsayılanları sıfırlanıyor, tıklama hissi verilmiyor. */
.bento__baslik {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 64px;
	padding: 1.1rem 0.75rem;
	width: 100%;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: start;
	cursor: default;
}

/* Artı işareti ve kapalı başlangıç yalnız mobilde; masaüstünde kartlar açık. */
.bento__arti { display: none; }
@media (max-width: 767px) {
	.bento__kart { min-height: 0; }
	/* Artı, kartın sağ kenarına değil başlığın hemen sağına oturur: sağ alt
	   köşedeki dekoratif üçgenle çakışıyordu (owner 31.08.2026). */
	.bento__baslik { cursor: pointer; gap: 0.6rem; }
	.bento__arti { display: block; position: relative; flex: none; width: 16px; height: 16px; }
	.bento__arti::before,
	.bento__arti::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		top: 50%;
		margin-top: -1px;
		height: 2px;
		background: var(--lacivert);
	}
	/* Açıkken dikey çizgi yatayla çakışır: artı → eksi. */
	.bento__arti::after { transform: rotate(90deg); transition: transform 180ms ease; }
	.bento__kart[data-acik="true"] .bento__arti::after { transform: none; }
	.bento__kart:not([data-acik="true"]) .bento__icerik { display: none; }
}

.bento__ad {
	color: var(--lacivert);
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.bento__liste { display: grid; gap: 0.5rem; padding: 0 1rem 1.1rem; }
.bento__liste li {
	position: relative;
	padding-inline-start: 1rem;
	font-size: 1.125rem;
	line-height: 1.45;
	color: rgba(0, 55, 129, 0.85);
}
.bento__liste li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.7em;
	width: 6px; height: 1px;
	background: var(--lacivert);
}
.bento__liste small { display: block; color: rgba(0, 55, 129, 0.55); font-size: 1.125rem; }

/* --------------------------------------------------------------- yorumlar */

.yorumlar { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 860px) { .yorumlar { grid-template-columns: repeat(3, 1fr); } }
#yorumlar .bolum-basligi h2 { color: var(--beyaz); }

.yorum {
	background: var(--beyaz);
	border: 1px solid rgba(0, 55, 129, 0.15);
	border-radius: 10px;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	min-height: 260px;
	display: grid;
	align-content: center;
	gap: 1rem;
	color: var(--lacivert);
}
.yorum--bos { border-style: dashed; justify-items: center; text-align: center; }
.yorum blockquote { margin: 0; font-size: 1.125rem; line-height: 1.6; }
.yorum figcaption { font-weight: 600; font-size: 1.125rem; }

/* --------------------------------------------------------------- form kartı */

/* Form iletişim bölümünün içinde lacivert kart olarak durur. */
.form-kart {
	background: var(--lacivert);
	color: rgba(255, 255, 255, 0.88);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: 4px;
	align-self: start;
}
.form-kart__baslik {
	color: var(--beyaz);
	font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Gönder butonu sağa yaslı, header'daki "Beni Arayın" ile aynı boy/stil
   (dugme--kucuk sınıfı markup'ta — owner talebi 27.08.2026). */
.form-kart form .dugme { display: flex; width: fit-content; margin-inline-start: auto; }

.alan { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.alan label {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--beyaz);
}
.alan input {
	min-height: 52px;
	padding: 0.85rem 1rem;
	font-family: var(--govde);
	font-size: 1.125rem;
	color: var(--beyaz);
	background: rgba(0, 20, 50, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 4px;
}
.alan input:focus { outline: 3px solid var(--turuncu); outline-offset: 1px; border-color: transparent; }

/* align-items: start — KVKK metni artık uzun (birkaç satır), kutucuk
   ortalanmak yerine ilk satıra hizalı üstte dursun. */
.riza { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; margin-bottom: 1.5rem; }
.riza input { width: 24px; height: 24px; margin-top: 0.15rem; accent-color: var(--turuncu); }
.riza label { display: inline-block; min-height: 44px; cursor: pointer; }

.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-bildirim:not(.bildirim) { display: none; }
/* Bildirim artık formun ALTINDA (gönder butonundan sonra) — üstte kalınca
   ziyaretçi "gitti mi?" diye kaydırıp yukarı bakmak zorunda kalıyordu. */
.bildirim {
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 4px;
	font-weight: 600;
}
.bildirim--ok { background: rgba(214, 194, 148, 0.25); border: 1px solid var(--sampanya); color: var(--beyaz); }
.bildirim--hata { background: rgba(255, 217, 194, 0.15); border: 1px solid #FFD9C2; color: #FFE2D2; }

/* Hata kodu: ziyaretçiyi meşgul etmeyecek kadar küçük, ekran görüntüsünde okunacak
   kadar net. Teşhis amaçlı (27.08.2026) — form sorunu kapanınca kaldırılabilir. */
.bildirim__kod {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.75rem;
	font-weight: 400;
	opacity: 0.75;
}

.cikis__kart .bildirim--ok { background: rgba(0, 55, 129, 0.1); border-color: var(--lacivert); color: var(--lacivert); }
.cikis__kart .bildirim--hata { background: rgba(201, 79, 8, 0.12); border-color: var(--turuncu-koyu); color: var(--turuncu-koyu); }

/* --------------------------------------------------------------- iletişim */

/* Oran fotoğraf dosyasının kendi ölçüsüyle (798x548) birebir eşleşiyor — kutu
   yüksekliği gerçekten %10 azalsın diye (yalnız kaynağı kırpmak kutuyu
   küçültmez, object-fit:cover kutuyu her zaman doldurur). */
.iletisim__foto { aspect-ratio: 798 / 548; margin: 0 0 clamp(1.5rem, 3vw, 2rem); }

/* Telefon/e-posta/saatler "·" ile ayrık — flex DEĞİL: flex çocukları blocklaştırıp
   (blockification) her öğeyi ayrı satıra iterdi. Span'lar varsayılan inline akışta
   kalınca kolon genişliği neye yetiyorsa o kadarı yan yana sığıyor, kalanı doğal
   satır sarmasıyla alta düşüyor — B-011 dersiyle aynı (nowrap öğede, taşma yok). */
.iletisim__tekhat span { white-space: nowrap; line-height: 1.6; }
.iletisim__tekhat span:not(:last-child)::after { content: "·"; margin-inline: 0.85rem; color: var(--lacivert); }

.iletisim__duzen { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .iletisim__duzen { grid-template-columns: 1fr minmax(360px, 0.85fr); } }

/* İki turda toplam ~%44 azaltıldı (owner talebi 27.08.2026): clamp(1.25rem,2.5vw,1.75rem) idi. */
.iletisim__blok { margin-top: clamp(0.7rem, 1.4vw, 0.98rem); }
.iletisim__blok p + p { margin-top: 0.2rem; }
.iletisim__unvan { font-family: var(--govde); font-weight: 700; font-size: 1.125rem; color: var(--lacivert); line-height: 1.3; }

/* --------------------------------------------------------------- alt bilgi */

.altbilgi { background: var(--lacivert); color: rgba(255, 255, 255, 0.75); padding-block: clamp(2.75rem, 5.5vw, 4rem) clamp(1.5rem, 3vw, 2rem); border-top: 2px solid var(--sampanya); }
.altbilgi__ust { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding-bottom: clamp(1.75rem, 3.5vw, 2.25rem); border-bottom: 1px solid rgba(214, 194, 148, 0.35); }
.altbilgi .acente__ad { font-size: 1.125rem; }
.altbilgi .allianz { height: 34px; color: var(--beyaz); }

.altbilgi__alt { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: 1.125rem; }
.sosyal { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sosyal a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: var(--beyaz);
	text-decoration: none;
	transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.sosyal a .ikon { width: 20px; height: 20px; }
.sosyal a:hover {
	border-color: var(--sampanya);
	background: rgba(255, 255, 255, 0.08);
	color: var(--sampanya);
}
@media (prefers-reduced-motion: reduce) { .sosyal a { transition: none; } }

/* --------------------------------------------------------------- tıkla ara */

.ara-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 45;
	padding: 0.55rem;
	background: var(--lacivert-koyu);
	border-top: 1px solid var(--sampanya);
}
.ara-bar .dugme { width: 100%; }
/* Yazı yerine ikon: düğmede yalnız telefon işareti + numara (owner 31.08.2026). */
.ara-bar .dugme .ikon { width: 22px; height: 22px; flex: none; }
@media (min-width: 800px) { .ara-bar { display: none; } }
@media (max-width: 799px) { body { padding-bottom: 76px; } }

/* --------------------------------------------------------------- çıkış pop-up */

.cikis {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgba(0, 43, 102, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 200ms;
}
.cikis[data-acik="true"] { opacity: 1; visibility: visible; }

.cikis__kart {
	position: relative;
	width: min(520px, 100%);
	background: var(--sampanya);
	color: var(--beyaz);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-radius: 4px;
	box-shadow: 0 30px 70px -25px rgba(0, 43, 102, 0.6);
}
.cikis__kart h2 {
	color: var(--beyaz);
	font-family: var(--govde);
	font-weight: 600;
	font-size: 1.5rem;
	white-space: nowrap;
	margin-bottom: 0.75rem;
}
.cikis__kart p { color: var(--beyaz); font-family: var(--govde); font-weight: 600; font-size: 1.125rem; }
.cikis__kart .riza label { color: var(--beyaz); font-family: var(--govde); font-weight: 600; font-size: 1.125rem; }

/* Onay kutuları eklendiğince telefon+buton yan yana düzeni (eski 1fr auto)
   kalktı: buton artık kutuların altında, tek sütun aşağı akıyor. */
.cikis__form { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.cikis__form input {
	min-height: 52px;
	padding: 0.85rem 1rem;
	font-family: var(--govde);
	font-size: 1.125rem;
	color: var(--lacivert);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 55, 129, 0.35);
	border-radius: 4px;
}
.cikis__form input::placeholder { color: rgba(0, 55, 129, 0.6); }
/* .riza'nın kendi margin-bottom'u grid gap'iyle çakışıp boşluğu iki katına
   çıkarmasın diye burada sıfırlanıyor — aralık yalnız grid gap'ten gelsin. */
.cikis__form .riza { margin-bottom: 0; }

.cikis__kapat {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 0.75rem;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 55, 129, 0.3);
	border-radius: 4px;
	color: var(--lacivert);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.cikis__kapat:hover { background: rgba(255, 255, 255, 0.85); }

/* Mobil: pop-up ekrandan taşıyordu (başlık nowrap çarpının altına giriyor,
   KVKK metni + buton ekran dışına taşıyordu — owner 27.08.2026). Kart ekrana
   sığar, sığmazsa kendi içinde kayar; yazılar bir kademe küçük. Masaüstü
   bu bloğun dışında, değişmedi. */
@media (max-width: 767px) {
	.cikis { padding: 1rem; }
	.cikis__kart {
		padding: 1.25rem;
		max-height: calc(100dvh - 2rem);
		overflow-y: auto;
	}
	.cikis__kart h2 {
		white-space: normal;
		font-size: 1.25rem;
		/* Çarpı butonunun altına girmesin. */
		padding-inline-end: 3rem;
	}
	.cikis__kart p,
	.cikis__kart .riza label { font-size: 1rem; font-weight: 500; }
	.cikis__form { margin-top: 1rem; }
	.cikis__form input { min-height: 48px; font-size: 1rem; }
}

/* --------------------------------------------------------------- hukuk metni pop-up */

.hukuk {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	background: rgba(0, 43, 102, 0.6);
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms ease, visibility 200ms;
}
.hukuk[data-acik="true"] { opacity: 1; visibility: visible; }

.hukuk__kart {
	position: relative;
	width: min(720px, 100%);
	max-height: min(80vh, 800px);
	overflow-y: auto;
	background: var(--beyaz);
	color: var(--metin);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border-radius: 4px;
	box-shadow: 0 30px 70px -25px rgba(0, 43, 102, 0.6);
}
.hukuk__govde h2 { color: var(--lacivert); font-size: 1.5rem; margin-bottom: 1rem; }
.hukuk__govde h3 { color: var(--lacivert); font-size: 1.2rem; margin: 2rem 0 0.85rem; }
.hukuk__govde p { margin-bottom: 0.85rem; line-height: 1.55; }
.hukuk__govde p:last-child { margin-bottom: 0; }

.hukuk__kapat {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 0.75rem;
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	background: var(--kirik);
	border: 1px solid rgba(0, 55, 129, 0.2);
	border-radius: 4px;
	color: var(--lacivert);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.hukuk__kapat:hover { background: #F0ECE3; }

/* Onay kutusu etiketindeki üç belge linki (Aydınlatma Metni, sözleşme, gizlilik) — <button>, gezinme yok. */
.hukuk-ac {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--turuncu-koyu);
	text-decoration: underline;
	cursor: pointer;
}

/* --------------------------------------------------------------- hareket */

/* Gizleme yalnız JS varken uygulanır: script yüklenmezse içerik görünür kalır. */
.js .gorun { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
.js .gorun.acik { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.js .gorun { opacity: 1; transform: none; }
}