/* ==========================================================================
   Ferrini Bayi Portalı — açık / gri tema
    1. Tokenlar          8. Yazı listeleri      15. Etiketler
    2. Temel             9. Yazı detayı         16. Yazı gezinmesi
    3. Üst menü         10. Doküman kütüphanesi 17. Ürün grupları
    4. Kahraman alanı   11. Formlar             18. Dip
    5. Sayfa bölümleri  12. Yönetim             19. Duyarlılık
    6. Ana sayfa        13. Kimlik sayfaları    20. Yazdırma
    7. Talep formu      14. Teşekkür
   ========================================================================== */

/* ---- 1. Tokenlar -------------------------------------------------------- */
:root {
	/* Yüzeyler — açıktan koyuya */
	--bg: #f5f5f3;
	--surface: #ffffff;
	--surface-2: #efefec;
	--surface-3: #e4e4e0;

	/* Metin */
	--ink: #1e2225;
	--ink-muted: #5d6367;
	--ink-faint: #8d9295;

	/* Çizgiler */
	--line: #e3e2de;
	--line-strong: #cbcac5;

	/* Vurgu — yalnızca etkileşim ve işaretleme için */
	--accent: #2e448d;
	--accent-ink: #22336b;
	--accent-soft: #edf0f8;
	--sun: #a2713a;
	--sun-soft: #f6efe6;

	/* Durum */
	--ok: #2a6b4a;
	--ok-soft: #e8f2ec;
	--warn: #8d5a1c;
	--warn-soft: #f9f1e4;
	--danger: #9c3535;
	--danger-soft: #f8eaea;
	--video: #6f4183;

	--font-body: "Montserrat", "Segoe UI", Arial, sans-serif;
	--font-head: "Marcellus", Georgia, "Times New Roman", serif;
	--kap: 1280px;
	--yan: 40px;
	--golge: 0 1px 2px rgba(30,34,37,0.04), 0 10px 28px rgba(30,34,37,0.06);
	--golge-ust: 0 1px 0 rgba(30,34,37,0.05);
	--gecis: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- 2. Temel ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.16; margin: 0 0 10px; color: var(--ink); text-wrap: balance; }
h1 { font-size: 34px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }

.atla {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--ink); color: #fff; padding: 12px 20px; text-decoration: none; font-size: 13px;
}
.atla:focus { left: 0; }

/* Gorsel olarak gizli, ekran okuyucuya acik. Ana sayfanin h1'i gibi
   sayfada gosterilmeyen ama var olmasi gereken basliklar icin. */
.yalniz-okuyucu {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 var(--yan); }
.kap-dar { max-width: 840px; }
.kap-flash { padding-top: 24px; }

.icerik { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 36px 64px; }
.icerik-tam { max-width: none; padding: 0; }
.dar { max-width: 560px; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	padding: 0 24px;
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	border-radius: 3px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
	transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.btn-ikincil { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ikincil:hover { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }

/* Açık zeminde öne çıkan koyu buton */
.btn-acik { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-acik:hover { background: #30363a; border-color: #30363a; color: #fff; }

/* Açık zeminde çerçeveli ikincil buton */
.btn-hayalet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-hayalet:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }

.btn-tehlike { background: var(--surface); color: var(--danger); border-color: #e3c6c6; }
.btn-tehlike:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-kucuk { height: 34px; padding: 0 15px; font-size: 12.5px; }
.btn-genis { width: 100%; height: 48px; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, .menu-basi:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.uyari { border-radius: 4px; padding: 13px 18px; margin-bottom: 20px; border: 1px solid transparent; font-size: 13.5px; }
.uyari ul { margin: 0; padding-left: 18px; }
.uyari-basari { background: var(--ok-soft); color: var(--ok); border-color: #cae0d4; }
.uyari-uyari { background: var(--warn-soft); color: var(--warn); border-color: #ead8b8; }
.uyari-hata { background: var(--danger-soft); color: var(--danger); border-color: #e8c5c5; }

.rozet {
	align-self: flex-start;
	display: inline-block;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--accent);
	background: var(--accent-soft);
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--font-body);
}
.rozet-sun { color: var(--sun); background: var(--sun-soft); }
.soluk { color: var(--ink-faint); }

/* ---- 3. Üst menü -------------------------------------------------------- */
.ust {
	background: var(--surface);
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: var(--golge-ust);
}
.ust-ic {
	max-width: var(--kap);
	margin: 0 auto;
	padding: 0 var(--yan);
	height: 74px;
	display: flex;
	align-items: center;
	gap: 40px;
}
.ust-yonetim {
	position: static;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 36px;
	box-shadow: none;
}
.logo { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
/* max-width: logo ferrini.com'dan (dis alan adi) yukleniyor. Gorsel
   gelmezse tarayici <img width="500"> niteligine duser; 500px'lik kutu
   dar ekranda basligi ve dolayisiyla sayfayi yatay kaydiriyordu. */
/* Logo dosyasi cok acik gri (neredeyse beyaz) ve baslik da beyaz zeminde:
   markanin kendisi gorunmuyordu. Arkasina tema mavisi bir plaka konur.

   box-sizing: content-box sart — global "* { box-sizing: border-box }" yuzunden
   padding, 26px'lik yuksekligin ICINDEN yenir ve logo kuculurdu.

   max-width: logo ferrini.com'dan (dis alan adi) yukleniyor. Gorsel gelmezse
   tarayici <img width="500"> niteligine duser; 500px'lik kutu dar ekranda
   basligi ve dolayisiyla sayfayi yatay kaydiriyordu. */
.logo img {
	height: 26px;
	width: auto;
	max-width: 150px;
	box-sizing: content-box;
	background: var(--accent);
	padding: 7px 13px;
	border-radius: 3px;
}
.logo span {
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 600;
	border-left: 1px solid var(--line-strong);
	padding-left: 14px;
}

.menu-kutu { position: absolute; opacity: 0; pointer-events: none; }
.menu-dugme { display: none; }

.menu-alani { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: space-between; }
.ana-menu { display: flex; align-items: center; gap: 30px; }
.ana-menu > a, .menu-basi {
	color: var(--ink-muted);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 26px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--gecis), border-color var(--gecis);
}
.ana-menu > a:hover, .menu-basi:hover { color: var(--ink); }
.ana-menu > a.secili, .menu-basi.secili { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.menu-basi svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.nav-rozet {
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	background: var(--sun-soft);
	color: var(--sun);
	padding: 3px 6px;
	border-radius: 2px;
	line-height: 1;
}

.menu-grup { position: relative; }
.alt-menu {
	position: absolute;
	top: 100%;
	left: -22px;
	min-width: 318px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	box-shadow: var(--golge);
	padding: 10px;
	display: none;
	flex-direction: column;
}
.menu-grup:hover .alt-menu, .menu-grup:focus-within .alt-menu { display: flex; }
.alt-menu a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 14px;
	border-radius: 3px;
	text-decoration: none;
	color: var(--ink);
}
.alt-menu a:hover { background: var(--surface-2); }
.alt-menu strong { font-size: 13.5px; font-weight: 600; }
.alt-menu small { font-size: 11.5px; color: var(--ink-faint); }
.alt-menu-hepsi { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 12px; }
.alt-menu-hepsi strong { color: var(--accent); }

.ust-eylem { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.ust-eylem a { color: var(--ink-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.ust-eylem a:hover { color: var(--ink); }
.ust-eylem a.btn { color: #fff; }

/* Dil secici — <details> ile acilir, JS yok. Menu genisligi sinirda oldugu
   icin (bkz. docs/mimari.md "Ust menu kirilma noktalari") kapaliyken yalnizca
   bir ikon ve iki harflik kod kadar yer tutar. */
.dil-sec { position: relative; }
.dil-sec summary {
	display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer;
	color: var(--ink-muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
	padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
}
.dil-sec summary::-webkit-details-marker { display: none; }
.dil-sec summary:hover, .dil-sec[open] summary { color: var(--ink); border-color: var(--line-strong); }
.dil-sec summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dil-liste {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
	margin: 0; padding: 6px; list-style: none; min-width: 220px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--golge);
	display: grid; grid-template-columns: 1fr;
}
.dil-liste a {
	display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 3px;
	color: var(--ink); font-size: 13.5px; font-weight: 500;
}
.dil-liste a b { width: 22px; color: var(--ink-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; }
.dil-liste a:hover { background: var(--surface-2); color: var(--ink); }
.dil-liste a.secili { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- 4. Kahraman alanı -------------------------------------------------- */
.kahraman {
	position: relative;
	background: var(--surface-2);
	color: var(--ink);
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 540px;
	padding: 90px 0 84px;
	border-bottom: 1px solid var(--line);
}
.kahraman-kisa { min-height: 0; padding: 78px 0 70px; }
.kahraman-arka { position: absolute; inset: -14% 0; z-index: 0; will-change: transform; }
.kahraman-arka img, .kahraman-arka video { width: 100%; height: 100%; object-fit: cover; display: block; }
.kahraman-perde {
	position: absolute; inset: 0; z-index: 1;
	background:
		linear-gradient(100deg, rgba(250,250,249,0.97) 0%, rgba(250,250,249,0.88) 42%, rgba(250,250,249,0.58) 100%),
		linear-gradient(to bottom, rgba(250,250,249,0.6), rgba(250,250,249,0) 40%);
}
.kahraman > .kap { position: relative; z-index: 2; }
.kahraman-ic { max-width: 720px; }
.kahraman h1 { font-size: 54px; line-height: 1.07; margin: 14px 0 20px; letter-spacing: -0.005em; }
.kahraman-lede { color: var(--ink-muted); font-size: 17px; line-height: 1.62; max-width: 58ch; margin: 0; }

.ust-baslik {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--sun);
	margin: 0;
}
.ust-baslik::before { content: ""; width: 26px; height: 1px; background: currentColor; }

/* --- Ust menuye yapisik arama bandi -------------------------------------
   Arama kahramanin icinden buraya tasindi. <header class="ust"> zaten
   position:sticky oldugu icin bu bant da menuyle birlikte ekranda kaliyor:
   bayi sayfayi ne kadar asagi kaydirirsa kaydirsin arama hep elinin altinda.
   Solda arama, saginda dort vurgu maddesi. */
.ust-arama {
	border-top: 1px solid var(--line);
	background: var(--surface-2);
}
.ust-arama-ic {
	max-width: var(--kap);
	margin: 0 auto;
	padding: 9px var(--yan);
	display: flex;
	align-items: center;
	gap: 26px;
}
/* Kahramandaki 52px'lik kutu bir menu satirinda fazla yer kaplardi. */
.ust-arama .arama-ust {
	flex: 1 1 380px;
	max-width: 560px;
	grid-template-columns: minmax(0, 1fr) 96px;
	gap: 8px;
}
.ust-arama .arama-ust input { height: 40px; padding: 0 14px; }
.ust-arama .arama-ust .btn { height: 40px; padding: 0 14px; }

.ust-vurgu {
	list-style: none;
	margin: 0 0 0 auto;
	padding: 0;
	display: flex;
	gap: 24px;
}
.ust-vurgu li { line-height: 1.2; }
.ust-vurgu b {
	display: block;
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 15px;
	color: var(--accent);
	white-space: nowrap;
}
.ust-vurgu span {
	display: block;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-muted);
	white-space: nowrap;
}
/* Dar ekranda arama ve vurgular yan yana sigmiyor; vurgular alt sirayi alir. */
@media (max-width: 1080px) {
	.ust-arama-ic { flex-wrap: wrap; gap: 10px 18px; }
	.ust-arama .arama-ust { flex: 1 1 100%; max-width: none; }
	.ust-vurgu { margin: 0; width: 100%; justify-content: space-between; gap: 12px; }
}
/* Telefonda bant YAPISIK oldugu icin her pikseli ekrandan calar. Dugme
   aramanin yaninda kalir (alt satira duserse bant 50px daha buyuyor) ve
   vurgular tek sirada yatay kayar; sarmalarsa iki sira daha ekliyorlardi. */
@media (max-width: 560px) {
	.ust-arama-ic { padding: 8px 20px; gap: 8px; }
	.ust-arama .arama-ust { grid-template-columns: minmax(0, 1fr) 74px; gap: 6px; }
	.ust-arama .arama-ust input,
	.ust-arama .arama-ust .btn { height: 38px; padding: 0 10px; }
	.ust-vurgu {
		width: 100%;
		margin: 0;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 18px;
		scrollbar-width: none;
	}
	.ust-vurgu::-webkit-scrollbar { display: none; }
	.ust-vurgu li { flex: 0 0 auto; }
	.ust-vurgu b { font-size: 13px; }
	.ust-vurgu span { font-size: 9px; }
}

/* --- Ince kahraman bandi -------------------------------------------------
   Arama yukari tasindigi icin kahraman artik yalnizca ince bir gorsel serit:
   altindaki alti kart sayfa acilir acilmaz gorunsun diye bilerek kisa. */
.kahraman-ince {
	min-height: 0;
	padding: 30px 0 28px;
}
.kahraman-ince .kahraman-perde {
	background: linear-gradient(to bottom, rgba(250,250,249,0.60), rgba(250,250,249,0.38));
}
/* Ince kahramandan hemen sonraki bolum daha yukaridan baslar: kullanici
   "hemen altinda alti kart gorunsun" dedi, 88px'lik standart bosluk kartlari
   ekranin disina itiyordu. */
.kahraman-ince + .bolum { padding-top: 44px; }
/* Parallax tasmasi: -14% yuzde degeri bandin YUKSEKLIGINE gore hesaplandigi
   icin ince bantta yalnizca ~11px'lik pay birakiyordu; betik y*0.22 kadar
   kaydirdigi icin daha sayfa 60px inmeden serit ustte acilip bosluk
   gosteriyordu. Ince bantta pay piksel olarak sabitlenir. */
.kahraman-ince .kahraman-arka { inset: -90px 0; }

.kahraman-ic-orta { max-width: 660px; margin: 0 auto; text-align: center; }
.kahraman-ic-orta .kahraman-arama { margin: 0 auto; }
.kahraman-ic-orta .yenilik-serit { justify-content: center; margin-left: auto; margin-right: auto; }

.kahraman-arama { margin-top: 34px; max-width: 640px; }
.kahraman-arama .arama input,
.kahraman-arama .arama select { height: 58px; font-size: 15px; }
.kahraman-arama .arama .btn { height: 58px; }
.arama-ipucu { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); align-items: center; }
.arama-ipucu a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.arama-ipucu a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.kahraman-eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* "Son ziyaretinizden bu yana" — yalnızca giriş yapmış bayiye görünür */
.yenilik-serit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	max-width: 720px;
	margin-top: 30px;
	padding: 14px 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 3px;
}
.yenilik-baslik { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.02em; }
.yenilik-baslik em { font-style: normal; color: var(--ink-muted); }
.yenilik-rozetler { display: flex; flex-wrap: wrap; gap: 8px; }
.yenilik-rozet {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--accent-ink);
	background: var(--accent-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	padding: 5px 13px;
	text-decoration: none;
	white-space: nowrap;
}
.yenilik-rozet:hover { border-color: var(--accent); }

/* Sayfa başlığı bandı (liste ve detay sayfaları) */
.sayfa-basi {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	padding: 72px 0 60px;
}
.sayfa-basi h1 { font-size: 44px; margin: 14px 0 16px; }
.sayfa-basi p { color: var(--ink-muted); font-size: 16px; max-width: 62ch; margin: 0; }

/* ---- 5. Sayfa bölümleri ------------------------------------------------- */
.bolum { padding: 60px 0; }
.bolum-sik { padding: 44px 0; }
.bolum-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Eskiden koyu olan vurgu bandı — artık gri.
   Kahraman, sayfa başlığı ve çağrı bloğu da --surface-2 kullanıyor; bant da
   aynı değerde kalınca art arda geldiklerinde aralarında 1px çizgiden başka
   ayrım kalmıyordu (ana sayfada kahraman → yol haritası, yakında sayfasında
   sayfa başlığı → yol haritası). Bant bir ton daha koyu: her durumda ayrışır. */
.bolum-koyu {
	background: var(--surface-3);
	border-top: 1px solid var(--line-strong);
	border-bottom: 1px solid var(--line-strong);
	/* Bir ton koyu zeminde soluk metin de bir ton koyulaşsın; bu bantta
	   okunurluk eski haline göre düşmek yerine artar (2,73:1 → 3,09:1). */
	--ink-faint: #7c8184;
}

.bolum-basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}
.bolum-basi > div { max-width: 640px; }
.bolum-basi h2 { font-size: 36px; margin: 14px 0 12px; }
.bolum-lede { color: var(--ink-muted); font-size: 15.5px; margin: 0; max-width: 62ch; }
.bagl {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
	white-space: nowrap;
}
.bagl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--gecis); }
.bagl:hover svg { transform: translateX(3px); }

/* ---- 6. Ana sayfa blokları ---------------------------------------------- */

/* Yol haritası */
/* Alti kart ARALIKLI durur, tek bir blok gibi degil. Onceden gap:1px ve
   arkadaki cizgi rengiyle kil payi ayraclar uretiliyordu; kartlar bitisik
   bir tablo gibi okunuyordu. Artik her kartin kendi cercevesi ve arada
   gercek bosluk var — ayri ayri moduller gibi gorunuyorlar. */
.yol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.yol-kart {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 5px;
	padding: 30px 28px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 258px;
	text-decoration: none;
	color: var(--ink);
	transition: background var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}
a.yol-kart:hover {
	background: var(--surface);
	border-color: var(--line-strong);
	box-shadow: var(--golge);
}
/* İlk kart artık geniş değil — altı özellik 3x2 olarak tam oturuyor.
   Öne çıkarma boyutla değil, sol kenardaki vurgu şeridiyle yapılıyor. */
.yol-kart.one-cikan { border-left-width: 3px; border-left-color: var(--accent); }
.yol-ust { display: flex; align-items: center; gap: 12px; }
.yol-ikon {
	width: 30px; height: 30px; flex-shrink: 0;
	fill: none; stroke: var(--accent); stroke-width: 1.4;
	stroke-linecap: round; stroke-linejoin: round;
	transition: transform var(--gecis);
}
.yol-kart.one-cikan .yol-ikon { stroke: var(--accent-ink); }
a.yol-kart:hover .yol-ikon { transform: translateY(-2px) scale(1.06); }
.yol-no {
	font-family: var(--font-head);
	font-size: 13px;
	color: var(--ink-faint);
	letter-spacing: 0.1em;
}
.yol-kart h3 { font-size: 25px; margin: 0; line-height: 1.18; }
.yol-kart p { color: var(--ink-muted); font-size: 14px; margin: 0; flex: 1; }
	/* .detay artik izgarada basilmiyor; ayrinti yakinda.php sayfasinda. */
.yol-durum {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--sun);
	margin-top: 4px;
}
.yol-durum::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.yol-durum.d-tasarim { color: var(--accent); }
.yol-durum.d-planlama { color: var(--ink-faint); }

/* Modül ızgarası — ana sayfa. Uygulama ekranı gibi kompakt karolar: solda
   ikon, sağında başlık ve altında durum. Açıklama yok; ayrıntı aracın kendi
   sayfasında ve yakında.php'de. Yayındaki modüller dolu mavi ikonla,
   yoldakiler gri ikonla ayrışır.
   Bölüm bilerek alçak tutulur: ilk ekranda altındaki bölümün başladığı da
   görünsün, sayfanın burada bittiği sanılmasın. */
.bolum.bolum-moduller { padding: 30px 0 34px; }
.bolum-moduller .bolum-basi { margin-bottom: 16px; align-items: center; }
.bolum-moduller .bolum-basi h2 { font-size: 24px; margin: 0; }
.modul-izgara {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.modul {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 12px;
	row-gap: 3px;
	align-items: center;
	padding: 12px 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.modul:hover { border-color: var(--line-strong); box-shadow: var(--golge); transform: translateY(-1px); }
.modul-ikon {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--surface-2);
	border: 1px solid var(--line);
}
.modul-ikon svg {
	width: 20px; height: 20px;
	fill: none; stroke: var(--ink-muted); stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
.modul-acik .modul-ikon { background: var(--accent); border-color: var(--accent); }
.modul-acik .modul-ikon svg { stroke: #fff; }
.modul-ad { align-self: end; font-size: 14px; font-weight: 600; line-height: 1.25; }
.modul-durum {
	align-self: start;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.modul-durum::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.modul-durum svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.modul-durum.d-yayin { color: var(--ok); }
.modul-durum.d-gelistirme { color: var(--sun); }
.modul-durum.d-tasarim { color: var(--accent); }
/* Telefonda uygulama ekranı gibi iki sütun kalır, tek sütuna düşmez. */
@media (max-width: 1000px) { .modul-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.bolum.bolum-moduller { padding: 22px 0 26px; }
	.bolum-moduller .bolum-basi h2 { font-size: 20px; }
	.modul-izgara { gap: 8px; }
	.modul { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 10px; }
	.modul-ikon { width: 34px; height: 34px; border-radius: 9px; }
	.modul-ikon svg { width: 18px; height: 18px; }
	.modul-ad { font-size: 13px; }
}

/* Konfigüratör tanıtımı */
.konfig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.konfig-metin h2 { font-size: 40px; margin: 14px 0 18px; }
.konfig-metin > p { color: var(--ink-muted); font-size: 16px; line-height: 1.66; }
.konfig-gorsel {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	overflow: hidden;
	background: var(--surface-3);
	border: 1px solid var(--line);
}
.konfig-gorsel img, .konfig-gorsel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.konfig-yer {
	width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	color: var(--ink-faint);
	background:
		radial-gradient(circle at 30% 25%, rgba(46,68,141,0.07), transparent 58%),
		repeating-linear-gradient(135deg, #ececea 0 22px, #e4e4e0 22px 44px);
	font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
.konfig-yer svg { width: 54px; height: 54px; stroke: var(--line-strong); fill: none; stroke-width: 1.2; }

/* Akış adımları */
.akis { display: flex; flex-direction: column; gap: 0; margin: 30px 0 32px; border-left: 1px solid var(--line-strong); }
.akis-adim { position: relative; padding: 0 0 26px 30px; }
.akis-adim:last-child { padding-bottom: 0; }
.akis-adim::before {
	content: "";
	position: absolute;
	left: -5px; top: 6px;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--bg);
}
.bolum-alt .akis-adim::before { box-shadow: 0 0 0 4px var(--surface); }
.bolum-koyu .akis-adim::before { box-shadow: 0 0 0 4px var(--surface-3); }
.akis-adim strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.akis-adim span { font-size: 14px; color: var(--ink-muted); }

/* Markalar */
/* Esik 292px iken 1200px'lik kapta yalnizca uc sutun sigiyordu ve dort
   markali liste 3+1 diziliyordu. 262px ile dordu yan yana giriyor; daha az
   ogeli izgaralar (bayi araclari) auto-fit sayesinde yine esit bolunuyor. */
.marka-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 20px; }
.marka-kart {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 32px 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
a.marka-kart:hover { border-color: var(--ink-faint); transform: translateY(-3px); box-shadow: var(--golge); }
/* Marka logosu — kartin en ustunde, adin uzerinde.
   Logolar 140x50 ve farkli en-boy oranlarinda; ortak bir kutuya oturtulup
   object-fit ile icine sigdirilir ki kartlar ayni hizada dursun. */
.marka-logo {
	display: flex;
	align-items: center;
	height: 34px;
	margin-bottom: 2px;
}
.marka-logo img {
	max-height: 34px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}
/* Ferrini logosu neredeyse beyaz: beyaz kartta gorunmez. Ust menude oldugu
   gibi burada da tema mavisi bir plakanin uzerine konur. */
.marka-logo.plaka img {
	box-sizing: content-box;
	max-height: 22px;
	background: var(--accent);
	padding: 6px 12px;
	border-radius: 3px;
}

.marka-etiket { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); }
.marka-kart.oz .marka-etiket { color: var(--sun); }
.marka-kart h3 { font-size: 26px; margin: 0; }
.marka-kart p { color: var(--ink-muted); font-size: 13.5px; margin: 0; flex: 1; }
.marka-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); flex-wrap: wrap; }

/* Ölçü şeridi */
.olcu-serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.olcu { background: var(--surface); padding: 28px 26px; display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--ink); }
a.olcu:hover { background: #fbfbfa; }
.olcu strong { font-family: var(--font-head); font-weight: 400; font-size: 38px; line-height: 1; }
.olcu span { font-size: 13px; color: var(--ink-muted); }

/* Çağrı bandı */
.cagri {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 68px 0;
}
.cagri-ic { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.cagri h2 { font-size: 34px; margin: 0 0 8px; }
.cagri p { color: var(--ink-muted); margin: 0; max-width: 56ch; font-size: 15px; }
.cagri .butonlar { flex-shrink: 0; }

/* ---- 7. Talep formu ----------------------------------------------------- */
.talep-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.talep-yan { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 100px; }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- 8. Yazı listeleri -------------------------------------------------- */
.yazi-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.yazi-izgara.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yazi-izgara.dort { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.yazi-kart {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.yazi-kart:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--golge); }
.yazi-kapak { aspect-ratio: 3 / 2; background: var(--surface-3); overflow: hidden; }
.yazi-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1); }
.yazi-kart:hover .yazi-kapak img { transform: scale(1.04); }
/* Yedek kapak = YouTube karesi (480x360, 16:9 video ust/alt siyah bantli).
   3:2 ve 16:10 kutuda bantlar gorunmesin diye kare 1.2 kat buyutulur. */
.kapak-yedek img { transform: scale(1.2); }
.yazi-kart:hover .kapak-yedek img, .yazi-one:hover .kapak-yedek img { transform: scale(1.25); }
.yazi-kapak-yok {
	width: 100%; height: 100%;
	background:
		linear-gradient(135deg, rgba(46,68,141,0.07), rgba(162,113,58,0.07)),
		var(--surface-3);
}
.yazi-govde-kucuk { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.yazi-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.yazi-meta .ayrac { color: var(--line-strong); letter-spacing: 0; }
.yazi-meta time { color: var(--ink-faint); font-weight: 500; letter-spacing: 0.08em; }
.yazi-kilit { color: var(--sun); }
.yazi-kart h3 { font-size: 20px; line-height: 1.26; margin: 0; }
.yazi-kart p { color: var(--ink-muted); font-size: 13.5px; margin: 0; flex: 1; }
.yazi-devam { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-top: 4px; }

/* Öne çıkan büyük kart */
.yazi-one {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0;
	margin-bottom: 30px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
	background: var(--surface); text-decoration: none; color: var(--ink);
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.yazi-one:hover { border-color: var(--line-strong); box-shadow: var(--golge); }
.yazi-one .yazi-kapak { aspect-ratio: 16 / 10; height: 100%; }
.yazi-one-metin { padding: 46px 48px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.yazi-one-metin h3 { font-size: 32px; line-height: 1.16; margin: 0; }
.yazi-one-metin p { color: var(--ink-muted); font-size: 15px; margin: 0; }

/* Duyuru satır listesi */
.duyuru-liste { border-top: 1px solid var(--line); }
.duyuru-satir {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr) auto;
	gap: 26px;
	align-items: baseline;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
	transition: padding var(--gecis);
}
.duyuru-satir:hover { padding-left: 10px; }
.duyuru-satir time { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.duyuru-satir strong { font-family: var(--font-head); font-weight: 400; font-size: 20px; line-height: 1.3; display: block; margin-bottom: 4px; }
.duyuru-satir p { color: var(--ink-muted); font-size: 13.5px; margin: 0; }
.duyuru-satir .ok { color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.bolum-koyu .duyuru-liste, .bolum-koyu .duyuru-satir { border-color: var(--line-strong); }

/* Filtre şeridi */
.filtre { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 38px; }
.filtre a {
	height: 34px; padding: 0 16px; border-radius: 999px;
	border: 1px solid var(--line-strong); background: var(--surface);
	display: inline-flex; align-items: center; font-size: 12.5px; color: var(--ink-muted);
	text-decoration: none; transition: all var(--gecis);
}
.filtre a:hover { border-color: var(--ink); color: var(--ink); }
.filtre a.secili { background: var(--ink); color: #fff; border-color: var(--ink); }

.sayfalama { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 52px; }
.sayfalama a, .sayfalama span {
	min-width: 40px; height: 40px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
	text-decoration: none; color: var(--ink-muted); font-size: 13.5px;
}
.sayfalama a:hover { border-color: var(--accent); color: var(--accent); }
.sayfalama .secili { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

/* ---- 9. Yazı detayı ----------------------------------------------------- */
.yazi-basi {
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	padding: 66px 0 56px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.yazi-basi.kapakli { min-height: 440px; display: flex; align-items: flex-end; padding-top: 130px; }
.yazi-basi-arka { position: absolute; inset: 0; z-index: 0; }
.yazi-basi-arka img { width: 100%; height: 100%; object-fit: cover; }
.yazi-basi-perde {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(250,250,249,0.98) 16%, rgba(250,250,249,0.88) 52%, rgba(250,250,249,0.55) 100%);
}
.yazi-basi > .kap { position: relative; z-index: 2; }
.yazi-basi h1 { font-size: 46px; margin: 16px 0 16px; max-width: 20ch; }
.yazi-basi .yazi-ozet { color: var(--ink-muted); font-size: 17px; max-width: 60ch; margin: 0; }
.yazi-basi-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; font-size: 12.5px; color: var(--ink-faint); }
.yazi-basi-meta .ayrac { color: var(--line-strong); }

.yazi-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
.yazi-govde { font-size: 16.5px; line-height: 1.78; color: #2c3135; }
.yazi-govde > *:first-child { margin-top: 0; }
.yazi-govde h2 { font-size: 30px; margin: 46px 0 14px; }
.yazi-govde h3 { font-size: 21px; margin: 36px 0 10px; }
.yazi-govde p { margin: 0 0 22px; }
.yazi-govde ul, .yazi-govde ol { margin: 0 0 22px; padding-left: 22px; }
.yazi-govde li { margin-bottom: 8px; }
.yazi-govde a { color: var(--accent); text-underline-offset: 3px; }
.yazi-govde code {
	background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px;
	padding: 1px 6px; font-size: 0.88em;
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
.yazi-govde blockquote {
	margin: 34px 0;
	padding: 4px 0 4px 28px;
	border-left: 2px solid var(--sun);
	font-family: var(--font-head);
	font-size: 22px;
	line-height: 1.46;
	color: var(--ink);
}
.yazi-gorsel { margin: 34px 0; }
.yazi-gorsel img { width: 100%; border-radius: 4px; display: block; }
.yazi-gorsel figcaption { font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; }

.yazi-yan { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 26px; }
.yan-blok { border-top: 1px solid var(--line-strong); padding-top: 18px; }
.yan-blok h4 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 14px; font-weight: 600; font-family: var(--font-body); }
.yan-blok a { display: block; font-size: 14px; color: var(--ink); text-decoration: none; padding: 7px 0; line-height: 1.4; }
.yan-blok a:hover { color: var(--accent); }
.yan-etiketler { display: flex; flex-wrap: wrap; gap: 7px; }
.yan-etiketler a {
	display: inline-block; font-size: 11.5px; color: var(--ink-muted);
	background: var(--surface-2); padding: 4px 11px; border-radius: 999px;
	text-decoration: none; transition: background var(--gecis), color var(--gecis);
}
.yan-etiketler a:hover { background: var(--accent-soft); color: var(--accent); }

.kirinti-ust { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-faint); margin-bottom: 4px; }
.kirinti-ust a { color: var(--ink-muted); text-decoration: none; }
.kirinti-ust a:hover { color: var(--accent); }

/* ---- 10. Doküman kütüphanesi -------------------------------------------- */
.hero { margin-bottom: 30px; }
.hero h1 { font-size: 34px; max-width: 24ch; }
.hero p { color: var(--ink-muted); font-size: 14.5px; max-width: 64ch; }

.hero-medyali {
	position: relative;
	margin: -40px -36px 30px;
	padding: 52px 36px 44px;
	min-height: 260px;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--surface-2);
}
.hero-arka { position: absolute; inset: -18% 0; z-index: 0; will-change: transform; }
.hero-arka img, .hero-arka video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-perde { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(250,250,249,0.96) 0%, rgba(250,250,249,0.86) 55%, rgba(250,250,249,0.6) 100%); }
.hero-icerik { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; }

.bolum-basligi { font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; font-family: var(--font-body); margin: 0 0 14px; }
.serit-bolum { margin-bottom: 32px; }
.serit { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.serit-kart {
	flex: 0 0 268px;
	scroll-snap-align: start;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
}
a.serit-kart:hover { border-color: var(--ink-faint); }
.serit-medya { aspect-ratio: 16 / 9; background: var(--surface-3); }
.serit-medya img, .serit-medya video { width: 100%; height: 100%; object-fit: cover; display: block; }
.serit-metin { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 3px; }
.serit-ad { font-weight: 600; font-size: 14px; }
.serit-alt { font-size: 12.5px; color: var(--ink-muted); }

.govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }

.arama { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; }
.arama-genis { grid-template-columns: minmax(0, 1fr) 200px 130px; }
.arama input, .arama select {
	font: inherit;
	height: 52px;
	padding: 0 18px;
	border: 1px solid var(--line-strong);
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink);
	min-width: 0;
}
.arama .btn { height: 52px; }
.hero .arama { margin-top: 26px; }

.chip { height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-muted); text-decoration: none; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sayac { display: flex; align-items: center; gap: 14px; color: var(--ink-faint); font-size: 12.5px; margin: 0 0 14px; }
.sayac a { text-decoration: none; font-weight: 500; }

.kirinti { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-faint); margin-bottom: 18px; }
.kirinti a { color: var(--accent); text-decoration: none; font-weight: 500; }
.kirinti a::after { content: "/"; margin-left: 8px; color: var(--line-strong); font-weight: 400; }
.kirinti span { color: var(--ink); font-weight: 600; }

.klasorler { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.klasor {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 20px 22px;
	text-decoration: none;
	color: var(--ink);
	min-height: 78px;
	transition: border-color var(--gecis), background var(--gecis);
}
.klasor:hover { border-color: var(--accent); background: var(--accent-soft); }
.klasor-ad { font-family: var(--font-head); font-size: 17px; line-height: 1.25; }
.klasor-sayi {
	flex-shrink: 0;
	min-width: 34px;
	height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink-muted);
	font-size: 12.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
.klasor:hover .klasor-sayi { background: #fff; color: var(--accent-ink); }
.klasor-bos { opacity: 0.55; }

.dosyalar { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; }
.dosya {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 15px 20px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
}
.dosya:last-child { border-bottom: none; }
.dosya:hover { background: var(--surface-2); }
.dosya-ad { font-size: 14.5px; font-weight: 500; }
.dosya-aciklama { font-size: 13px; color: var(--ink-muted); }
.dosya-aciklama:empty { display: none; }
.dosya-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-top: 2px; }
.dosya-yol { color: var(--ink-faint); }
.dosya-eylem { color: var(--accent); font-weight: 500; }
.dosya-ozel { color: var(--warn); background: var(--warn-soft); padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 11px; }
.dosya-kilitli .dosya-ad { color: var(--ink-muted); }
/* Marka sayfasi: dokumanlar ikiserli kart; dar ekranda tek sutuna iner. */
.dosyalar-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: none; background: none; overflow: visible; }
.dosyalar-iki .dosya, .dosyalar-iki .dosya:last-child { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.dosyalar-iki .dosya:hover { background: var(--surface-2); }

.kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kart {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 196px;
}
.kart h2 { font-size: 18px; line-height: 1.3; margin: 0; }
.kart p { color: var(--ink-muted); font-size: 13px; margin: 0; flex: 1; }
.kart.kilitli { background: repeating-linear-gradient(135deg, #fafaf9 0 8px, #f2f2f0 8px 16px); }
.etiket-tur { display: block; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.tur-video .etiket-tur { color: var(--video); }
.tur-kilavuz .etiket-tur { color: var(--ok); }
.tur-sayfa .etiket-tur { color: var(--ink-muted); }
.etiket-grup { font-size: 11.5px; color: var(--ink-faint); }
.kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.bos { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 4px; padding: 40px 28px; text-align: center; color: var(--ink-muted); }

/* ---- 11. Formlar -------------------------------------------------------- */
.form-alani .aciklama { color: var(--ink-muted); font-size: 14.5px; }
.form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 34px 36px;
}
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; }
.form label[hidden] { display: none; }
.form .etiket { display: block; line-height: 1.4; }
.form .ops { font-weight: 400; color: var(--ink-faint); }
.form input, .form select, .form textarea {
	font: inherit;
	font-weight: 400;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--line-strong);
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink);
	width: 100%;
}
.form textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.form textarea.uzun { min-height: 420px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 13.5px; }
.satir-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.satir-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.not { font-size: 12.5px; color: var(--ink-faint); }
.form .not { margin: 0; }
.alt-baglanti { margin-top: 18px; font-size: 13.5px; color: var(--ink-muted); }
.alt-baglanti a { font-weight: 500; text-decoration: none; }
.butonlar { display: flex; gap: 10px; flex-wrap: wrap; }
.form label.onay { flex-direction: row; align-items: center; gap: 9px; }
.form label.onay input { width: auto; height: auto; }
code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.9em; }

.hesap .aciklama { color: var(--ink-muted); font-size: 14.5px; }
.hesap-iki { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; margin-top: 26px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 30px 32px; }
.bilgi { display: grid; grid-template-columns: 150px 1fr; gap: 12px 18px; margin: 18px 0 0; font-size: 14px; }
.bilgi dt { color: var(--ink-faint); }
.bilgi dd { margin: 0; }
.yakinda-sutun { display: flex; flex-direction: column; gap: 14px; }
.panel.yakinda { border: 1px dashed var(--line-strong); background: var(--surface-2); padding: 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.panel.yakinda h2 { margin: 0; font-size: 20px; }
.panel.yakinda p { color: var(--ink-muted); font-size: 13.5px; margin: 0; }

/* ---- 12. Yönetim -------------------------------------------------------- */
.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 22px 0 8px; }
.sayi { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 18px 20px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.sayi strong { font-family: var(--font-head); font-weight: 400; font-size: 32px; line-height: 1; }
.sayi span { font-size: 12.5px; color: var(--ink-muted); }
.sayi.dikkat { border-color: #e2c79a; background: var(--warn-soft); }
.sayi.dikkat strong { color: var(--warn); }

.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 24px 0 18px; flex-wrap: wrap; }
.sekmeler a { padding: 10px 16px; text-decoration: none; color: var(--ink-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 13.5px; }
.sekmeler a.secili { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.sekme-sayi { font-size: 11px; padding: 2px 7px; border-radius: 999px; margin-left: 6px; font-weight: 600; background: var(--surface-2); color: var(--ink-muted); }
.sekme-sayi.dikkat { background: var(--warn-soft); color: var(--warn); }
.baslik-satiri { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.baslik-satiri h1 { margin: 0; }

.tablo-kaydir { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tablo th, .tablo td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tablo th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); background: var(--surface-2); white-space: nowrap; font-weight: 600; }
.tablo tr:last-child td { border-bottom: none; }
.tablo .mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tablo .kisalt { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablo b { font-weight: 600; }
.islemler { white-space: nowrap; }
.islemler > * { margin-right: 6px; }
.satir-ici { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.satir-ici input.kucuk { width: 120px; height: 34px; padding: 0 10px; font: inherit; font-size: 13px; border: 1px solid var(--line-strong); border-radius: 3px; }
.yonetim-ozet .tablo { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 16px; }
.yonetim-ozet h2 { margin-top: 24px; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-bekliyor { background: var(--warn-soft); color: var(--warn); }
.pill-aktif { background: var(--ok-soft); color: var(--ok); }
.pill-pasif { background: var(--surface-2); color: var(--ink-muted); }

/* ---- 13. Kimlik sayfaları (giriş / kayıt) ------------------------------- */
.kimlik { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); min-height: calc(100vh - 74px); }
.kimlik-yan {
	background: var(--surface-2);
	border-right: 1px solid var(--line);
	display: flex; align-items: center;
	padding: 72px var(--yan);
}
.kimlik-yan-ic { max-width: 440px; margin-left: auto; }
.kimlik-yan h2 { font-size: 30px; margin: 14px 0 26px; }
.kimlik-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.kimlik-liste li { display: flex; flex-direction: column; gap: 3px; padding-left: 22px; position: relative; }
.kimlik-liste li::before {
	content: ""; position: absolute; left: 0; top: 8px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--sun);
}
.kimlik-liste strong { font-size: 14.5px; font-weight: 600; }
.kimlik-liste span { font-size: 13.5px; color: var(--ink-muted); line-height: 1.55; }
.kimlik-not { margin: 30px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }
.kimlik-form { display: flex; align-items: center; padding: 72px var(--yan); background: var(--bg); }
.kimlik-form-ic { width: 100%; max-width: 440px; }
.kimlik-form-ic.kimlik-genis { max-width: 620px; }
.kimlik-form-ic h1 { font-size: 34px; margin-bottom: 8px; }
.kimlik-form-ic .aciklama { color: var(--ink-muted); font-size: 14.5px; margin: 0; }
.kimlik-form-ic .not { margin: 12px 0 0; }

/* ---- 14. Teşekkür ekranı ------------------------------------------------ */
.tesekkur {
	max-width: 620px; margin: 0 auto; text-align: center;
	background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
	padding: 56px 48px;
}
.tesekkur-isaret {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--ok-soft); color: var(--ok); margin-bottom: 20px;
}
.tesekkur-isaret svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tesekkur h2 { font-size: 30px; margin: 0 0 10px; }
.tesekkur > p { color: var(--ink-muted); font-size: 15.5px; margin: 0; }

/* ---- 15. Etiketler ------------------------------------------------------ */
.etiket-bulutu { display: flex; flex-wrap: wrap; gap: 10px; }
.etiket-bulutu a {
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 8px 0 16px; border-radius: 999px;
	border: 1px solid var(--line-strong); background: var(--surface);
	color: var(--ink); text-decoration: none; font-size: 13.5px;
	transition: border-color var(--gecis), color var(--gecis);
}
.etiket-bulutu a:hover { border-color: var(--accent); color: var(--accent); }
.etiket-bulutu a span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
	background: var(--surface-2); color: var(--ink-faint); font-size: 11.5px;
	font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---- 16. Yazı gezinmesi ------------------------------------------------- */
.yazi-gezinme { border-top: 1px solid var(--line); padding: 30px 0; background: var(--bg); }
.gezinme-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gezinme-kart {
	display: flex; flex-direction: column; gap: 5px;
	padding: 20px 24px; border: 1px solid var(--line); border-radius: 4px;
	background: var(--surface); text-decoration: none; color: var(--ink);
	transition: border-color var(--gecis);
}
.gezinme-kart:hover { border-color: var(--accent); }
.gezinme-kart.sag { text-align: right; align-items: flex-end; }
.gezinme-yon { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--ink-faint); }
.gezinme-kart strong { font-family: var(--font-head); font-weight: 400; font-size: 17px; line-height: 1.3; }

/* ---- 17. Ürün grupları -------------------------------------------------- */
.urun-grup { margin-bottom: 64px; }
.urun-grup:last-child { margin-bottom: 0; }
.urun-grup .bolum-basi { margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.urun-grup .bolum-basi h2 { font-size: 26px; margin: 0 0 4px; }

/* ---- 18. Dip ------------------------------------------------------------ */
.alt {
	border-top: 1px solid var(--line);
	padding: 18px 36px;
	font-size: 12px;
	color: var(--ink-faint);
	display: flex;
	justify-content: space-between;
	gap: 8px 24px;
	flex-wrap: wrap;
}
.alt a { color: var(--ink-muted); text-decoration: none; }

.dip {
	background: var(--surface-2);
	border-top: 1px solid var(--line);
	color: var(--ink-muted);
	padding: 72px 0 28px;
	font-size: 13.5px;
}
.dip-ust { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 44px; padding-bottom: 52px; }
/* width/max-width acikca verilir: genel "img { max-width: 100% }" kurali
   box-sizing: content-box ile IC KUTUYA uygulanir, yani gorsel kabinin tamamini
   kaplayip ustune bir de 26px dolgu ekleyebilir. Dip logosu loading="lazy"
   oldugu icin sayfanin ustundeyken henuz yuklenmemis olur; bu durumda oran
   bilinmedigi icin gercekten de kaba yayilip sayfayi yatay kaydiriyordu. */
.dip-marka img {
	height: 26px;
	width: auto;
	max-width: 150px;
	margin-bottom: 20px;
	box-sizing: content-box;
	background: var(--accent);
	padding: 7px 13px;
	border-radius: 3px;
}
.dip-marka p { color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; max-width: 40ch; margin: 0 0 22px; }
.dip-sutun { display: flex; flex-direction: column; gap: 11px; }
.dip-sutun h3 { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin: 0 0 4px; }
.dip-sutun a { color: var(--ink-muted); text-decoration: none; font-size: 13.5px; }
.dip-sutun a:hover { color: var(--accent); }
.dip-satir {
	border-top: 1px solid var(--line-strong);
	padding-top: 24px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: 12px; color: var(--ink-faint);
}

/* ---- 19. Duyarlılık ----------------------------------------------------- */
@media (max-width: 1180px) {
	:root { --yan: 28px; }
	.kahraman h1 { font-size: 46px; }
	.konfig { gap: 44px; }
	.dip-ust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
	.dip-marka { grid-column: span 3; }
}

/* ---------------------------------------------------------------------------
   Masaustu ust menusu — 1001-1400px arasi sikistirma.

   Kap genisligi --kap: 1280px, yani icerik kutusu 1200px. Ust menunun ihtiyaci
   ise ~1362px: logo + .ana-menu (7 baglanti, 30px bosluk) + .ust-eylem.
   Fark kabin disina tasiyordu ve .ust-eylem ("Hesabım / Çıkış") 1000-1500px
   arasindaki ekranlarda sag kenardan disari dusuyordu — yani 1366x768 gibi
   yaygin bir dizustunde bayi cikis baglantisina ulasamiyordu.

   min-width: 1001px sart: bu kurallar hamburger menusunun (max-width: 1000px)
   kendi duzenini ezmemeli.
   --------------------------------------------------------------------------- */
@media (min-width: 1231px) and (max-width: 1500px) {
	.ust-ic { gap: 20px; }
	.menu-alani { gap: 16px; }
	.ana-menu { gap: 15px; }
	.ana-menu > a, .menu-basi { font-size: 12.5px; }
	.ust-eylem { gap: 14px; }
	.ust-eylem a { font-size: 12.5px; }
}

/* ---------------------------------------------------------------------------
   Ust menu kirilma noktasi — 1230px.

   Masaustu menusunun en dar hali 1208px yer istiyor (logo + 7 baglanti +
   "Hesabım / Çıkış"). Esik 1000px oldugu icin 1001-1230px arasindaki
   ekranlarda menu kabin disina tasiyor ve .ust-eylem sag kenardan disari
   dusuyordu; bayi cikis baglantisini goremiyordu. Bu yuzden BASLIK kurallari
   kendi esigine tasindi. Sayfanin geri kalani (kahraman, izgaralar, teklif
   duzeni) 1000px esiginde kalir — onlarin boyle bir sinirlamasi yok.
   --------------------------------------------------------------------------- */
@media (max-width: 1230px) {
	.ust-ic { height: 66px; gap: 20px; }
	.menu-dugme {
		display: flex; flex-direction: column; justify-content: center; gap: 5px;
		width: 30px; height: 30px; margin-left: auto; cursor: pointer;
	}
	.menu-dugme span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--gecis), opacity var(--gecis); }
	.menu-kutu:checked ~ .menu-dugme span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-kutu:checked ~ .menu-dugme span:nth-child(2) { opacity: 0; }
	.menu-kutu:checked ~ .menu-dugme span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.menu-alani {
		position: absolute;
		top: 66px; left: 0; right: 0;
		background: var(--surface);
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--golge);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px var(--yan) 26px;
		max-height: calc(100vh - 66px);
		overflow-y: auto;
		display: none;
	}
	.menu-kutu:checked ~ .menu-alani { display: flex; }
	.ana-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.ana-menu > a, .menu-basi { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
	.ana-menu > a.secili, .menu-basi.secili { border-bottom-color: var(--line); color: var(--accent); }
	.menu-basi svg { display: none; }
	.alt-menu {
		display: flex; position: static; background: transparent; border: none;
		box-shadow: none; padding: 4px 0 12px 16px; min-width: 0;
	}
	.alt-menu a { padding: 9px 0; }
	.alt-menu a:hover { background: transparent; color: var(--accent); }
	.ust-eylem { padding-top: 20px; gap: 18px; flex-wrap: wrap; }
	/* Acilir menu icinde liste yerinde, iki sutun halinde acilir; mutlak
	   konumlu kutu dar ekranda sag kenardan tasiyordu. */
	.dil-sec { flex: 1 1 100%; }
	.dil-sec summary { display: inline-flex; }
	.dil-liste { position: static; margin-top: 8px; box-shadow: none; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }

	/* Yonetim ust menusu 11 baglanti tasiyor ve .ust-eylem'de flex-shrink:0 ile
	   a{white-space:nowrap} var; sarma izni olmadigi icin menu tek satirda
	   ~884px kaliyor, .ust-yonetim de sabit yukseklikte. Sonuc: telefonda
	   butun yonetim ekranlarinda sayfa 1028px genisliginde ve yatay kayiyor.
	   Yalnizca yonetim basligi hedeflenir; bayi menusu degismez. */
	.ust-yonetim { height: auto; min-height: 60px; padding: 10px 20px; flex-wrap: wrap; row-gap: 8px; }
	/* flex: 1 1 100% sart: .ust-eylem'deki flex-shrink:0, menunun max-content
	   genisliginin (884px) altina inmesini engelliyor; tek basina flex-wrap
	   vermek yetmiyor. Kendi satirina alarak logonun altina sariyor. */
	.ust-yonetim .ust-eylem { flex: 1 1 100%; flex-wrap: wrap; padding-top: 0; row-gap: 8px; column-gap: 16px; }
}

/* ---------------------------------------------------------------------------
   Menu SIGMIYORSA hamburger — genislikten bagimsiz.

   Yukaridaki 1230px esigi Turkce menu icin olculdu. Cevrilen menu cok daha
   uzun: Ispanyolca ve Fransizcada girisli bayi menusu 1920px'de bile ~250px
   tasiyordu, Almancada 1366px'lik dizustunde "Çıkış" ekran disina dusuyordu.
   Her dile ayri esik tutmak metin her degistiginde yeniden bozulurdu.

   Bunun yerine inc/header.php'deki kucuk betik menunun tasip tasmadigini
   OLCER ve tasiyorsa .ust'e menu-dar sinifini ekler; asagidaki kurallar
   1230px blogunun birebir kopyasidir. Betik calismazsa (JS kapali) menu
   eskisi gibi genislik esigine gore davranir.
   --------------------------------------------------------------------------- */
.ust.menu-dar .ust-ic { height: 66px; gap: 20px; }
.ust.menu-dar .menu-dugme {
	display: flex; flex-direction: column; justify-content: center; gap: 5px;
	width: 30px; height: 30px; margin-left: auto; cursor: pointer;
}
.ust.menu-dar .menu-dugme span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--gecis), opacity var(--gecis); }
.ust.menu-dar .menu-kutu:checked ~ .menu-dugme span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ust.menu-dar .menu-kutu:checked ~ .menu-dugme span:nth-child(2) { opacity: 0; }
.ust.menu-dar .menu-kutu:checked ~ .menu-dugme span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ust.menu-dar .menu-alani {
	position: absolute;
	top: 66px; left: 0; right: 0;
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--golge);
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 10px var(--yan) 26px;
	max-height: calc(100vh - 66px);
	overflow-y: auto;
	display: none;
}
.ust.menu-dar .menu-kutu:checked ~ .menu-alani { display: flex; }
.ust.menu-dar .ana-menu { flex-direction: column; align-items: stretch; gap: 0; }
.ust.menu-dar .ana-menu > a, .ust.menu-dar .menu-basi { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ust.menu-dar .ana-menu > a.secili, .ust.menu-dar .menu-basi.secili { border-bottom-color: var(--line); color: var(--accent); }
.ust.menu-dar .menu-basi svg { display: none; }
.ust.menu-dar .alt-menu {
	display: flex; position: static; background: transparent; border: none;
	box-shadow: none; padding: 4px 0 12px 16px; min-width: 0;
}
.ust.menu-dar .alt-menu a { padding: 9px 0; }
.ust.menu-dar .alt-menu a:hover { background: transparent; color: var(--accent); }
.ust.menu-dar .ust-eylem { padding-top: 20px; gap: 18px; flex-wrap: wrap; }
.ust.menu-dar .ust-eylem a { font-size: 13.5px; }
.ust.menu-dar .dil-sec { flex: 1 1 100%; }
.ust.menu-dar .dil-sec summary { display: inline-flex; }
.ust.menu-dar .dil-liste { position: static; margin-top: 8px; box-shadow: none; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }

@media (max-width: 1000px) {

	.kahraman { min-height: 0; padding: 72px 0 66px; }
	.kahraman-ince { padding: 24px 0 22px; }
	.kahraman h1 { font-size: 38px; }
	.kahraman-lede { font-size: 16px; }
	.sayfa-basi { padding: 54px 0 46px; }
	.sayfa-basi h1 { font-size: 34px; }
	.yazi-basi h1 { font-size: 34px; }
	.yazi-basi.kapakli { min-height: 320px; padding-top: 96px; }

	.bolum { padding: 64px 0; }
	.bolum-basi h2 { font-size: 29px; }
	.konfig { grid-template-columns: 1fr; gap: 36px; }
	.konfig-metin h2 { font-size: 30px; }
	.yol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* .genis kaldirildi: alti ozellik iki sutunda 3 satir olarak tam oturuyor. */
	.yazi-izgara, .yazi-izgara.dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.yazi-one { grid-template-columns: 1fr; }
	.yazi-one .yazi-kapak { aspect-ratio: 16 / 9; }
	.yazi-one-metin { padding: 32px 30px; }
	.yazi-one-metin h3 { font-size: 26px; }
	.yazi-duzen { grid-template-columns: 1fr; gap: 48px; }
	.yazi-yan { position: static; }
	.kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hesap-iki { grid-template-columns: 1fr; }
	.talep-duzen { grid-template-columns: 1fr; gap: 44px; }
	.talep-yan { position: static; }

	.kimlik { grid-template-columns: 1fr; min-height: 0; }
	.kimlik-yan { padding: 48px var(--yan); border-right: none; border-bottom: 1px solid var(--line); }
	.kimlik-yan-ic { max-width: none; margin: 0; }
	.kimlik-yan h2 { font-size: 25px; }
	.kimlik-form { padding: 48px var(--yan) 64px; }
	.kimlik-form-ic, .kimlik-form-ic.kimlik-genis { max-width: none; }
}

@media (max-width: 640px) {
	:root { --yan: 20px; }
	body { font-size: 14.5px; }
	/* height: auto — sabit yukseklik, 1000px blogunda sarmaya birakilan
	   menuyu kaba sigdirmiyor ve menu sayfa basliginin uzerine biniyordu.
	   Bu blok 1000px blogundan SONRA geldigi icin orayi ezer. */
	.ust-yonetim { height: auto; min-height: 60px; padding: 10px 20px; }
	.ust-yonetim .logo span { display: none; }
	.icerik { padding: 24px 20px 48px; }
	.alt { padding: 16px 20px; }

	.kahraman { padding: 54px 0 50px; }
	.kahraman-ince { padding: 20px 0 18px; }
	.kahraman h1 { font-size: 29px; }
	.kahraman-lede { font-size: 15px; }
	.kahraman-arama .arama input,
	.kahraman-arama .arama select,
	.kahraman-arama .arama .btn { height: 50px; }
	.sayfa-basi { padding: 40px 0 34px; }
	.sayfa-basi h1 { font-size: 27px; }
	.sayfa-basi p { font-size: 14.5px; }
	.yazi-basi h1 { font-size: 27px; }
	.yazi-basi .yazi-ozet { font-size: 15px; }
	.yazi-basi.kapakli { min-height: 240px; padding-top: 64px; }
	.yazi-govde { font-size: 15.5px; }
	.yazi-govde h2 { font-size: 24px; margin-top: 34px; }
	.yazi-govde blockquote { font-size: 19px; padding-left: 20px; }

	.bolum { padding: 48px 0; }
	.bolum-sik { padding: 38px 0; }
	.bolum-basi { margin-bottom: 28px; gap: 14px; }
	.bolum-basi h2 { font-size: 25px; }
	.bolum-lede { font-size: 14.5px; }

	.yol { grid-template-columns: 1fr; }
	.yol-kart { grid-column: span 1; min-height: 0; padding: 26px 24px; }
	.yol-kart h3 { font-size: 22px; }
	.konfig-metin h2 { font-size: 25px; }
	.marka-izgara { grid-template-columns: 1fr; }
	.yazi-izgara, .yazi-izgara.iki, .yazi-izgara.dort { grid-template-columns: 1fr; gap: 18px; }
	.duyuru-satir { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
	.duyuru-satir strong { font-size: 18px; }
	.duyuru-satir .ok { display: none; }
	.cagri { padding: 46px 0; }
	.cagri h2 { font-size: 25px; }
	.olcu { padding: 22px 20px; }
	.olcu strong { font-size: 31px; }

	.hero h1 { font-size: 24px; }
	.hero-medyali { margin: -24px -20px 26px; padding: 34px 20px 30px; min-height: 0; }
	.hero-medyali h1 { font-size: 22px; }
	.arama, .arama-genis { grid-template-columns: 1fr; }
	.serit-kart { flex-basis: 232px; }
	.klasorler { grid-template-columns: 1fr; }
	.klasor { min-height: 0; padding: 16px 18px; }
	.dosya { padding: 14px 16px; }
	.dosyalar-iki { grid-template-columns: 1fr; }
	.kartlar { grid-template-columns: 1fr; }
	.kart { min-height: 0; }
	.satir-2, .satir-3 { grid-template-columns: 1fr; }
	.form { padding: 22px 20px; }
	.panel { padding: 22px 20px; }
	.bilgi { grid-template-columns: 1fr; gap: 2px 0; }
	.bilgi dt { margin-top: 8px; }

	.tesekkur { padding: 36px 24px; }
	.tesekkur h2 { font-size: 24px; }
	.gezinme-ikili { grid-template-columns: 1fr; }
	.gezinme-kart.sag { text-align: left; align-items: flex-start; }
	.urun-grup { margin-bottom: 44px; }
	.kimlik-form-ic h1 { font-size: 27px; }
	.etiket-bulutu a { height: 34px; font-size: 12.5px; }

	.dip { padding: 48px 0 24px; }
	.dip-ust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding-bottom: 36px; }
	.dip-marka { grid-column: span 2; }
}

/* ---- 20. Yazdırma ------------------------------------------------------- */
@media print {
	.ust, .dip, .alt, .atla, .yazi-gezinme, .cagri, .talep-yan, .yazi-yan,
	.filtre, .sayfalama, .kahraman-arama, .butonlar,
	.serit, .katalog-giris { display: none !important; }
	body { background: #fff; font-size: 11pt; }
	.kahraman, .sayfa-basi, .yazi-basi, .bolum-koyu, .bolum-alt {
		background: #fff !important; border: none !important; padding: 0 0 18pt; min-height: 0;
	}
	.kahraman-perde, .yazi-basi-perde, .kahraman-arka, .yazi-basi-arka { display: none !important; }
	.bolum { padding: 12pt 0; }
	.yazi-duzen, .talep-duzen { display: block; }
	.yazi-govde { font-size: 11pt; }
	.yazi-govde a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
	.kap { max-width: none; padding: 0; }
	.yol, .olcu-serit { background: none; border-color: #ccc; }
	.yol-kart, .olcu { border: 1px solid #ddd; }
}

/* ---- 21. Önizleme bandı ve dört sütunlu arama --------------------------- */
.onizleme-bandi {
	background: var(--warn-soft);
	border-bottom: 1px solid #ead8b8;
	color: var(--warn);
	font-size: 13px;
	padding: 11px 0;
}
.onizleme-bandi .kap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.onizleme-bandi strong {
	font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
	background: var(--warn); color: #fff; padding: 3px 9px; border-radius: 2px;
}
.onizleme-bandi a { color: var(--warn); font-weight: 600; text-decoration: none; margin-left: auto; }
.onizleme-bandi a:hover { text-decoration: underline; }

.arama-dort { grid-template-columns: minmax(0, 1fr) 180px 220px 120px; }
@media (max-width: 1000px) { .arama-dort { grid-template-columns: minmax(0, 1fr) 1fr 1fr 110px; } }
@media (max-width: 640px) { .arama-dort { grid-template-columns: 1fr; } }

/* ==========================================================================
   22. Bayi araçları — profil, talep kutusu
   ========================================================================== */
.logo-alani { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; align-items: start; }
.logo-onizleme {
	height: 110px; border: 1px dashed var(--line-strong); border-radius: 4px;
	background: var(--surface-2); display: flex; align-items: center; justify-content: center;
	padding: 12px; overflow: hidden;
}
.logo-onizleme img { max-width: 100%; max-height: 86px; object-fit: contain; }
.logo-onizleme span { font-size: 12.5px; color: var(--ink-faint); }

.onay-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; }
.onay-izgara .onay { font-weight: 400; font-size: 13.5px; }

.talep-kartlari { display: flex; flex-direction: column; gap: 18px; }
.talep-karti {
	background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
	padding: 24px 26px;
}
.talep-karti.bekliyor { border-color: #e2c79a; background: #fdfaf4; }
.talep-karti-basi { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.talep-karti-basi h3 { font-size: 20px; margin: 6px 0 0; }
.talep-karti-alt {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.talep-mesaj {
	margin: 14px 0 0; padding: 14px 16px; background: var(--surface-2);
	border-radius: 3px; font-size: 13.5px; color: var(--ink-muted);
}

/* ==========================================================================
   23. Teklif Düzenleme Formu
   ========================================================================== */
.teklif-form {
	background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
	padding: 0 0 34px;
}

/* Başlık: sol logo · orta başlık · sağ tarih */
.teklif-basi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 26px; align-items: start;
	padding: 30px 34px 26px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-2);
	border-radius: 4px 4px 0 0;
}
.teklif-basi-sol { display: flex; align-items: center; min-height: 84px; }
.teklif-logo { max-width: 220px; max-height: 84px; object-fit: contain; }
.teklif-logo-yok {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	width: 180px; height: 84px; border: 1px dashed var(--line-strong); border-radius: 4px;
	background: var(--surface); color: var(--ink-faint); text-decoration: none;
	font-size: 12px; transition: border-color var(--gecis), color var(--gecis);
}
.teklif-logo-yok:hover { border-color: var(--accent); color: var(--accent); }
.teklif-logo-yok .arti { font-size: 22px; line-height: 1; }

.teklif-basi-orta { text-align: center; }
.teklif-basi-orta h1 { font-size: 27px; margin: 0 0 14px; }
.teklif-no { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; }
.teklif-no span { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.teklif-no input {
	font: inherit; font-weight: 600; text-align: center; width: 170px; height: 38px;
	border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface);
	color: var(--ink); font-variant-numeric: tabular-nums;
}

.teklif-basi-sag { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.teklif-basi-sag label { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.teklif-basi-sag span { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.teklif-basi-sag input {
	font: inherit; height: 38px; width: 175px; text-align: right;
	border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface);
	color: var(--ink); padding: 0 12px;
}

/* Bayi adı bandı */
.teklif-bayi {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 0; padding: 16px 34px;
	border-bottom: 1px solid var(--line);
	font-size: 15px;
}
.teklif-bayi strong { font-family: var(--font-head); font-weight: 400; font-size: 20px; }
.etiketcik {
	font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 600; color: var(--ink-faint);
}
.duzenle-bagi { margin-left: auto; font-size: 12.5px; font-weight: 600; text-decoration: none; }

.teklif-bolum { padding: 26px 34px 0; }
.teklif-bolum h2 { font-size: 20px; margin: 0 0 14px; }
.teklif-bolum .satir-2, .teklif-bolum .satir-3 { margin-bottom: 16px; }
.teklif-bolum label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; }
.teklif-bolum input[type="text"], .teklif-bolum input[type="tel"],
.teklif-bolum input[type="email"], .teklif-bolum textarea, .teklif-bolum select {
	font: inherit; font-weight: 400; height: 44px; padding: 0 14px;
	border: 1px solid var(--line-strong); border-radius: 3px;
	background: var(--surface); color: var(--ink); width: 100%;
}
.teklif-bolum textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }

/* Satır tablosu */
.teklif-tablo-kaydir { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.teklif-tablo { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 13.5px; }
.teklif-tablo th {
	text-align: left; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-faint); background: var(--surface-2); font-weight: 600;
	padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.teklif-tablo td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.teklif-tablo tr:last-child td { border-bottom: none; }
.teklif-tablo input, .teklif-tablo select {
	font: inherit; font-size: 13.5px; height: 36px; padding: 0 10px; width: 100%;
	border: 1px solid var(--line-strong); border-radius: 3px;
	background: var(--surface); color: var(--ink);
}
.teklif-tablo .urun-sec { margin-bottom: 6px; }
.teklif-tablo .satir-ad { font-weight: 600; margin-bottom: 6px; }
.teklif-tablo .satir-aciklama { font-size: 12.5px; }
.teklif-tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }

.teklif-tablo .s-no { width: 40px; }
.teklif-tablo .s-urun { min-width: 300px; }
.teklif-tablo .s-birim { width: 110px; }
.teklif-tablo .s-miktar { width: 100px; }
.teklif-tablo .s-fiyat { width: 130px; }
.teklif-tablo .s-kdv { width: 90px; }
.teklif-tablo .s-toplam { width: 140px; text-align: right; }
.teklif-tablo .s-islem { width: 44px; text-align: center; }

.sira-no {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--surface-2); color: var(--ink-muted);
	font-size: 12px; font-weight: 600; margin-top: 5px;
}
.satir-toplam { display: inline-block; margin-top: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.satir-sil {
	width: 30px; height: 30px; margin-top: 3px; border-radius: 3px; cursor: pointer;
	border: 1px solid var(--line-strong); background: var(--surface);
	color: var(--ink-faint); font-size: 18px; line-height: 1;
	transition: all var(--gecis);
}
.satir-sil:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

/* Alt: notlar + toplamlar */
.teklif-alt {
	display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px;
	padding: 28px 34px 0; align-items: start;
}
.teklif-notlar label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; }
.teklif-notlar textarea, .teklif-notlar select {
	font: inherit; font-weight: 400; padding: 12px 14px;
	border: 1px solid var(--line-strong); border-radius: 3px;
	background: var(--surface); color: var(--ink); width: 100%; line-height: 1.6;
}
.teklif-notlar select { height: 44px; padding: 0 14px; }

.teklif-toplam {
	background: var(--surface-2); border: 1px solid var(--line);
	border-radius: 4px; padding: 20px 22px;
}
.toplam-satir {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.toplam-satir b { font-variant-numeric: tabular-nums; font-weight: 600; }
.toplam-satir label { font-size: 13.5px; font-weight: 400; margin: 0; }
.toplam-satir input {
	font: inherit; width: 90px; height: 34px; text-align: right; padding: 0 10px;
	border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface);
	font-variant-numeric: tabular-nums;
}
.toplam-satir.genel {
	border-bottom: none; border-top: 2px solid var(--ink);
	margin-top: 6px; padding-top: 14px; font-size: 15px;
}
.toplam-satir.genel b { font-family: var(--font-head); font-weight: 400; font-size: 25px; }
.teklif-toplam .not { margin: 12px 0 0; }

.teklif-form > .butonlar { padding: 0 34px; }

/* ==========================================================================
   24. Teklif çıktısı (yazdırma sayfası)
   ========================================================================== */
.alan-teklif { background: var(--surface-2); }
.yazdir-arac {
	display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
	padding: 20px; background: var(--ink);
}
.yazdir-arac .btn-ikincil { background: transparent; color: rgba(255,255,255,0.86); border-color: rgba(255,255,255,0.3); }
.yazdir-arac .btn-ikincil:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.kagit {
	max-width: 840px; margin: 32px auto; background: #fff;
	border: 1px solid var(--line); box-shadow: var(--golge);
	padding: 48px 52px; color: var(--ink);
}
.kagit-basi { display: flex; justify-content: space-between; gap: 34px; align-items: flex-start; padding-bottom: 26px; border-bottom: 2px solid var(--ink); }
.kagit-sol { display: flex; flex-direction: column; gap: 14px; }
.kagit-logo { max-width: 230px; max-height: 90px; object-fit: contain; align-self: flex-start; }
.kagit-firma { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-muted); }
.kagit-firma strong { font-family: var(--font-head); font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.kagit-sag { text-align: right; flex-shrink: 0; }
.kagit-sag h1 { font-size: 30px; letter-spacing: 0.1em; margin: 0 0 14px; }
.kagit-sag dl { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 0; font-size: 12.5px; text-align: right; }
.kagit-sag dt { color: var(--ink-faint); }
.kagit-sag dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.kagit-musteri { display: flex; flex-direction: column; gap: 2px; padding: 22px 0; font-size: 13.5px; color: var(--ink-muted); border-bottom: 1px solid var(--line); }
.kagit-musteri strong { font-size: 17px; color: var(--ink); margin-bottom: 3px; }

.kagit-tablo { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 13px; }
.kagit-tablo th {
	text-align: left; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-faint); font-weight: 600; padding: 9px 8px; border-bottom: 1px solid var(--line-strong);
}
.kagit-tablo td { padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kagit-tablo .k-no { width: 32px; color: var(--ink-faint); }
.kagit-tablo .k-ad strong { display: block; font-weight: 600; }
.kagit-tablo .k-ad span { display: block; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.kagit-tablo .k-birim { width: 70px; }
.kagit-tablo .k-miktar, .kagit-tablo .k-fiyat, .kagit-tablo .k-kdv, .kagit-tablo .k-toplam {
	text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kagit-tablo .k-toplam { font-weight: 600; }
.kagit-tablo th.k-miktar, .kagit-tablo th.k-fiyat, .kagit-tablo th.k-kdv, .kagit-tablo th.k-toplam { text-align: right; }

.kagit-alt { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; margin-top: 10px; align-items: start; }
.kagit-notlar h3 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; color: var(--ink-faint); margin: 0 0 8px; }
.kagit-notlar p { font-size: 12.5px; color: var(--ink-muted); line-height: 1.65; margin: 0; }
.kagit-toplam div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.kagit-toplam b { font-variant-numeric: tabular-nums; }
.kagit-toplam .genel { border-bottom: none; border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 12px; font-size: 15px; }
.kagit-toplam .genel b { font-family: var(--font-head); font-weight: 400; font-size: 23px; }

.kagit-dip {
	margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
	display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
	font-size: 11.5px; color: var(--ink-faint);
}

@media (max-width: 1000px) {
	.teklif-basi { grid-template-columns: 1fr; gap: 20px; text-align: left; }
	.teklif-basi-orta { text-align: left; }
	.teklif-basi-sag { align-items: flex-start; }
	.teklif-basi-sag label { align-items: flex-start; }
	.teklif-basi-sag input { text-align: left; width: 100%; }
	.teklif-no { align-items: flex-start; }
	.teklif-no input { text-align: left; width: 100%; }
	.teklif-alt { grid-template-columns: 1fr; gap: 24px; }
	.logo-alani { grid-template-columns: 1fr; }
	.kagit-alt { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.teklif-basi, .teklif-bayi, .teklif-bolum, .teklif-alt, .teklif-form > .butonlar { padding-left: 20px; padding-right: 20px; }
	.teklif-basi-orta h1 { font-size: 22px; }
	.kagit { padding: 26px 22px; margin: 16px; }
	.kagit-basi { flex-direction: column; }
	.kagit-sag { text-align: left; }
	.kagit-sag dl { text-align: left; justify-content: start; }
	.talep-karti { padding: 20px; }
}

@media print {
	.yazdir-arac { display: none !important; }
	.alan-teklif { background: #fff; }
	.kagit { max-width: none; margin: 0; border: none; box-shadow: none; padding: 0; }
	.kagit-tablo { font-size: 10.5pt; }
	.kagit-tablo tr { break-inside: avoid; }
	.kagit-alt, .kagit-dip { break-inside: avoid; }
	@page { margin: 14mm; }
}

/* ==========================================================================
   25. Ana sayfa odak bölümleri
   ========================================================================== */

/* --- Yeteneklerimiz: ince çizgiyle ayrılmış kart dizisi --- */
.yetenek-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
}
.yetenek {
	background: var(--surface);
	padding: 30px 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bolum-alt .yetenek { background: var(--bg); }
.yetenek-ikon {
	width: 28px; height: 28px; margin-bottom: 8px;
	fill: none; stroke: var(--accent); stroke-width: 1.5;
	stroke-linecap: round; stroke-linejoin: round;
}
.yetenek-kisa {
	font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 600; color: var(--sun);
}
.yetenek h3 { font-size: 19px; margin: 0; line-height: 1.24; }
.yetenek p { font-size: 13.5px; color: var(--ink-muted); margin: 0; }

/* --- Ürün çeşitleri --- */
.cesit-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 18px;
}
.cesit-kart {
	display: flex; flex-direction: column; gap: 10px;
	background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
	padding: 26px 26px 22px; text-decoration: none; color: var(--ink);
	transition: border-color var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.bolum-alt .cesit-kart { background: var(--bg); }
.cesit-kart:hover { border-color: var(--ink-faint); transform: translateY(-3px); box-shadow: var(--golge); }
.cesit-kart h3 { font-size: 21px; margin: 0; line-height: 1.24; }
.cesit-kart p { font-size: 13.5px; color: var(--ink-muted); margin: 0; flex: 1; }
.cesit-alt {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line);
}
.cesit-sayi { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); }
.cesit-sayi span { white-space: nowrap; }

.cesit-marka { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--line); }
.cesit-marka .bolum-basligi { margin-bottom: 16px; }
.marka-serit { display: flex; flex-wrap: wrap; gap: 10px; }
.marka-rozet {
	display: flex; flex-direction: column; gap: 2px;
	padding: 12px 20px; border: 1px solid var(--line-strong); border-radius: 3px;
	background: var(--surface); text-decoration: none; color: var(--ink);
	transition: border-color var(--gecis), color var(--gecis);
}
.bolum-alt .marka-rozet { background: var(--bg); }
.marka-rozet:hover { border-color: var(--accent); color: var(--accent); }
.marka-rozet strong { font-family: var(--font-head); font-weight: 400; font-size: 16px; }
.marka-rozet small { font-size: 11px; color: var(--ink-faint); }
.marka-rozet.oz small { color: var(--sun); }

/* --- Yaptığımız işler --- */
.proje-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 26px;
}
.proje-kart {
	display: flex; flex-direction: column;
	text-decoration: none; color: var(--ink);
	transition: transform var(--gecis);
}
.proje-kart:hover { transform: translateY(-3px); }
.proje-kapak {
	aspect-ratio: 4 / 3; background: var(--surface-3);
	border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.proje-kapak img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.proje-kart:hover .proje-kapak img { transform: scale(1.04); }
.proje-metin { padding: 18px 2px 0; display: flex; flex-direction: column; gap: 8px; }
.proje-metin h3 { font-size: 22px; margin: 0; line-height: 1.22; }
.proje-metin p { font-size: 13.5px; color: var(--ink-muted); margin: 0; }

/* --- YouTube kanalı: kapak ızgarası --- */
/* Uc sutun sabit: ana sayfada alti video, iki tam sirada oturuyor. */
.video-izgara {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px 24px;
}
.video-kart {
	display: flex; flex-direction: column;
	text-decoration: none; color: var(--ink);
	transition: transform var(--gecis);
}
.video-kart:hover { transform: translateY(-3px); }
.video-kapak {
	position: relative;
	aspect-ratio: 16 / 9; background: var(--surface-3);
	border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
/* Kapak YouTube'dan 4:3 gelir; cover ile ust/alt siyah bantlar kirpilir. */
.video-kapak img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 600ms cubic-bezier(0.22,0.61,0.36,1);
}
.video-kart:hover .video-kapak img { transform: scale(1.04); }
.video-oynat {
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 38px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 10px rgba(30,34,37,0.28);
	transition: background var(--gecis), transform var(--gecis);
}
.video-oynat svg { width: 22px; height: 22px; fill: var(--ink); stroke: none; }
.video-kart:hover .video-oynat { background: #c00000; transform: scale(1.07); }
.video-kart:hover .video-oynat svg { fill: #fff; }
.video-sure {
	position: absolute; right: 8px; bottom: 8px;
	padding: 2px 6px; border-radius: 3px;
	background: rgba(24,26,28,0.84); color: #fff;
	font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.video-metin { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.video-metin h3 { font-size: 19px; margin: 0; line-height: 1.26; font-weight: 400; }
.video-dip { margin: 32px 0 0; font-size: 13.5px; color: var(--ink-muted); }
.video-dip a { color: var(--accent); font-weight: 600; }

/* --- Küçük düzen yardımcıları (satır içi style yerine) --- */
.olcu-arali { margin-top: 34px; }
.izgara-araligi { margin-top: 46px; }
.izgara-araligi + .izgara-araligi { margin-top: 64px; }
.filtre-alt { margin: 34px 0 0; }
.arama-dar { max-width: 560px; margin-bottom: 34px; }

@media (max-width: 1000px) {
	.yetenek-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.proje-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.video-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 640px) {
	.yetenek-izgara { grid-template-columns: 1fr; }
	.yetenek { padding: 24px 22px; }
	.cesit-izgara { grid-template-columns: 1fr; gap: 14px; }
	.cesit-kart { padding: 22px 20px 18px; }
	.proje-izgara { grid-template-columns: 1fr; gap: 24px; }
	.proje-metin h3 { font-size: 19px; }
	.video-izgara { grid-template-columns: 1fr; gap: 22px; }
	.video-metin h3 { font-size: 17.5px; }
	.cesit-marka { margin-top: 30px; padding-top: 24px; }
	.marka-rozet { padding: 10px 16px; }
	.izgara-araligi { margin-top: 32px; }
}

@media print {
	.yetenek-izgara, .cesit-izgara, .proje-izgara, .video-izgara { display: block; }
	.yetenek, .cesit-kart { border: 1px solid #ddd; margin-bottom: 8pt; }
}

.olcu-alti { margin-bottom: 38px; }

/* ==========================================================================
   26. Yönetim · veritabanı güncelleme kartı
   ========================================================================== */

.bakim {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px 24px;
	margin-bottom: 16px;
}
.bakim .not { margin: 14px 0 0; }
.bakim .not + .bakim-form { margin-top: 18px; }

.bakim-durum {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 6px 22px;
}
.bakim-durum li {
	position: relative;
	padding-left: 24px;
	font-size: 13.5px;
	color: var(--ink-muted);
	line-height: 1.7;
}
.bakim-durum li::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	text-align: center;
	font-weight: 600;
}
.bakim-durum li.tamam::before { content: "✓"; color: var(--ok); }
.bakim-durum li.eksik::before { content: "!"; color: var(--warn); }
.bakim-durum li.eksik { color: var(--ink); font-weight: 500; }

.bakim-form {
	margin-top: 18px;
	padding: 0;
	border: none;
	background: none;
	max-width: 520px;
}
.bakim-form input { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.bakim-form .btn { align-self: flex-start; }

@media (max-width: 640px) {
	.bakim { padding: 18px 18px; }
	.bakim-durum { grid-template-columns: 1fr; }
	.bakim-form .btn { width: 100%; }
}

/* ==========================================================================
   27. Yönetim · ürün içe aktarma
   ========================================================================== */

.rozet-uyari { color: var(--warn); background: var(--warn-soft); }

.basi-eylem { display: inline-flex; gap: 8px; flex-wrap: wrap; }

.ice-yardim {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px 24px;
	margin: 22px 0 8px;
}
.ice-yardim h2 { margin: 0 0 12px; font-size: 19px; }
.ice-yardim .tablo-kaydir { border: none; background: none; }
.ice-ornek { font-size: 12.5px; }
.ice-ornek th { white-space: nowrap; }
.ice-ornek td { color: var(--ink-muted); white-space: nowrap; }

.ice-notlar {
	margin: 16px 0 0;
	padding-left: 20px;
	font-size: 13.5px;
	color: var(--ink-muted);
	line-height: 1.75;
}
.ice-notlar code {
	font-size: 12.5px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 1px 5px;
}

.ice-alan {
	min-height: 220px;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

.tablo tr.satir-hatali { background: var(--warn-soft); }
.tablo tr.satir-hatali td { color: var(--ink); }

@media (max-width: 640px) {
	.ice-yardim { padding: 18px 18px; }
	.basi-eylem { width: 100%; }
	.basi-eylem .btn { flex: 1; }
}

/* ==========================================================================
   29. 3 Boyutlu Konfigüratör
   ========================================================================== */

.konfig-sayfa {
	max-width: 1360px;
	margin: 0 auto;
	padding: 34px 28px 72px;
}
.konfig-basi {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
}
.konfig-basi h1 { font-size: 34px; margin: 8px 0 0; }

.konfig-duzen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: 44px;
	align-items: start;
}

/* ---- Sahne ---- */
.konfig-sahne-sutun {
	position: sticky;
	top: 92px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.konfig-sahne {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-3) 100%);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	color: var(--ink-muted);
}
.konfig-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.konfig-yerlesim {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.konfig-sahne.fotografli .konfig-yerlesim {
	inset: auto;
	left: 50%;
	top: 50%;
	width: 60%;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 18px 26px rgba(20, 22, 24, 0.34));
}
.konfig-cizim { width: 100%; height: auto; display: block; }
.konfig-sahne.fotografli .konfig-olcu-cizgi { display: none; }

.konfig-sahne-alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.konfig-olcu-etiket {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	color: var(--ink-muted);
}
.konfig-sahne-eylem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.konfig-yerlestirme {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 16px 18px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.konfig-yerlestirme-basi {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-faint);
}
.konfig-yerlestirme label { display: flex; flex-direction: column; gap: 5px; }
.konfig-yerlestirme input[type="range"] { width: 100%; accent-color: var(--accent); }

.konfig-foto-form {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.konfig-foto-form[hidden] { display: none; }

/* ---- Seçenek paneli ---- */
.konfig-panel { display: flex; flex-direction: column; gap: 30px; }
.konfig-blok { display: flex; flex-direction: column; gap: 12px; }
.konfig-blok h2 {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-faint);
	margin: 0;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--line);
}
.konfig-blok .not { margin: -2px 0 2px; }

.konfig-olculer { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.konfig-olculer label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; }
.konfig-olculer input {
	height: 44px;
	padding: 0 12px;
	font: inherit;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--line-strong);
	border-radius: 3px;
	background: var(--surface);
	color: var(--ink);
}
.konfig-olculer input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.konfig-secenekler { display: grid; gap: 8px; }
.konfig-kart { grid-template-columns: 1fr; }
.konfig-renk { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.konfig-kumas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.konfig-secenek { position: relative; }
.konfig-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konfig-secenek label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	transition: border-color var(--gecis), background var(--gecis);
}
.konfig-renk label,
.konfig-kumas label { flex-direction: column; align-items: stretch; gap: 9px; }

.konfig-secenek label:hover { border-color: var(--ink-faint); }
.konfig-secenek input:checked + label {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
	background: var(--accent-soft);
}
.konfig-secenek input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.konfig-secenek.kapali label { opacity: 0.5; cursor: not-allowed; background: var(--bg); }
.konfig-secenek.kapali label:hover { border-color: var(--line); }

.konfig-secenek-gorsel { flex: none; display: block; }
.konfig-secenek-gorsel img { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; display: block; }
.konfig-renk .konfig-secenek-gorsel,
.konfig-kumas .konfig-secenek-gorsel { width: 100%; }
.konfig-renk .konfig-secenek-gorsel img,
.konfig-kumas .konfig-secenek-gorsel img { width: 100%; height: 54px; }

.konfig-renk-pastil { display: block; }
.konfig-secenek .konfig-renk {
	display: block;
	width: 100%;
	height: 42px;
	border-radius: 3px;
	border: 1px solid rgba(20, 22, 24, 0.18);
}
.konfig-kart .konfig-renk { width: 46px; height: 46px; }

.konfig-secenek .konfig-kumas {
	display: block;
	width: 100%;
	height: 54px;
	border-radius: 3px;
	border: 1px solid rgba(20, 22, 24, 0.18);
	background-color: #4b5155;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.78) 0.8px, transparent 0.9px);
	background-size: 7px 7px;
}
.konfig-secenek .konfig-kumas[data-gecirgenlik="0"] { background-image: none; }
.konfig-secenek .konfig-kumas[data-gecirgenlik="1"] { background-size: 9px 9px; }
.konfig-secenek .konfig-kumas[data-gecirgenlik="3"] { background-size: 6px 6px; }
.konfig-secenek .konfig-kumas[data-gecirgenlik="5"] { background-size: 4.5px 4.5px; }

.konfig-simge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 3px;
	background: var(--bg);
	border: 1px solid var(--line);
	font-family: var(--font-head);
	font-size: 20px;
	color: var(--ink-muted);
}

.konfig-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.konfig-metin strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.konfig-metin small { font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; }
.konfig-gerekce { color: var(--warn); }

.konfig-notlar {
	background: var(--warn-soft);
	border: 1px solid #e2c79a;
	border-radius: 3px;
	padding: 13px 15px;
}
.konfig-notlar p { margin: 0; font-size: 13px; color: var(--ink); }
.konfig-notlar p + p { margin-top: 7px; }
.konfig-notlar[hidden] { display: none; }

.konfig-ozet dl { margin: 0; display: flex; flex-direction: column; }
.konfig-ozet dl > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dotted var(--line);
	font-size: 13.5px;
}
.konfig-ozet dt { color: var(--ink-muted); }
.konfig-ozet dd { margin: 0; font-weight: 600; text-align: right; }
.konfig-ozet .butonlar { margin-top: 14px; }

@media (max-width: 1100px) {
	.konfig-duzen { grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; }
}

@media (max-width: 900px) {
	.konfig-sayfa { padding: 24px 20px 56px; }
	.konfig-duzen { grid-template-columns: 1fr; gap: 30px; }
	.konfig-sahne-sutun { position: static; }
	.konfig-basi h1 { font-size: 27px; }
	.konfig-yerlestirme { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
	.konfig-olculer { grid-template-columns: 1fr; }
	.konfig-renk { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media print {
	.konfig-panel,
	.konfig-sahne-alt,
	.konfig-yerlestirme,
	.konfig-foto-form { display: none; }
}

/* ==========================================================================
   30. Üst duyuru şeridi — kayan yazı
   ========================================================================== */
.serit {
	background: linear-gradient(90deg, #fdf6ec 0%, #f7ecdb 50%, #fdf6ec 100%);
	border-bottom: 1px solid #ead8b8;
	font-size: 13px;
	position: relative;
	/* Yapisan ust menu (.ust, z-index 50) serit uzerinde kalmali */
	z-index: 49;
}
.serit-ic {
	max-width: var(--kap);
	margin: 0 auto;
	padding: 0 var(--yan);
	height: 42px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.serit-basi {
	flex-shrink: 0;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	background: var(--sun);
	padding: 5px 11px;
	border-radius: 2px;
}
.serit-yol { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.serit-akis {
	display: flex;
	width: max-content;
	animation-name: serit-kay;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.serit-sira { display: flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; }
@keyframes serit-kay {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.serit:hover .serit-akis,
.serit:focus-within .serit-akis { animation-play-state: paused; }

.serit-oge { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.serit-oge:hover .serit-yazi { text-decoration: underline; }
.serit-yazi { font-weight: 500; }
.serit-tur {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--line-strong);
	color: var(--ink-muted);
}
.serit-tur.t-fuar    { background: var(--accent-soft); border-color: #c9d3ea; color: var(--accent-ink); }
.serit-tur.t-indirim { background: var(--ok-soft);     border-color: #c3ddce; color: var(--ok); }
.serit-tur.t-fiyat   { background: var(--warn-soft);   border-color: #ead8b8; color: var(--warn); }
.serit-tur.t-acil    { background: var(--danger);      border-color: var(--danger); color: #fff; }
.serit-kalan {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--danger);
	background: var(--danger-soft);
	padding: 2px 8px;
	border-radius: 999px;
}
.serit-kapat {
	flex-shrink: 0;
	border: 0;
	background: none;
	color: var(--ink-faint);
	font-size: 20px;
	line-height: 1;
	padding: 4px 6px;
	cursor: pointer;
	border-radius: 2px;
}
.serit-kapat:hover { color: var(--ink); background: rgba(30, 34, 37, 0.06); }

@media (max-width: 720px) {
	.serit-ic { gap: 12px; padding: 0 20px; }
	.serit-basi-uzun { display: none; }
	.serit-sira { gap: 28px; padding-right: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.serit-yol { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.serit-akis { animation: none; width: auto; }
	.serit-sira + .serit-sira { display: none; }
}

/* ==========================================================================
   31. Kataloglar için bayi girişi
   ========================================================================== */
.katalog-giris {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	background: var(--accent-soft);
	border: 1px solid #ccd6ec;
	border-radius: 4px;
	padding: 18px 22px;
	margin: 0 0 26px;
}
.katalog-kilit {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface);
	border: 1px solid #ccd6ec;
	border-radius: 999px;
}
.katalog-kilit svg { width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 1.6; }
.katalog-metin strong { display: block; font-size: 15px; font-weight: 600; color: var(--accent-ink); }
.katalog-metin p { margin: 3px 0 0; font-size: 13px; color: var(--ink-muted); }
.katalog-eylem { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
	.katalog-giris { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
	.katalog-eylem { grid-column: 1 / -1; }
}

/* Kütüphane satırlarındaki dosya uzantısı ve şerit rozeti */
.dosya-uzanti {
	font-size: 10px;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--ink-faint);
	border: 1px solid var(--line-strong);
	border-radius: 2px;
	padding: 1px 5px;
	margin-left: 6px;
	vertical-align: 1px;
}
.pill-serit { background: var(--sun-soft); color: var(--sun); }

/* Yönetim formlarında alan kutusu */
.alan-kutu {
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface-2);
	padding: 18px 20px 6px;
	margin: 6px 0 4px;
}
.alan-kutu legend {
	font-family: var(--font-head);
	font-size: 16px;
	padding: 0 8px;
	color: var(--ink);
}
.alan-kutu .not:first-of-type { margin-top: 0; }

/* ==========================================================================
   30. Konfigüratör · 3B sahne
   ========================================================================== */

.konfig-3b-tuval {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	touch-action: none;          /* döndürme sırasında sayfa kaymasın */
	cursor: grab;
}
.konfig-3b-tuval:active { cursor: grabbing; }

/* 3B devredeyken yerleşim kabı sahneyi tamamen kaplar */
.konfig-sahne.uc-boyutlu .konfig-yerlesim {
	inset: 0;
	left: auto;
	top: auto;
	width: 100%;
	transform: none;
	filter: none;
}
.konfig-sahne.uc-boyutlu .konfig-olcu-cizgi { display: none; }

/* Fotoğraf üstüne yerleştirme 3B'de geçerli değil: model kendi sahnesinde
   döner, fotoğrafa perspektif uydurma bu sürümde yok. */
.konfig-sahne.uc-boyutlu .konfig-foto { opacity: 0.35; }

.konfig-sahne.yukleniyor::after {
	content: "3 boyutlu model yükleniyor…";
	position: absolute;
	inset: auto 0 14px 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--ink-faint);
}

.konfig-3b-ipucu {
	margin: 0;
	font-size: 12px;
	color: var(--ink-faint);
}
.konfig-sahne:not(.uc-boyutlu) ~ .konfig-sahne-alt .konfig-3b-ipucu { display: none; }

@media print {
	.konfig-3b-tuval { display: none; }
}

/* ==========================================================================
   32. Fiyat talebi formu (Ferrini'den teklif isteme)
   Teklif Düzenleme Formu ile aynı iskeleti kullanır; buradaki kurallar
   yalnızca poz tablosunun sütun genişlikleri ve onay kutuları içindir.
   ========================================================================== */

/* Tarih ve sayı alanları da diğer form alanlarıyla aynı görünsün. */
.teklif-bolum input[type="date"],
.teklif-bolum input[type="number"] {
	font: inherit; font-weight: 400; height: 44px; padding: 0 14px;
	border: 1px solid var(--line-strong); border-radius: 3px;
	background: var(--surface); color: var(--ink); width: 100%;
}

/* Onay kutusu satır düzeninde; .teklif-bolum label sütun düzenini geçersiz kılar. */
.teklif-bolum label.onay-satiri {
	flex-direction: row;
	align-items: center;
	gap: 10px;
	margin: 26px 0 8px;
	font-weight: 500;
}
.teklif-bolum label.onay-satiri input[type="checkbox"] {
	width: 18px; height: 18px; flex: none; accent-color: var(--accent);
}

.poz-tablosu .p-no { width: 40px; }
.poz-tablosu .p-adet { width: 80px; }
.poz-tablosu .p-islem { width: 44px; text-align: center; }
.poz-tablosu .p-en, .poz-tablosu .p-boy { width: 104px; }
.poz-tablosu .p-yon { width: 96px; }
.poz-tablosu .p-not { min-width: 210px; }
.poz-tablosu td select { min-width: 132px; }
.poz-tablosu td input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.poz-tablosu .sira-no { margin-top: 3px; }

/* Görüntüleme ekranındaki poz tablosu salt okunur: satırlar sıkışık dursun. */
.teklif-tablo td.p-adet, .teklif-tablo td.p-no { white-space: nowrap; }

/* ==========================================================================
   33. Paylaşılan tasarım — salt okunur sunum sayfası
   ========================================================================== */

/* .konfig-panel display:flex olduğu için tarayıcının [hidden] kuralını
   eziyordu: sunum sayfasındaki gizli girdi formu ekranda görünüyordu. */
.konfig-panel[hidden] { display: none; }

.sunum-sayfa .konfig-basi { align-items: flex-start; }
.sunum-duzen { grid-template-columns: minmax(0, 1fr) 380px; }
.sunum-ozet { gap: 26px; }
.sunum-ozet .konfig-ozet .not { margin-top: 14px; }

@media (max-width: 900px) {
	.sunum-duzen { grid-template-columns: 1fr; }
	.sunum-sayfa .konfig-sahne-sutun { position: static; }
}

/* Aç / kapat düğmesi yazdırmada anlamsız */
@media print {
	#konfig-ackapa { display: none; }
}

/* ==========================================================================
   34. Fiyat talebi ekleri — çizim ve ölçü dosyaları
   ========================================================================== */

.ek-liste {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 16px;
}
.ek-satiri {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	font-size: 13.5px;
}
.ek-satiri:last-child { border-bottom: none; }
.ek-ad { font-weight: 600; color: var(--ink); text-decoration: none; word-break: break-all; }
.ek-ad:hover { color: var(--accent); text-decoration: underline; }
.ek-boyut { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* Silme kutusu sağa yaslanır: satırı okurken göze çarpmasın, ararken bulunsun. */
.ek-sil {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-muted);
	cursor: pointer;
}
.ek-sil input { width: 15px; height: 15px; accent-color: var(--danger); }

.teklif-bolum input[type="file"] {
	font: inherit;
	font-size: 13px;
	padding: 10px 12px;
	border: 1px dashed var(--line-strong);
	border-radius: 3px;
	background: var(--surface);
	width: 100%;
}

@media print {
	.ek-sil { display: none; }
}

/* Tek teklif arayüzü: büyük bırakma alanı. Dosya girdisinin kendisi alanın
   tamamını kaplar; böylece tıklama da sürükle-bırak da ek JS istemez. */
.tt-yukle {
	position: relative;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 34px 20px;
	border: 1.5px dashed var(--line-strong);
	border-radius: 4px;
	background: var(--bg);
	transition: border-color var(--gecis), background var(--gecis);
}
.tt-yukle:hover, .tt-yukle:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.tt-yukle-baslik { font-size: 15px; font-weight: 600; color: var(--ink); }
.tt-yukle-not { font-size: 12.5px; font-weight: 400; color: var(--ink-muted); }
.teklif-bolum .tt-yukle input[type="file"] {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: 0; cursor: pointer;
}
.tt-secilen {
	list-style: none; margin: -4px 0 12px; padding: 0;
	border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
	font-size: 13px;
}
.tt-secilen li { padding: 9px 14px; border-bottom: 1px solid var(--line); word-break: break-all; }
.tt-secilen li:last-child { border-bottom: none; }
.tt-secilen li.tt-hatali { color: var(--danger); background: var(--danger-soft); }
.tt-adres {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.tt-adres p { margin: 0; }
.tt-form { margin-bottom: 48px; }

/* Talep sayfasında görsel ekleri küçük önizlemeyle */
.ek-onizleme {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
	margin-bottom: 16px;
}
.ek-onizleme a {
	display: block; aspect-ratio: 4 / 3; overflow: hidden;
	border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.ek-onizleme img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   35. Bayi haritası (yönetim)
   Turkiye il haritasi + il basina kayit yogunlugu. Cizim verisi
   inc/harita-iller.php icinde; buradaki kurallar yalnizca renk ve
   etkilesimi tanimlar.
   ========================================================================== */

.harita-alani { max-width: 1120px; }

.harita-secim {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 16px;
}
.harita-katman { display: flex; flex-wrap: wrap; gap: 6px; }

.harita {
	margin: 0 0 20px;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 5px;
}
.harita svg { display: block; width: 100%; height: auto; }

/* Iller birer baglantidir: tiklayinca o ilin kayitlari acilir. Baglanti
   oldugu icin klavyeyle de gezilebilir; odak halkasi bilerek birakildi. */
.harita .il {
	fill: #e9eaec;
	stroke: #fff;
	stroke-width: 0.7;
	stroke-linejoin: round;
	transition: fill .12s ease;
}
/* Yogunluk basamaklari: tema mavisinin giderek koyulasan tonlari.
   En acik basamak bile bos ilden (gri) ayirt edilebilmeli. */
.harita .il.y1 { fill: #dbe2f0; }
.harita .il.y2 { fill: #b9c6e4; }
.harita .il.y3 { fill: #8fa3d3; }
.harita .il.y4 { fill: #5e77bb; }
.harita .il.y5 { fill: var(--accent); }
.harita a:hover .il,
.harita a:focus-visible .il { fill: #c8892f; }
.harita .il.secili { stroke: #1e2225; stroke-width: 1.6; }

.harita-olcek {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--ink-muted);
}
.harita-olcek i { width: 22px; height: 10px; border-radius: 2px; display: inline-block; }
.harita-olcek i.y1 { background: #dbe2f0; }
.harita-olcek i.y2 { background: #b9c6e4; }
.harita-olcek i.y3 { background: #8fa3d3; }
.harita-olcek i.y4 { background: #5e77bb; }
.harita-olcek i.y5 { background: var(--accent); }
.harita-olcek em { margin-left: auto; font-style: normal; }

/* Secili ilin kayitlari. Harita ekranin ustunde ve yuksek oldugu icin bu
   panel capayla acilir (#il); kart gorunumu de "iste sonuc burada" demenin
   gorsel yolu — duz bir baslik, haritanin altinda kaybolup gidiyordu. */
.harita-il {
	margin: 0 0 22px;
	padding: 18px 20px 4px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 5px;
	/* Capayla gelindiginde baslik ekranin en tepesine yapismasin. */
	scroll-margin-top: 16px;
}
.harita-il-bas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}
.harita-il-bas h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.harita-il h3 { font-size: 15px; margin-top: 18px; }
.harita-il-adet {
	font-family: inherit;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.il-listesi {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 2px 10px;
}
.il-listesi a,
.il-listesi span {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 13px;
	text-decoration: none;
	color: var(--ink);
}
.il-listesi a:hover { background: var(--surface-2); }
.il-listesi b { color: var(--ink-muted); font-weight: 400; }
.il-listesi li.sifir a { color: var(--ink-faint); }
.il-listesi li.sifir b { color: var(--ink-faint); }

.harita-liste summary { cursor: pointer; font-size: 14px; }

.eslesmez { margin: 0 0 18px; }
.eslesmez summary { cursor: pointer; font-size: 14px; }
.tablo .yok { color: var(--ink-faint); }

.aciklama-kutu {
	margin-top: 22px;
	padding: 16px 18px;
	background: var(--surface-2);
	border-radius: 5px;
	font-size: 14px;
}
.aciklama-kutu h2 { font-size: 16px; }
.sutun-listesi { margin: 8px 0; padding-left: 20px; columns: 3; font-size: 13px; }

@media (max-width: 700px) {
	.sutun-listesi { columns: 2; }
	.harita { padding: 8px; }
}

/* ==========================================================================
   Yönetim formları · İçerik çevirileri (yazı, doküman, ürün)
   Her dil bir <details> paneli; JS yok, CSP'ye takılmaz.
   ========================================================================== */

.ceviriler { padding-bottom: 14px; }
.ceviri-dil {
	border: 1px solid var(--line);
	border-radius: 4px;
	background: var(--surface);
	margin-top: 8px;
}
.ceviri-dil > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
}
.ceviri-dil > summary code { font-weight: 400; color: var(--ink-faint); font-size: 12px; }
.ceviri-dil[open] > summary { border-bottom: 1px solid var(--line); }
.ceviri-durum {
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ink-faint);
	background: var(--surface-2);
	border-radius: 999px;
	padding: 2px 10px;
}
.ceviri-durum-dolu { color: var(--ok); background: var(--ok-soft); }
.ceviri-alanlar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px;
}
.ceviri-alanlar > .not { margin: 0; }