/*
Theme Name: OGS Otomasyon
Theme URI: https://ogsotomasyon.com
Author: OGS Otomasyon ve Mühendislik
Description: OGS Otomasyon için özel geliştirilmiş hafif kurumsal + endüstriyel ürün kataloğu teması. Sayfa oluşturucu kullanmaz, harici font/JS yüklemez.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ogs
Tags: custom-theme, industrial, catalog
*/

/* ==========================================================================
   1. TASARIM DEĞİŞKENLERİ (Design Tokens)
   Palet logodan türetilmiştir: logo monokromdur (#000 → #707070 gradyan),
   bu yüzden nötr eksen logodan, aksan rengi endüstri konvansiyonundan gelir.
   Kurumsal renk netleşirse SADECE --ogs-accent değiştirilir.
   ========================================================================== */

:root {
	/* --- Nötr eksen: doğrudan logodan --- */
	--ogs-black:        #000000;  /* logo ana rengi */
	--ogs-ink:          #101112;  /* metin siyahı (saf siyahtan bir tık yumuşak) */
	--ogs-graphite:     #1c1e21;  /* koyu yüzey: footer, hero */
	--ogs-steel:        #3a3d42;  /* ikincil koyu */
	--ogs-gray:         #707070;  /* logo gradyanının açık ucu */
	/* İkincil metin. #8b9096 idi — beyaz üzerinde 3,22:1 veriyordu ve
	   WCAG AA (4,5:1) eşiğinin altındaydı. #5f656c beyazda 5,9:1,
	   açık gri zeminde (#f4f6f8) 5,4:1 verir. */
	--ogs-gray-mid:     #5f656c;  /* ikincil metin */
	/* Koyu zeminlerde (footer, hero) kullanılan açık ikincil ton —
	   #1c1e21 üzerinde 6,3:1. */
	--ogs-gray-soft:    #a9b0b7;
	--ogs-gray-line:    #dfe2e6;  /* çizgi / kenarlık */
	--ogs-gray-bg:      #f4f6f8;  /* açık zemin */
	--ogs-white:        #ffffff;

	/* --- Aksan: logoda YOK, seçildi (endüstriyel sinyal rengi) --- */
	--ogs-accent:       #f5a623;
	--ogs-accent-dark:  #d78a0c;
	--ogs-accent-soft:  #fff6e6;

	/* --- Durum renkleri --- */
	--ogs-success:      #1f8f4e;
	--ogs-danger:       #c8372d;

	/* --- Tipografi: sistem fontu, harici istek yok (hız önceliği) --- */
	--ogs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	            "Helvetica Neue", Arial, sans-serif;
	--ogs-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
	                 "Liberation Mono", monospace;

	/* --- Ölçek --- */
	--ogs-wrap: 1240px;
	--ogs-gap: 24px;
	--ogs-radius: 4px;        /* teknik/sade görünüm: minimum yuvarlaklık */
	/* 72px idi; logo 42→76px büyüdüğü için header da büyüdü (19 Ağustos). */
	--ogs-header-h: 100px;
	/* Üstteki koyu iletişim şeridi. .ogs-topbar__inner min-height'ı ile
	   AYNI olmalı — sabit konumlu öğeler bu ikisinin toplamına dayanır. */
	--ogs-topbar-h: 38px;

	/* --- Gölge: çok kısıtlı kullanım --- */
	--ogs-shadow-sm: 0 1px 2px rgba(16, 17, 18, .06);
	--ogs-shadow-md: 0 4px 16px rgba(16, 17, 18, .10);
}

/* ==========================================================================
   2. RESET / TEMEL
   ========================================================================== */

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

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

body {
	margin: 0;
	font-family: var(--ogs-font);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ogs-ink);
	background: var(--ogs-white);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--ogs-ink); text-decoration: none; }
a:hover { color: var(--ogs-accent-dark); }

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -.015em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

code, pre, .ogs-code { font-family: var(--ogs-font-mono); font-size: .92em; }

hr { border: 0; border-top: 1px solid var(--ogs-gray-line); margin: 2rem 0; }

/* Odak halkası: aksan rengi (#F5A623) beyaz üzerinde 2,03:1 verir ve
   WCAG 2.2 SC 1.4.11'in 3:1 eşiğini karşılamaz. Halka koyu renkte,
   aksan ise dış katman olarak bırakıldı — koyu zeminde de görünür. */
:focus-visible {
	outline: 2px solid var(--ogs-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--ogs-accent);
	border-radius: 2px;
}

/* Koyu zeminlerde halka ters çevrilir. */
.ogs-hero :focus-visible,
.ogs-footer :focus-visible,
.ogs-topbar :focus-visible,
.ogs-section--dark :focus-visible {
	outline-color: var(--ogs-white);
}

/* Ekran okuyucu / atlama linki */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 8px; left: 8px;
	width: auto; height: auto; clip: auto;
	z-index: 999;
	background: var(--ogs-accent);
	color: var(--ogs-ink);
	padding: 10px 16px;
	font-weight: 600;
}

/* ==========================================================================
   3. YERLEŞİM
   ========================================================================== */

.ogs-wrap {
	width: 100%;
	max-width: var(--ogs-wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

.ogs-section { padding-block: clamp(44px, 6vw, 76px); }
.ogs-section--tight { padding-block: clamp(30px, 3.5vw, 44px); }
.ogs-section--gray { background: var(--ogs-gray-bg); }
.ogs-section--dark { background: var(--ogs-graphite); color: var(--ogs-white); }
.ogs-section--dark h1,
.ogs-section--dark h2,
.ogs-section--dark h3 { color: var(--ogs-white); }

.ogs-grid { display: grid; gap: var(--ogs-gap); }
.ogs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ogs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ogs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.ogs-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

@media (min-width: 1000px) {
	.ogs-content-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

/* ==========================================================================
   4. ÜST BAR + HEADER
   ========================================================================== */

.ogs-topbar {
	position: relative;
	/* Dil seçicinin açılır listesi sticky header'ın (z-index:100) ÜSTÜNDE
	   kalmalı; topbar konumsuz kalınca liste header'ın arkasında kalıp
	   tıklanamıyordu (25 Ağustos). */
	z-index: 300;
	background: var(--ogs-graphite);
	color: var(--ogs-gray-line);
	font-size: .82rem;
}

.ogs-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	min-height: 38px;
}

.ogs-topbar a { color: var(--ogs-gray-line); }
.ogs-topbar a:hover { color: var(--ogs-accent); }

.ogs-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

/* Dar ekranda adres satırı gizlenir.
   `white-space: nowrap` + uzun adres, dar ekranda SAYFANIN TAMAMINI
   yatayda taşırıyordu (20 Ağustos'ta mobil ekran görüntüsünde
   yakalandı; marka sayfasına özel değil, her sayfayı etkiliyordu).
   Adres footer'da ve İletişim sayfasında zaten var; üstte telefon ve
   e-posta kalır — mobilde asıl işe yarayanlar onlar. */
@media (max-width: 860px) {
	.ogs-topbar__item--adres { display: none; }
	.ogs-topbar__inner { justify-content: center; gap: 16px; }
}

/* Sosyal medya şeridi — sağ üst (topbar) + sağ alt (footer), logolu */
.ogs-sosyal {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ogs-sosyal li { margin: 0; }
.ogs-sosyal__bag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: inherit;
	transition: color .15s ease;
}
.ogs-sosyal__bag svg { display: block; width: 19px; height: 19px; }
.ogs-sosyal__bag:hover { color: var(--ogs-accent); }

.ogs-topbar__sosyal .ogs-sosyal__bag { color: var(--ogs-gray-line); }
.ogs-footer__sosyal { margin-left: auto; }
.ogs-footer__legal .ogs-sosyal { gap: 4px; }

/* Dil seçici — sağ üst (TR/EN + gelecekte 3 dil). Saf CSS <details>. */
.ogs-dil { position: relative; }
.ogs-dil__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
	color: var(--ogs-gray-line);
	font-size: .92rem;
	line-height: 1;
	padding: 5px 8px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 6px;
	user-select: none;
	transition: border-color .15s ease, color .15s ease;
}
.ogs-dil__btn::-webkit-details-marker { display: none; }
.ogs-dil__btn::marker { content: ''; }
.ogs-dil__btn:hover { color: #fff; border-color: var(--ogs-accent); }
/* SVG bayrak — emoji değil (Windows'ta emoji "TR"/"GB" harfine düşüyordu) */
.ogs-dil__bayrak { display: inline-flex; line-height: 0; }
.ogs-bayrak {
	display: block;
	width: 22px;
	height: 15px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.ogs-dil__ok { font-size: .8em; opacity: .8; transition: transform .15s ease; }
.ogs-dil[open] .ogs-dil__ok { transform: rotate(180deg); }
.ogs-dil__liste {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 172px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--ogs-white);
	color: var(--ogs-ink);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	box-shadow: var(--ogs-shadow-sm);
	z-index: 310;
}
.ogs-dil__oge {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 11px;
	border-radius: 6px;
	color: var(--ogs-ink);
	font-size: .92rem;
}
.ogs-dil__oge:hover,
.ogs-dil__oge:focus-visible {
	background: #eef1f3;
	color: var(--ogs-ink);
}
.ogs-dil__oge .ogs-bayrak { width: 26px; height: 17px; }
.ogs-dil__oge--secili { font-weight: 700; }
.ogs-dil__oge--secili .ogs-dil__ad { color: var(--ogs-accent); }

/* Ana sayfa haritası — doğrudan yüklenir, yanında "Konum Bul" düğmesi */
.ogs-harita {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 34px;
}
.ogs-harita__cerceve {
	flex: 1 1 360px;
	max-width: 600px;
	height: 340px;
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}
.ogs-harita__yan {
	flex: 1 1 200px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ogs-harita__pin { color: var(--ogs-accent); line-height: 0; }
.ogs-harita__adres { margin: 0; color: var(--ogs-gray); font-size: .92rem; line-height: 1.6; }
.ogs-harita__bul { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; }

/* Harita facade — tıkla-yükle placeholder (KVKK: tıklamadan Google'a istek yok) */
.ogs-harita__facade { padding: 0; overflow: hidden; }
.ogs-harita__ac {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 20px;
	border: 0;
	border-radius: inherit;
	cursor: pointer;
	font: inherit;
	color: var(--ogs-ink);
	text-align: center;
	background-color: var(--ogs-gray-bg, #eceff1);
	background-image:
		linear-gradient(var(--ogs-gray-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--ogs-gray-line) 1px, transparent 1px);
	background-size: 34px 34px;
	transition: background-color .15s ease;
}
.ogs-harita__ac:hover,
.ogs-harita__ac:focus-visible { background-color: #e2e6ea; }
.ogs-harita__ac-pin { color: var(--ogs-accent); line-height: 0; }
.ogs-harita__ac-metin { font-weight: 700; font-size: 1rem; }
.ogs-harita__ac-not { font-size: .8rem; color: var(--ogs-gray-mid); }

/* Belirgin (büyük, etiketli) sosyal medya — İletişim sayfası */
.ogs-sosyal--buyuk { display: flex; flex-wrap: wrap; gap: 14px; }
.ogs-sosyal--buyuk .ogs-sosyal__bag {
	width: auto;
	height: auto;
	gap: 10px;
	padding: 13px 24px;
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	background: var(--ogs-white);
	font-size: 1rem;
	font-weight: 600;
	color: var(--ogs-ink);
}
.ogs-sosyal--buyuk .ogs-sosyal__bag svg { width: 24px; height: 24px; }
.ogs-sosyal--buyuk .ogs-sosyal__bag--youtube svg { color: #f00; }
.ogs-sosyal--buyuk .ogs-sosyal__bag--instagram svg { color: #e1306c; }
.ogs-sosyal--buyuk .ogs-sosyal__bag--tiktok svg { color: #111; }
.ogs-sosyal--buyuk .ogs-sosyal__bag:hover {
	color: var(--ogs-ink);
	border-color: var(--ogs-ink);
	background: var(--ogs-gray-bg, #f2f4f5);
}

/* Sektörler ızgarası (Projeler + Hakkımızda) */
.ogs-sektor-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ogs-sektor-kart {
	position: relative;
	overflow: hidden;
	border-radius: var(--ogs-radius);
	aspect-ratio: 16 / 9;
}
.ogs-sektor-kart__gorsel {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.ogs-sektor-kart:hover .ogs-sektor-kart__gorsel { transform: scale(1.05); }
.ogs-sektor-kart__ad {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 14px 12px;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	background: linear-gradient(transparent, rgba(16, 17, 18, .82));
}

/* Proje foto galerisi (sade, tıklayınca lightbox) */
.ogs-galeri {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
}
.ogs-galeri__oge { margin: 0; }
.ogs-galeri__bag {
	display: block;
	overflow: hidden;
	border-radius: var(--ogs-radius);
	aspect-ratio: 4 / 3;
	background: var(--ogs-gray-bg, #f2f4f5);
	cursor: zoom-in;
}
.ogs-galeri__bag img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.ogs-galeri__bag:hover img { transform: scale(1.05); }

/* Lightbox */
body.ogs-lb-acik { overflow: hidden; }
.ogs-lb {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(16, 17, 18, .92);
}
.ogs-lb[hidden] { display: none; }
.ogs-lb__gorsel { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
.ogs-lb__dugme {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}
.ogs-lb__dugme:hover { background: rgba(255, 255, 255, .24); }
.ogs-lb__kapat { top: 18px; right: 18px; }
.ogs-lb__ok { top: 50%; transform: translateY(-50%); }
.ogs-lb__ok--sol { left: 18px; }
.ogs-lb__ok--sag { right: 18px; }
@media (max-width: 600px) {
	.ogs-lb { padding: 10px; }
	.ogs-lb__ok--sol { left: 6px; }
	.ogs-lb__ok--sag { right: 6px; }
}

.ogs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ogs-white);
	border-bottom: 1px solid var(--ogs-gray-line);
}

.ogs-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--ogs-header-h);
}

.ogs-logo { flex: 0 0 auto; }

/* Logo 42px idi → 1,8 kat = 76px (19 Ağustos).
   Header yüksekliği de birlikte büyüdü, yoksa logo taşardı. */
.ogs-logo img {
	height: 76px;
	width: auto;
	max-width: 100%;
}

/* Dar ekranda logo satırın tamamını yemesin. */
@media (max-width: 1100px) {
	.ogs-logo img { height: 60px; }
}

@media (max-width: 600px) {
	.ogs-logo img { height: 48px; }
}

.ogs-logo__text {
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: -.02em;
}

/* Ana menü */
.ogs-nav { margin-left: auto; }

.ogs-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-nav li { position: relative; }

.ogs-nav a,
.ogs-nav__baslik {
	display: block;
	/* Logo 76px'e büyüyünce 9 menü öğesi + arama kutusu sığmıyordu ve
	   başlıklar iki satıra kırılıyordu. Yatay boşluk daraltıldı ve
	   kırılma engellendi (19 Ağustos). */
	padding: 10px 9px;
	font-size: .9rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--ogs-ink);
	border-radius: var(--ogs-radius);
}

/* Ara boyutlarda menü biraz daha sıkışabilir. */
@media (max-width: 1360px) {
	.ogs-nav a { padding: 10px 7px; font-size: .86rem; }
}

.ogs-nav a:hover,
.ogs-nav .current-menu-item > a,
.ogs-nav .current_page_item > a {
	color: var(--ogs-accent-dark);
	background: var(--ogs-accent-soft);
}

/* Tıklanamaz açılır-menü başlığı (Hakkımızda) — bağlantı değil, span. */
.ogs-nav__baslik { cursor: default; }
.ogs-nav li:hover > .ogs-nav__baslik,
.ogs-nav li:focus-within > .ogs-nav__baslik {
	color: var(--ogs-accent-dark);
	background: var(--ogs-accent-soft);
}

/* Alt menü */
.ogs-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	/* Üst öğenin ALTINDA merkezli açılır (OGS: "sağa kayık, merkezli olsa"). */
	left: 50%;
	transform: translateX(-50%);
	min-width: 230px;
	flex-direction: column;
	gap: 0;
	padding: 6px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	box-shadow: var(--ogs-shadow-md);
	border-radius: var(--ogs-radius);
}

.ogs-nav li:hover > .sub-menu,
.ogs-nav li:focus-within > .sub-menu { display: flex; }

.ogs-nav .sub-menu a { font-weight: 500; }

/* ---- "Ürünler" mega menüsü — kademeli hover flyout (saf CSS) ---- */
.ogs-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	padding: 6px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	box-shadow: 0 16px 44px rgba(16, 17, 18, .18);
}

.ogs-mega-ana:hover > .ogs-mega,
.ogs-mega-ana:focus-within > .ogs-mega { display: block; }

.ogs-nav .ogs-mega__liste {
	display: block;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 234px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-mega__oge { position: relative; }

/* Alt kademeler (2. ve sonrası) sağa açılır — varsayılan gizli */
.ogs-nav .ogs-mega__oge > .ogs-mega__liste {
	display: none;
	position: absolute;
	top: -7px;
	left: 100%;
	padding: 6px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	box-shadow: 0 16px 44px rgba(16, 17, 18, .18);
}

.ogs-nav .ogs-mega__oge:hover > .ogs-mega__liste,
.ogs-nav .ogs-mega__oge:focus-within > .ogs-mega__liste { display: block; }

.ogs-nav .ogs-mega__bag {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: calc(var(--ogs-radius) - 2px);
	font-size: .86rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--ogs-ink);
}

.ogs-nav .ogs-mega__oge:hover > .ogs-mega__bag {
	background: var(--ogs-accent-soft);
	color: var(--ogs-accent-dark);
}

.ogs-mega__ad { flex: 1 1 auto; }

.ogs-mega__sayi {
	flex: 0 0 auto;
	font-size: .72rem;
	color: var(--ogs-gray);
	background: var(--ogs-gray-bg, #f2f4f5);
	border-radius: 10px;
	padding: 1px 7px;
}

.ogs-mega__ok { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; color: var(--ogs-gray); }

/* Mobil menü aç/kapa — JS'siz, checkbox tekniği */
.ogs-nav-toggle { display: none; }

.ogs-nav-toggle__label {
	display: none;
	margin-left: auto;
	padding: 8px 12px;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

/* 980px idi. Logo 42→76px büyüdükten sonra 9 menü öğesi + arama kutusu
   980-1300px bandında yatay taşma yapıyordu; hamburger daha erken
   devreye giriyor (19 Ağustos, ölçümle tespit edildi). */
@media (max-width: 1280px) {
	.ogs-nav-toggle__label { display: block; }

	.ogs-nav {
		display: none;
		order: 10;
		width: 100%;
		margin: 0 0 12px;
	}

	.ogs-nav-toggle:checked ~ .ogs-nav { display: block; }

	.ogs-header__inner { flex-wrap: wrap; }

	.ogs-nav ul { flex-direction: column; align-items: stretch; gap: 0; }

	.ogs-nav .sub-menu {
		display: flex;
		position: static;
		transform: none; /* masaüstü merkezleme mobilde sıfırlanır */
		border: 0;
		box-shadow: none;
		padding-left: 16px;
	}

	/* Mega menü masaüstü hover özelliğidir; dokunmatik/hamburgerde gizli. */
	.ogs-mega { display: none !important; }
}

/* ==========================================================================
   5. ÜRÜN ARAMA (şartname madde 8)
   ========================================================================== */

/* Büyütülmüş logo + 9 menü öğesiyle birlikte sığması için daraltıldı. */
.ogs-search { flex: 0 1 300px; max-width: 300px; }

@media (max-width: 1360px) {
	.ogs-search { flex-basis: 240px; max-width: 240px; }
}

.ogs-search__form {
	display: flex;
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	overflow: hidden;
	background: var(--ogs-white);
}

.ogs-search__form:focus-within { border-color: var(--ogs-accent); }

.ogs-search__input {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 0;
	font: inherit;
	font-size: 1rem; /* 16px — iOS'ta odakta zoom yapmasın */
	background: transparent;
	color: var(--ogs-ink);
}

.ogs-search__input:focus { outline: none; }

.ogs-search__submit {
	padding: 0 18px;
	border: 0;
	background: var(--ogs-ink);
	color: var(--ogs-white);
	font: inherit;
	font-weight: 600;
	font-size: .88rem;
	cursor: pointer;
}

.ogs-search__submit:hover { background: var(--ogs-accent); color: var(--ogs-ink); }

@media (max-width: 1280px) {
	.ogs-search { order: 20; width: 100%; max-width: none; margin-bottom: 12px; }
}

/* Canlı arama (typeahead) — yazarken açılan ürün listesi */
.ogs-arama-kap { position: relative; }

.ogs-arama-sonuc {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 62vh;
	overflow-y: auto;
	padding: 4px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	box-shadow: 0 12px 32px rgba(16, 17, 18, .16);
}

.ogs-arama-oge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: calc(var(--ogs-radius) - 2px);
	color: var(--ogs-ink);
	text-decoration: none;
}

.ogs-arama-oge--aktif,
.ogs-arama-oge:hover { background: var(--ogs-gray-bg, #f2f4f5); }

.ogs-arama-oge__gorsel {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--ogs-gray-line);
	border-radius: 6px;
}

.ogs-arama-oge__gorsel--bos { background: var(--ogs-gray-bg, #f2f4f5); }

.ogs-arama-oge__govde { display: flex; flex-direction: column; min-width: 0; }

.ogs-arama-oge__ad {
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ogs-arama-oge__alt { font-size: .76rem; color: var(--ogs-gray); margin-top: 1px; }

.ogs-arama-bos {
	padding: 12px 10px;
	font-size: .85rem;
	color: var(--ogs-gray);
	text-align: center;
}

/* ---- "Yükleme" / İndirmeler — Drive klasör tarayıcısı ---- */
.ogs-drive { max-width: 840px; }
.ogs-drive__giris { margin-bottom: 1.4em; }
.ogs-drive__liste { list-style: none; margin: 0; padding: 0; }

.ogs-drive__oge { border-bottom: 1px solid var(--ogs-gray-line); }
.ogs-drive__oge:last-child { border-bottom: 0; }
.ogs-drive__oge--dosya { display: flex; align-items: center; }

.ogs-drive__ikon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: no-repeat center / contain;
}
.ogs-drive__ikon--klasor {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23f5a623" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>');
}
.ogs-drive__ikon--dosya {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23707070" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>');
}

.ogs-drive__klasor {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 10px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--ogs-ink);
	text-align: left;
	cursor: pointer;
}
.ogs-drive__klasor:hover { background: var(--ogs-gray-bg, #f2f4f5); }
.ogs-drive__klasor--yukleniyor { opacity: .55; cursor: progress; }

.ogs-drive__ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ogs-drive__ok { flex: 0 0 auto; color: var(--ogs-gray); transition: transform .15s ease; }
.ogs-drive__ok::before { content: "\203A"; font-size: 1.25rem; line-height: 1; }
.ogs-drive__klasor--acik .ogs-drive__ok { transform: rotate(90deg); }

.ogs-drive__alt { padding-left: 24px; }

.ogs-drive__dosya {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 10px;
	color: var(--ogs-ink);
	text-decoration: none;
}
.ogs-drive__dosya:hover { background: var(--ogs-gray-bg, #f2f4f5); }

.ogs-drive__indir {
	flex: 0 0 auto;
	margin: 0 6px;
	padding: 5px 13px;
	font-size: .8rem;
	font-weight: 600;
	color: var(--ogs-accent-dark);
	border: 1px solid var(--ogs-accent);
	border-radius: var(--ogs-radius);
	text-decoration: none;
	white-space: nowrap;
}
.ogs-drive__indir:hover { background: var(--ogs-accent); color: #fff; }

.ogs-drive__bos,
.ogs-drive__hata,
.ogs-drive__yakinda,
.ogs-drive__not { padding: 12px 10px; color: var(--ogs-gray); }

.ogs-drive__yonetim { margin: 0 0 14px; font-size: .85rem; }
.ogs-drive__yenile {
	display: inline-block;
	padding: 6px 14px;
	font-weight: 600;
	color: var(--ogs-accent-dark);
	border: 1px solid var(--ogs-accent);
	border-radius: var(--ogs-radius);
	text-decoration: none;
}
.ogs-drive__yenile:hover { background: var(--ogs-accent); color: #fff; }
.ogs-drive__yonetim-not { color: var(--ogs-gray); margin-left: 10px; }

/* ==========================================================================
   6. BUTONLAR
   ========================================================================== */

.ogs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--ogs-radius);
	font-size: .94rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ogs-btn--primary {
	background: var(--ogs-accent);
	color: var(--ogs-ink);
}
.ogs-btn--primary:hover { background: var(--ogs-accent-dark); color: var(--ogs-ink); }

.ogs-btn--dark {
	background: var(--ogs-ink);
	color: var(--ogs-white);
}
.ogs-btn--dark:hover { background: var(--ogs-steel); color: var(--ogs-white); }

.ogs-btn--ghost {
	background: transparent;
	color: var(--ogs-ink);
	border-color: var(--ogs-gray-line);
}
.ogs-btn--ghost:hover { border-color: var(--ogs-ink); color: var(--ogs-ink); }

.ogs-btn--whatsapp {
	background: #25d366;
	color: #06331a;
}
.ogs-btn--whatsapp:hover { background: #1eb355; color: #06331a; }

/* Sabit WhatsApp butonu (şartname madde 12) */
.ogs-wa-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: var(--ogs-shadow-md);
}
.ogs-wa-float:hover { background: #1eb355; color: #fff; }
.ogs-wa-float svg { width: 28px; height: 28px; fill: currentColor; }

/* ==========================================================================
   7. KART / LİSTE BİLEŞENLERİ
   ========================================================================== */

.ogs-card {
	display: flex;
	flex-direction: column;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ogs-card:hover {
	border-color: var(--ogs-gray-mid);
	box-shadow: var(--ogs-shadow-md);
}

.ogs-card__media {
	aspect-ratio: 4 / 3;
	background: var(--ogs-gray-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ogs-card__media img { width: 100%; height: 100%; object-fit: contain; }

.ogs-card__body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }

.ogs-card__brand {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
	margin-bottom: 6px;
}

.ogs-card__title { font-size: 1rem; margin: 0 0 6px; }

.ogs-card__code {
	font-family: var(--ogs-font-mono);
	font-size: .82rem;
	color: var(--ogs-steel);
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: 3px;
	padding: 2px 7px;
	align-self: flex-start;
	margin-bottom: 10px;
}

.ogs-card__excerpt {
	font-size: .89rem;
	color: var(--ogs-gray-mid);
	margin: 0 0 14px;
}

.ogs-card__footer { margin-top: auto; }

/* ==========================================================================
   8. TEKNİK ÖZELLİK TABLOSU (şartname madde 10)
   ========================================================================== */

.ogs-table-wrap { overflow-x: auto; margin-bottom: 1.6em; }

.ogs-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.ogs-spec-table th,
.ogs-spec-table td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ogs-gray-line);
	vertical-align: top;
}

.ogs-spec-table th {
	width: 34%;
	font-weight: 600;
	color: var(--ogs-steel);
	background: var(--ogs-gray-bg);
	white-space: nowrap;
}

.ogs-spec-table tr:last-child th,
.ogs-spec-table tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   9. SAYFA BAŞLIĞI / BREADCRUMB
   ========================================================================== */

.ogs-page-head {
	padding-block: 34px 30px;
	border-bottom: 1px solid var(--ogs-gray-line);
	background: var(--ogs-gray-bg);
}

.ogs-page-head h1 { margin-bottom: 0; }

.ogs-page-head__ozet {
	margin: 8px 0 0;
	max-width: 62ch;
	color: var(--ogs-gray-mid);
	font-size: .94rem;
}

.ogs-breadcrumb {
	font-size: .84rem;
	color: var(--ogs-gray-mid);
	margin-bottom: 10px;
}

.ogs-breadcrumb a { color: var(--ogs-gray-mid); }
.ogs-breadcrumb a:hover { color: var(--ogs-accent-dark); }
.ogs-breadcrumb span[aria-hidden] { margin: 0 6px; }

/* ==========================================================================
   10. YAZI / İÇERİK
   ========================================================================== */

.ogs-entry { max-width: 78ch; }

.ogs-entry img,
.ogs-entry figure { margin-block: 1.6em; }

.ogs-entry figcaption {
	font-size: .84rem;
	color: var(--ogs-gray-mid);
	margin-top: 8px;
}

.ogs-entry blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--ogs-accent);
	color: var(--ogs-steel);
}

.ogs-entry table { width: 100%; border-collapse: collapse; }
.ogs-entry th, .ogs-entry td {
	padding: 10px 12px;
	border: 1px solid var(--ogs-gray-line);
	text-align: left;
}

.ogs-meta {
	font-size: .84rem;
	color: var(--ogs-gray-mid);
	margin-bottom: 1.2em;
}

/* Sayfalama */
.ogs-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 40px;
}

.ogs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	font-size: .9rem;
	font-weight: 600;
}

.ogs-pagination .page-numbers.current,
.ogs-pagination .page-numbers:hover {
	background: var(--ogs-ink);
	border-color: var(--ogs-ink);
	color: var(--ogs-white);
}

/* WordPress hizalama sınıfları */
.alignleft  { float: left;  margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.ogs-footer {
	background: var(--ogs-graphite);
	color: var(--ogs-gray-line);
	font-size: .9rem;
	padding-top: 56px;
}

.ogs-footer a { color: var(--ogs-gray-line); }
.ogs-footer a:hover { color: var(--ogs-accent); }

.ogs-footer h3 {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogs-white);
	margin-bottom: 16px;
}

.ogs-footer ul { list-style: none; margin: 0; padding: 0; }
.ogs-footer li { margin-bottom: 9px; }

/* Koyu zemin için gerçek negatif (beyaz) logo dosyası kullanılıyor:
   assets/img/ogs-logo-white.png — CSS filter hilesi kaldırıldı. */
.ogs-footer__logo img {
	height: 56px;
	width: auto;
	margin-bottom: 16px;
}

.ogs-footer__about { max-width: 34ch; color: var(--ogs-gray-soft); }

.ogs-footer__legal {
	margin-top: 44px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	align-items: center;
	justify-content: space-between;
	font-size: .82rem;
	color: var(--ogs-gray-soft);
}

.ogs-footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ogs-footer__legal li { margin: 0; }

.ogs-footer__corp {
	font-size: .78rem;
	color: var(--ogs-gray-soft);
	margin-top: 14px;
	line-height: 1.7;
}

/* ==========================================================================
   12. YARDIMCI SINIFLAR
   ========================================================================== */

.ogs-lead { font-size: 1.08rem; color: var(--ogs-steel); }
.ogs-muted { color: var(--ogs-gray-mid); }
.ogs-eyebrow {
	display: block;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ogs-accent-dark);
	margin-bottom: 10px;
}
.ogs-stack > * + * { margin-top: 12px; }
.ogs-center { text-align: center; }
.ogs-mt-0 { margin-top: 0; }
.ogs-mb-0 { margin-bottom: 0; }

.ogs-notice {
	padding: 16px 18px;
	border: 1px solid var(--ogs-gray-line);
	border-left: 3px solid var(--ogs-accent);
	background: var(--ogs-gray-bg);
	border-radius: var(--ogs-radius);
}

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

/* ==========================================================================
   13. ORTAK BÖLÜM BİLEŞENLERİ
   (bölüm başlığı, etiket, ek buton varyantları, boş durum)
   ========================================================================== */

.ogs-bolum-basi {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 32px;
}

.ogs-eyebrow--acik { color: var(--ogs-accent); }

.ogs-btn--sm { padding: 8px 14px; font-size: .86rem; }

/* Koyu zeminde ikincil buton — aksan üzerine beyaz metin YAZILMAZ,
   bunun yerine saydam zemin + beyaz kenarlık kullanılır. */
.ogs-btn--outline-light {
	background: transparent;
	color: var(--ogs-white);
	border-color: rgba(255, 255, 255, .45);
}
.ogs-btn--outline-light:hover {
	background: var(--ogs-white);
	color: var(--ogs-ink);
	border-color: var(--ogs-white);
}

/* Etiket / rozet */
.ogs-etiketler {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.ogs-etiket {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border: 1px solid var(--ogs-gray-line);
	border-radius: 999px;
	background: var(--ogs-white);
	font-size: .82rem;
	font-weight: 600;
	color: var(--ogs-steel);
	line-height: 1.35;
}

a.ogs-etiket--link:hover,
a.ogs-etiket--link:focus-visible {
	border-color: var(--ogs-accent);
	background: var(--ogs-accent-soft);
	color: var(--ogs-ink);
}

.ogs-etiket__sayi {
	font-family: var(--ogs-font-mono);
	font-size: .74rem;
	color: var(--ogs-gray-mid);
}

.ogs-liste { padding-left: 1.1em; }
.ogs-liste li { margin-bottom: 6px; }

.ogs-sonuc-sayisi {
	font-size: .9rem;
	color: var(--ogs-gray-mid);
	margin-bottom: 18px;
}

.ogs-notice--ok { border-left-color: var(--ogs-success); }
.ogs-notice--hata { border-left-color: var(--ogs-danger); }

.ogs-bos-aksiyon {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.ogs-bos-arama { margin-top: 24px; max-width: 460px; }

.ogs-card__gorselsiz,
.ogs-urun__gorselsiz {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 140px;
	font-size: .82rem;
	color: var(--ogs-gray-mid);
	background: var(--ogs-gray-bg);
	text-align: center;
	padding: 12px;
}

/* ==========================================================================
   14. ANA SAYFA — 1. BÖLÜM: HERO
   ========================================================================== */

/*
 * Hero arka planı — OGS marka görselinden türetildi.
 *
 * Kaynak görselin ortasında OGS logosu ve slogan GÖMÜLÜDÜR. Hero'da zaten
 * gerçek H1, açıklama ve CTA metni var; gömülü metin arka planda kalsaydı
 * metinler üst üste binerdi (ayrıca görsele gömülü metin SEO'da okunmaz).
 * Bu yüzden yalnızca metin İÇERMEYEN gradyan + devre deseni bandı
 * kullanılıyor: assets/img/hero/hero-bg.webp
 *
 * Görselin en parlak noktası 201 luma'ya çıkıyor; beyaz metnin okunması
 * için üstüne koyu bir katman biniyor.
 */
/*
 * Arka plan URL'leri --ogs-hero-bg / --ogs-hero-bg-sm değişkenlerinden
 * gelir; bu değişkenler functions.php içinde dosyanın değişiklik zamanı
 * eklenerek üretilir (ogs_hero_arkaplan_degiskenleri).
 *
 * Neden: CSS içindeki url() referanslarının sürüm damgası olmaz. Görsel
 * yeniden üretildiğinde dosya adı aynı kaldığı için tarayıcılar ESKİ
 * görseli sunmaya devam eder. Bu, kırpması hatalı bir ilk sürümün
 * ekranda kalmasına yol açtı (19 Ağustos). Değişken üzerinden verilince
 * dosya her değiştiğinde URL de değişir.
 */
.ogs-hero {
	background-color: #12335a; /* görselin ortalama rengi — görsel yüklenmezse */
	background-image:
		linear-gradient( 100deg, rgba(9, 20, 36, .93) 0%, rgba(9, 20, 36, .72) 48%, rgba(9, 20, 36, .55) 100% ),
		var(--ogs-hero-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--ogs-white);
	border-bottom: 3px solid var(--ogs-accent);
	/* Metin katmanı arka planın üstünde kalsın. */
	position: relative;
	/* Canlı arama sonuçları hero'dan taşınca SONRAKİ bölümün (video carousel,
	   z-index:2) ÜSTÜNDE açılsın. isolation:isolate context yaratır ama hero'ya
	   z-index verilmezse sonraki kardeş bölümler dropdown'ı örter. header(100)/
	   WhatsApp(90)/Teklif(80) yine üstte kalır. */
	z-index: 5;
	isolation: isolate;
}

.ogs-hero__inner { position: relative; z-index: 1; }

/* Küçük ekranlarda daha hafif dosya. */
@media (max-width: 900px) {
	.ogs-hero {
		background-image:
			linear-gradient( 175deg, rgba(9, 20, 36, .9) 0%, rgba(9, 20, 36, .74) 100% ),
			var(--ogs-hero-bg-sm, none);
	}
}

.ogs-hero__inner {
	padding-block: clamp(34px, 4vw, 52px);
	/* 900px idi. Tüm hero metni buraya alınınca satır sayısı artıyordu;
	   kolon genişletilip metin yatayda yayıldı (20 Ağustos). */
	max-width: 1120px;
}

/* Başlık ve tüm paragraflar AYNI genişlikte — sol kenarları hizalı,
   sağ kenarları ortak sınırda biter. */
.ogs-hero__baslik,
.ogs-hero__lead,
.ogs-hero__metin,
.ogs-hero__slogan {
	max-width: 100%;
}

/* Hero gövde paragrafları (sektörler, ürün yaklaşımı). */
.ogs-hero__metin {
	font-size: .98rem;
	line-height: 1.6;
	color: var(--ogs-gray-soft);
	margin: 0 0 14px;
}

.ogs-hero__rozet {
	display: inline-block;
	margin: 0 0 18px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--ogs-accent);
	color: var(--ogs-ink);        /* aksan AÇIK renk: koyu metin */
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ogs-hero__baslik {
	color: var(--ogs-white);
	margin-bottom: 14px;
}

.ogs-hero__lead {
	font-size: 1.06rem;
	color: var(--ogs-gray-line);
	margin-bottom: 14px;
}

/* CTA'lar + arama tek satırda — hero dikeyde kısaldı (19 Ağustos).
   Önce alt alta iki blok hâlindeydi ve 731px yükseklik yapıyordu. */
.ogs-hero__eylem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: 4px;
}

.ogs-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0;
}

.ogs-hero__search {
	flex: 1 1 300px;
	max-width: 420px;
}

/* Dar ekranda arama tam satır olsun, buton hizası bozulmasın. */
@media (max-width: 720px) {
	.ogs-hero__search { flex-basis: 100%; max-width: none; }
}

.ogs-hero__search .ogs-search__form { border-color: transparent; }
.ogs-hero__search .ogs-search__input { padding: 15px 16px; font-size: 1rem; }
.ogs-hero__search .ogs-search__submit { padding: 0 24px; background: var(--ogs-accent); color: var(--ogs-ink); }
.ogs-hero__search .ogs-search__submit:hover { background: var(--ogs-accent-dark); color: var(--ogs-ink); }

/* ==========================================================================
   15. ANA SAYFA — 2. BÖLÜM: TANITIM + NEDEN OGS?
   ========================================================================== */

.ogs-tanitim__ust {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px 48px;
	margin-bottom: 44px;
}

@media (min-width: 860px) {
	.ogs-tanitim__ust { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.ogs-tanitim__metin p:last-child { margin-bottom: 0; }

.ogs-tanitim__alt-baslik {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
	padding-top: 22px;
	border-top: 1px solid var(--ogs-gray-line);
	margin-bottom: 24px;
}

.ogs-neden {
	display: grid;
	/* 6 madde var: 4 kolonda 4+2 kirilip sagda bosluk birakiyordu.
	   3 kolonda 3+3 dengeli oturuyor (19 Agustos). */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-neden__madde { border-left: 3px solid var(--ogs-accent); padding-left: 16px; }
.ogs-neden__baslik { margin-bottom: 6px; }
.ogs-neden__metin { font-size: .92rem; color: var(--ogs-gray-mid); margin-bottom: 0; }

/* ==========================================================================
   16. ANA SAYFA — 3. BÖLÜM: ÜRÜN AİLELERİ
   ========================================================================== */

.ogs-aile-grid {
	display: grid;
	/* 220px idi; kartlar sıkışık duruyordu (19 Ağustos).
	   Hem minimum kart genişliği hem aradaki boşluk artırıldı. */
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 700px) {
	.ogs-aile-grid { gap: 18px; }
}

.ogs-aile-kart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 22px 22px 20px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-left: 3px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ogs-aile-kart:hover,
.ogs-aile-kart:focus-visible {
	border-color: var(--ogs-gray-mid);
	border-left-color: var(--ogs-accent);
	box-shadow: var(--ogs-shadow-sm);
	color: var(--ogs-ink);
}

.ogs-aile-kart__ad { font-weight: 700; }
.ogs-aile-kart__sayi { font-size: .8rem; color: var(--ogs-gray-mid); }

/* Marka kartı — logo üstte, ürün sayısı altta (25 Ağustos) */
.ogs-aile-kart--marka { gap: 12px; }
.ogs-aile-kart__logo {
	display: flex;
	align-items: center;
	min-height: 52px;
}
.ogs-aile-kart__logo img {
	max-height: 48px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Marka / ürün ailesi çapraz geçiş şeridi (arşiv sayfaları) */
.ogs-aile-serit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

/* ==========================================================================
   17. ANA SAYFA — 4. BÖLÜM: MARKA ŞERİDİ (saf CSS marquee)
   ========================================================================== */

.ogs-markalar { padding-bottom: clamp(32px, 4vw, 56px); }

/* Gri zeminli bolumde logo kartlari beyaz kalir, kontrast korunur. */
.ogs-section--gray .ogs-marka { background: var(--ogs-white); }

.ogs-marka-serit {
	display: flex;
	overflow: hidden;
	margin-top: 26px;
	padding-block: 6px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ogs-marka-serit__sira {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 14px;
	margin: 0;
	padding: 0 7px;
	list-style: none;
	animation: ogs-marka-kaydir 45s linear infinite;
	will-change: transform;
}

@keyframes ogs-marka-kaydir {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Fare üzerindeyken ve klavye odağı şeritteyken durur. */
.ogs-marka-serit:hover .ogs-marka-serit__sira,
.ogs-marka-serit:focus-within .ogs-marka-serit__sira { animation-play-state: paused; }

.ogs-marka {
	display: flex;
	flex: 0 0 auto;
	/* `center` DEĞİL: bagi kartin tamamini kaplasin diye esnetilir.
	   Ortalama isini artik ictekiki `a`/`span` yapiyor. */
	align-items: stretch;
	justify-content: center;
	width: 168px;
	min-height: 78px;
	/* Bosluk `a` etiketine tasindi — bkz. asagidaki not. */
	padding: 0;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	text-align: center;
}

.ogs-marka > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* TIKLAMA ALANI — bunu geri daraltma.
   Bag eskiden yalnizca <img>'i sariyordu; kartin beyaz boslugu OLU
   alandi. Serit kaydigi icin logo bazen imlecin altinda bazen yaninda
   kaliyordu ve "bazi markalara tiklanmiyor" gibi gorunuyordu
   (20 Ağustos, OGS bildirdi; elementFromPoint taramasiyla dogrulandi).
   Bag artik 168x78 kartin TAMAMINI kapliyor. */
.ogs-marka > a,
.ogs-marka > .ogs-marka__metin {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 12px 16px;
}

.ogs-marka img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
}

/* Logosu temin edilemeyen marka: metin tabanlı kart (zorunlu fallback) */
.ogs-marka--metin { background: var(--ogs-gray-bg); }

.ogs-marka__metin {
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ogs-steel);
	line-height: 1.25;
}

.ogs-marka > a:hover .ogs-marka__metin { color: var(--ogs-accent-dark); }

@media (prefers-reduced-motion: reduce) {
	/* Animasyon tamamen durur; şerit elle kaydırılabilir hale gelir.
	   Yinelenen kopya statik durumda anlamsız olduğu için gizlenir. */
	.ogs-marka-serit { overflow-x: auto; }
	.ogs-marka-serit__sira { animation: none !important; }
	.ogs-marka-serit__sira--kopya { display: none; }
}

/* ==========================================================================
   18. ANA SAYFA — 5. BÖLÜM: HİZMETLER
   ========================================================================== */

.ogs-hizmet {
	padding: 22px 22px 18px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-top: 3px solid var(--ogs-accent);
	border-radius: var(--ogs-radius);
}

.ogs-hizmet__baslik { font-size: 1.08rem; margin-bottom: 12px; }

.ogs-hizmet__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .92rem;
	color: var(--ogs-steel);
}

.ogs-hizmet__liste li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 6px;
}

.ogs-hizmet__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 1px;
	background: var(--ogs-accent-dark);
}

/* ==========================================================================
   19. ANA SAYFA — 6. BÖLÜM: PROJELER + VİDEO (YouTube facade)
   Bölüm şu an veri olmadığı için basılmıyor; stiller hazır bekletiliyor.
   ========================================================================== */

.ogs-projeler__alt-baslik {
	margin-top: 48px;
	margin-bottom: 18px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
}

.ogs-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--ogs-gap);
}

/* Shorts rayı: kartlar dar olduğu için aynı anda daha çoğu sığar.
   Normal videolarla AYNI carousel bileşenini kullanır; tek fark
   kart genişliğidir. Ok düğmeleri kart sayısı görünür sayıyı
   aştığında JS tarafından etkinleşir. */
.ogs-video-ray--shorts .ogs-video-ray__oge {
	flex-basis: calc((100% - (20px * 4)) / 5);
}

@media (max-width: 1150px) {
	.ogs-video-ray--shorts .ogs-video-ray__oge { flex-basis: calc((100% - (20px * 2)) / 3); }
}

@media (max-width: 760px) {
	.ogs-video-ray--shorts .ogs-video-ray__oge { flex-basis: calc((100% - 20px) / 2); }
}

.ogs-video {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ogs-radius);
	overflow: hidden;
}

.ogs-video__facade,
.ogs-video__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

.ogs-video--short .ogs-video__facade,
.ogs-video--short .ogs-video__iframe { aspect-ratio: 9 / 16; }

.ogs-video__facade {
	position: relative;
	padding: 0;
	margin: 0;
	background: var(--ogs-steel);
	cursor: pointer;
}

.ogs-video__facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogs-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(16, 17, 18, .82);
}

.ogs-video__play svg { width: 62px; height: auto; }

.ogs-video__facade:hover .ogs-video__play { color: var(--ogs-danger); }

.ogs-video__body { padding: 14px 16px 16px; }
.ogs-video__title { font-size: 1rem; margin-bottom: 6px; color: var(--ogs-white); }
.ogs-video__ozet { font-size: .88rem; color: var(--ogs-gray-line); margin-bottom: 10px; }

.ogs-video .ogs-etiketler { margin-bottom: 0; }

.ogs-video .ogs-etiket {
	background: transparent;
	border-color: rgba(255, 255, 255, .22);
	color: var(--ogs-gray-line);
}

.ogs-video--short .ogs-video__body { padding: 10px 12px 12px; }
.ogs-video--short .ogs-video__title { font-size: .9rem; }

/* ==========================================================================
   20. ANA SAYFA — 8. BÖLÜM: TEKLİF ÇAĞRISI ŞERİDİ
   Aksan zemin AÇIK renktir: metin ve buton KOYU kullanılır.
   ========================================================================== */

.ogs-teklif-serit { background: var(--ogs-accent); color: var(--ogs-ink); }

.ogs-teklif-serit__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 28px;
}

.ogs-teklif-serit__baslik {
	font-size: clamp(1.2rem, 2.4vw, 1.5rem);
	color: var(--ogs-ink);
	margin-bottom: 4px;
}

.ogs-teklif-serit__metin { color: #4a3a10; font-size: .95rem; }

/* ==========================================================================
   21. ANA SAYFA — 9. BÖLÜM: İLETİŞİM
   ========================================================================== */

.ogs-iletisim-grid {
	display: grid;
	/* 5 kart var: 4 kolonda 4+1 kirilip tek basina kart kaliyordu.
	   3 kolonda 3+2 dengeli (19 Agustos). */
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-iletisim-kart {
	display: flex;
	gap: 14px;
	padding: 20px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-iletisim-kart__ikon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ogs-accent-soft);
	color: var(--ogs-accent-dark);
}

.ogs-iletisim-kart__baslik {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
	margin-bottom: 4px;
}

/* ==========================================================================
   22. KATALOG — FİLTRE ÇUBUĞU VE ÜRÜN LİSTESİ
   ========================================================================== */

.ogs-filtre {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px 18px;
	padding: 16px 18px;
	margin-bottom: 28px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-filtre__alan { display: flex; flex-direction: column; gap: 5px; margin: 0; }

.ogs-filtre__alan label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
}

.ogs-filtre select {
	min-width: 200px;
	padding: 9px 11px;
	font: inherit;
	font-size: 1rem; /* 16px — iOS input zoom önleme */
	color: var(--ogs-ink);
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

/* `flex: 1` olmasa "Hizli Arama"nin `margin-left:auto`su ise yaramaz:
   islem kutusu icerik genisliginde kalir, itecek bosluk bulunmaz. */
.ogs-filtre__islem {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0;
}

.ogs-filtre__temizle { font-size: .86rem; color: var(--ogs-gray-mid); text-decoration: underline; }

/* MODEL LISTESI — acilip kapanan kod tablolari (22 Agustos).
   Bir SERIYI tek urun olarak yayimladigimizda onlarca model kodu sayfaya
   sigmali ama sayfayi sismemeli. `<details>` tarayicinin kendi acilir
   blogu: JS YOK, klavyeyle calisir, ekran okuyucu destekler. */
.ogs-kod-grup {
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	margin-bottom: 12px;
	background: var(--ogs-white);
}

.ogs-kod-grup__baslik {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;          /* varsayilan ucgen gizlenir */
}

.ogs-kod-grup__baslik::-webkit-details-marker { display: none; }

/* Kendi gostergemiz: kapaliyken +, acikken − */
.ogs-kod-grup__baslik::after {
	content: "+";
	flex: none;
	width: 26px;
	height: 26px;
	line-height: 24px;
	text-align: center;
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ogs-ink);
	border: 1px solid var(--ogs-gray-line);
	border-radius: 50%;
}

.ogs-kod-grup[open] .ogs-kod-grup__baslik::after { content: "\2212"; }

.ogs-kod-grup__baslik:hover { background: var(--ogs-gray-bg); }
.ogs-kod-grup__baslik:focus-visible { outline: 2px solid var(--ogs-ink); outline-offset: -2px; }

.ogs-kod-grup__sayi {
	margin-left: auto;
	font-weight: 400;
	font-size: .84rem;
	color: var(--ogs-gray-mid);
}

.ogs-kod-grup .ogs-table-wrap { padding: 0 18px 16px; }

.ogs-kod-tablo {
	width: 100%;
	border-collapse: collapse;
	font-size: .86rem;
}

.ogs-kod-tablo th,
.ogs-kod-tablo td {
	padding: 7px 10px;
	text-align: left;
	border-bottom: 1px solid var(--ogs-gray-line);
	white-space: nowrap;
}

.ogs-kod-tablo thead th {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ogs-gray-mid);
	border-bottom-width: 2px;
}

.ogs-kod-tablo__kod { font-family: var(--ogs-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace); }

.ogs-kod-tablo tbody tr:hover { background: var(--ogs-gray-bg); }

/* HIZLI ARAMA — filtre cubugunun SAG ucunda, "Tum Urunler" gorunusune
   goturur. Bilerek belirgin (aksan rengi): kademeleri atlamak isteyen
   kullanicinin gorecegi tek kestirme yol budur. Bagantidir, dugme degil —
   arama kutusundaki metni TASIMAZ (22 Agustos, OGS'nin sarti). */
.ogs-hizli-ara {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
}

.ogs-hizli-ara__ikon { flex: none; }

.ogs-hizli-ara__ipucu { font-size: .82rem; color: var(--ogs-gray-mid); }

/* Dar ekranda "sag uca yasla" anlamini yitirir; ipucu da yer kaplar. */
@media (max-width: 640px) {
	.ogs-hizli-ara { margin-left: 0; }
	.ogs-hizli-ara__ipucu { display: none; }
}

/* --- Modül işlevi filtresi (onay kutulu) — 22 Ağustos ---------------
   Modular I/O gibi çok modüllü gruplarda basılır. Görsel dili yandaki
   `.ogs-filtre` kutusuyla aynı; ayrı bir blok olarak onun ALTINDA durur.
   JS yok, düz form gönderimi.                                        */
.ogs-islev-filtre {
	padding: 16px 18px;
	margin-bottom: 28px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

/* Grup: Ürün Tipi / Modül İşlevi / Ekran Boyutu — alt alta bloklar. */
.ogs-islev-filtre__grup { margin-bottom: 14px; }
.ogs-islev-filtre__grup:last-of-type { margin-bottom: 16px; }

.ogs-islev-filtre__grup .ogs-islev-filtre__etiket {
	display: block;
	margin-bottom: 8px;
}

.ogs-islev-filtre__etiket {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
}

.ogs-islev-filtre__ipucu { font-size: .82rem; color: var(--ogs-gray-mid); }

.ogs-islev-filtre__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ogs-islev-filtre__oge { margin: 0; }

/* Kutu görünmez; etiketin kendisi tıklanabilir rozet olur. */
.ogs-islev-filtre__oge input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ogs-islev-filtre__oge label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	font-size: .88rem;
	color: var(--ogs-ink);
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: 999px;
	cursor: pointer;
}

.ogs-islev-filtre__oge label:hover { border-color: var(--ogs-gray-mid); }

.ogs-islev-filtre__oge input:checked + label {
	color: var(--ogs-ink);
	background: var(--ogs-accent);
	border-color: var(--ogs-accent);
	font-weight: 600;
}

/* Klavye erişimi: kutu gizli olduğu için odak halkasını etiket taşır. */
.ogs-islev-filtre__oge input:focus-visible + label {
	outline: 2px solid var(--ogs-ink);
	outline-offset: 2px;
}

.ogs-islev-filtre__sayi {
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--ogs-gray-mid);
}

.ogs-islev-filtre__oge input:checked + label .ogs-islev-filtre__sayi { color: var(--ogs-ink); }

.ogs-islev-filtre__eylem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	padding-top: 4px;
	border-top: 1px solid var(--ogs-gray-line);
}

/* CANLI FİLTRELEME (22 Ağustos) — yalnızca terimsiz aramada.
   Sınıfı JS ekler: JS yoksa "Filtrele" düğmesi yerinde kalır ve filtre
   eskisi gibi çalışır. Canlı ipucu da tersine, yalnızca JS varken görünür. */
.ogs-islev-filtre__ipucu--canli { display: none; }

.ogs-islev-filtre--canli .ogs-islev-filtre__eylem > .ogs-btn,
.ogs-islev-filtre--canli .ogs-islev-filtre__ipucu:not(.ogs-islev-filtre__ipucu--canli) { display: none; }

.ogs-islev-filtre--canli .ogs-islev-filtre__ipucu--canli { display: inline; }

.ogs-islev-filtre__temizle {
	font-size: .86rem;
	color: var(--ogs-gray-mid);
	text-decoration: underline;
}

@media (max-width: 560px) {
	.ogs-islev-filtre__oge label { padding: 8px 12px; }
	.ogs-islev-filtre__eylem { flex-wrap: wrap; }
}

/* Ürün ızgarası — TEK ÜRÜN KALINCA KART BÜYÜMEZ (22 Ağustos).
   `.ogs-grid--4` `auto-fit` kullanıyor; auto-fit boş sütunları çökertip
   kalan kartı satır boyunca gerdiriyordu. Filtrede "Röle Çıkışı"
   seçilince (1 ürün) kart bütün genişliği kaplıyordu — OGS bildirdi.
   `auto-fill` boş sütunları KORUR, kart normal genişliğinde kalır.
   Ürün ailesi 1 ürünlü de olabilir; bu yüzden kural ürün ızgarasının
   kullanıldığı HER YERDE geçerli: katalog listesi, ilgili ürünler,
   arama sonuçları. */
.ogs-urun-grid {
	align-items: stretch;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	justify-content: start;
}

.ogs-card--urun .ogs-card__title { font-size: .98rem; }

/* Marka arşivi başlığı */
.ogs-marka-basi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.ogs-marka-basi__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-marka-basi__logo img { max-height: 54px; width: auto; }

/* ==========================================================================
   23. ÜRÜN DETAY SAYFASI (şartname madde 10)
   ========================================================================== */

.ogs-page-head--urun { background: var(--ogs-white); padding-block: 20px 0; border-bottom: 0; }

.ogs-urun__ust {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

@media (min-width: 900px) {
	.ogs-urun__ust { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

.ogs-urun__gorsel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	min-height: 260px;
}

.ogs-urun__gorsel img { max-height: 460px; width: auto; object-fit: contain; }

.ogs-urun__marka {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
	margin-bottom: 8px;
}

.ogs-urun__marka a { color: var(--ogs-accent-dark); }

.ogs-urun__baslik { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }
.ogs-urun__kod { margin-bottom: 16px; }
.ogs-urun__kod .ogs-card__code { font-size: .95rem; margin-bottom: 0; display: inline-block; }

.ogs-urun__aksiyon {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 14px;
}

.ogs-urun__iletisim { font-size: .9rem; margin-bottom: 0; }

.ogs-urun__alt { max-width: 1000px; }
.ogs-urun__blok { margin-bottom: 48px; }
.ogs-urun__blok:last-child { margin-bottom: 0; }

.ogs-urun__blok > h2 {
	font-size: 1.25rem;
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--ogs-gray-line);
}

/* ==========================================================================
   24. TEKLİF FORMU (şartname madde 11)
   ========================================================================== */

.ogs-teklif-sayfa {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
}

@media (min-width: 960px) {
	.ogs-teklif-sayfa { grid-template-columns: minmax(0, 1fr) 280px; }
}

.ogs-teklif__baslik { font-size: 1.25rem; margin-bottom: 18px; }

.ogs-teklif-yan {
	align-self: start;
	padding: 22px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-teklif-yan__baslik {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ogs-gray-mid);
	margin-bottom: 14px;
}

.ogs-teklif-yan__liste { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.ogs-teklif-yan__liste li { margin-bottom: 10px; }

.ogs-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 4px 20px;
}

.ogs-form__alan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ogs-form__alan--genis { grid-column: 1 / -1; }

.ogs-form__alan label {
	font-size: .84rem;
	font-weight: 600;
	color: var(--ogs-steel);
}

.ogs-form__zorunlu { color: var(--ogs-danger); }

.ogs-form input[type="text"],
.ogs-form input[type="tel"],
.ogs-form input[type="email"],
.ogs-form input[type="number"],
.ogs-form textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: 1rem; /* 16px — iOS input zoom önleme */
	color: var(--ogs-ink);
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-form input:focus,
.ogs-form textarea:focus {
	outline: 2px solid var(--ogs-accent);
	outline-offset: 1px;
	border-color: var(--ogs-accent);
}

.ogs-form textarea { resize: vertical; min-height: 120px; }

.ogs-form__not { font-size: .84rem; color: var(--ogs-gray-mid); margin: 4px 0 18px; }
.ogs-form__kvkk { font-size: .8rem; color: var(--ogs-gray-mid); line-height: 1.6; margin: 0 0 18px; }
.ogs-form__kvkk a { text-decoration: underline; }

/* Yasal sayfalar — yürürlük tarihi satırı */
.ogs-yasal-tarih { font-size: .85rem; color: var(--ogs-gray-mid); }
/* Iki eylem yan yana: e-posta ve WhatsApp.
   `wrap` sayesinde dar ekranda alt alta duserler; `.ogs-btn` zaten
   inline-flex oldugu icin ayrica genislik verilmez. */
.ogs-form__gonder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}

/* Cok dar ekranda iki dugme de tam genislik alsin — yan yana sikismasinlar. */
@media (max-width: 420px) {
	.ogs-form__gonder .ogs-btn { flex: 1 1 100%; }
}

/* Honeypot — gerçek kullanıcıya görünmez, ekran okuyucu ve klavye atlar. */
.ogs-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   25. MARKALAR DİZİN SAYFASI (/markalar/)
   ========================================================================== */

/* Giris metni — logo izgarasindan once. Icerik WP sayfasinda (ID 8)
   tutuluyor, sablonda gomulu degil; yonetimden duzenlenebilsin diye. */
.ogs-marka-dizin__giris {
	max-width: 74ch;
	margin-bottom: 44px;
}

.ogs-marka-dizin__giris .ogs-marka-dizin__baslik {
	margin: 0 0 14px;
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--ogs-ink);
}

.ogs-marka-dizin__giris .ogs-marka-dizin__ozet {
	margin: 0;
	font-size: 1.03rem;
	line-height: 1.75;
	color: var(--ogs-gray-mid);
}

.ogs-marka-dizin {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ogs-marka-dizin__baglanti {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 100%;
	padding: 26px 18px 18px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	text-align: center;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ogs-marka-dizin__baglanti:hover,
.ogs-marka-dizin__baglanti:focus-visible {
	border-color: var(--ogs-gray-mid);
	box-shadow: var(--ogs-shadow-md);
}

.ogs-marka-dizin__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	/* Kartlar esit yukseklikte; logo alani buyuyerek adlarin satir
	   boyunca AYNI hizada bitmesini saglar. */
	flex: 1 0 auto;
}

.ogs-marka-dizin__logo img {
	max-height: 56px;
	width: auto;
	object-fit: contain;
	/* Logolar DOĞRUDAN RENKLİ (20 Ağustos kararı).
	   Önce gri-scale + hover'da renk vardı; kaldırıldı.
	   NOT: ana sayfadaki marka ŞERİDİ gri kalmaya devam ediyor —
	   bu bilinçli, OGS öyle istedi. */
	opacity: 1;
}

/* Logosu olmayan marka — metin karti fallback'i */
.ogs-marka-dizin__logo--metin {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -.01em;
	color: var(--ogs-steel);
}

/* Marka adi GORUNUR (20 Ağustos kararı).
   Onceden logo varken ad sr-only gizleniyordu. Metin HTML'de zaten
   vardi — yani bu degisiklik SEO'yu degistirmez; amac okunabilirlik:
   GMTCNT, Atek, Molwex gibi logolar tek basina okunmuyordu.
   Ad, logodan gorsel olarak ayrilsin diye ustune ince bir cizgi konur. */
.ogs-marka-dizin__ad {
	display: block;
	width: 100%;
	padding-top: 12px;
	border-top: 1px solid var(--ogs-gray-line);
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ogs-ink);
}

/* Logosuz markada karti ad zaten temsil ediyor — ikinci kez yazilmaz. */
.ogs-marka-dizin__logo--metin + .ogs-marka-dizin__ad {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   26. PROJE VİDEO CAROUSEL (şartname madde 26)
   3 kart görünür, oklarla birer birer kayar. Yalnızca CSS + vanilla JS.
   ========================================================================== */

/* Kartlar %30 büyütüldü (19 Ağustos). 3 kart kuralı DEĞİŞMEDİ.
   Kart genişliği tamamen kapsayıcıya bağlı olduğu için yer iki yerden
   açıldı: (1) oklar flex satırından çıkarılıp üste bindirildi — satırda
   2x(44px ok + 12px boşluk) = 112px yer kaplıyorlardı; (2) bu bölümün
   kapsayıcısı 1240px'ten 1440px'e genişletildi. */
.ogs-projeler .ogs-wrap { max-width: 1440px; }

.ogs-video-carousel {
	position: relative;
	display: block;
	margin-top: 30px;
}

.ogs-video-pencere {
	flex: 1 1 auto;
	min-width: 0;
}

.ogs-video-ray {
	display: flex;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ogs-video-ray::-webkit-scrollbar { display: none; }

.ogs-video-ray__oge {
	flex: 0 0 calc((100% - 40px) / 3);
	min-width: 0;
	scroll-snap-align: start;
	transition: opacity .25s ease;
}

/* Görünür pencerenin dışındaki kartlar soluk — kayan liste hissi verir.
   Klavye erişimi JS tarafında tabindex="-1" ile ayrıca kapatılır. */
.ogs-video-ray__oge--gizli { opacity: .35; }

/* Carousel gerekmeyecek kadar az video varsa düz grid gibi davranır.
   SATIR SARMASI ŞART: kart sayısı görünür sayıya göre belirlenmiş olsa da
   ekran daraldıkça kartlar sığmaz; sarmazsa yatay taşma yapar
   (20 Ağustos'ta 900px'de yakalandı — 5 Shorts satıra sığmıyordu). */
.ogs-video-carousel--sabit .ogs-video-ray {
	overflow-x: visible;
	flex-wrap: wrap;
	scroll-snap-type: none;
	row-gap: 24px;
}

.ogs-carousel-ok {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	/* Kart üstüne bindiği için opak zemin — thumbnail üzerinde okunur kalır. */
	background: rgba(16, 17, 18, .72);
	color: var(--ogs-white);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}

.ogs-carousel-ok--geri  { left: 10px; }
.ogs-carousel-ok--ileri { right: 10px; }

.ogs-carousel-ok:hover:not(:disabled) {
	background: var(--ogs-accent);
	border-color: var(--ogs-accent);
	color: var(--ogs-ink);
}

.ogs-carousel-ok:disabled {
	opacity: .3;
	cursor: default;
}

/* Koyu bölümde odak halkası beyaz (bkz. bölüm 2). */

/* 3 kart ancak kartlar makul genislikte kalabildigi surece gosterilir;
   daha dar ekranda 2, en darda 1 karta duser. JS bu degerleri olcerek
   otomatik takip eder (sabit esik tekrar tanimlanmaz). */
@media (max-width: 1150px) {
	.ogs-video-ray__oge { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 760px) {
	.ogs-video-ray__oge { flex-basis: 100%; }

	.ogs-carousel-ok { width: 40px; height: 40px; }
	.ogs-carousel-ok--geri  { left: 6px; }
	.ogs-carousel-ok--ileri { right: 6px; }
}

/* Dar ekranda genisletilmis kapsayici geri normale doner. */
@media (max-width: 1300px) {
	.ogs-projeler .ogs-wrap { max-width: 100%; }
}

/* Kartlar buyudugu icin baslik da bir tik buyudu. */
.ogs-video__title { font-size: 1.02rem; }

/* Hareket azaltma tercihi: yumuşak kaydırma kapanır, soluklaştırma da
   kaldırılır (JS scroll behavior'ı zaten 'auto'ya düşürür). */
@media (prefers-reduced-motion: reduce) {
	.ogs-video-ray { scroll-behavior: auto; }
	.ogs-video-ray__oge { transition: none; }
	.ogs-video-ray__oge--gizli { opacity: 1; }
}

/* YouTube ikonu — "YouTube kanalı" butonunun solunda.
   Reset'teki `svg { height: auto }` kuralını sınıf özgüllüğü ile geçer.
   Buton zaten inline-flex + align-items:center olduğu için dikey hiza
   kendiliğinden doğrudur; gap:8px metinle arayı verir. */
.ogs-yt-ikon {
	flex: 0 0 auto;
	height: 1.2em;
	width: auto;
	display: block;
}

/* ==========================================================================
   27. PROJELER SAYFASI (/projeler/) — kare ızgara
   Ana sayfadaki carousel'in aksine tüm videolar listelenir; sayı arttıkça
   sayfa aşağı doğru uzar. Shorts bu sayfaya dahil değildir.
   ========================================================================== */

.ogs-projeler-sayfa__giris { margin-bottom: 32px; }

.ogs-bolum-basi--sade {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.ogs-proje-izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Açık zeminli sayfada kart koyu tema yerine normal kart görünümünde. */
.ogs-proje-izgara .ogs-video {
	background: var(--ogs-white);
	border-color: var(--ogs-gray-line);
	height: 100%;
}

.ogs-proje-izgara .ogs-video__title { color: var(--ogs-ink); }

.ogs-proje-izgara .ogs-video__body {
	border-top: 1px solid var(--ogs-gray-line);
}

@media (max-width: 700px) {
	.ogs-proje-izgara {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Hero kapanış sloganı — H1 ile CTA arasında vurgu satırı. */
.ogs-hero__slogan {
	font-size: .96rem;
	font-weight: 600;
	color: var(--ogs-accent);
	margin: 4px 0 20px;
	padding-left: 12px;
	border-left: 3px solid var(--ogs-accent);
}

/* ==========================================================================
   28. ANA SAYFA — REFERANSLAR (kayan logo şeridi)
   Marka şeridiyle aynı teknik: saf CSS animasyon, JS yok, liste iki kez
   basılır. 33 logo olduğu için süre marka şeridinden uzun tutuldu.
   ========================================================================== */

.ogs-referans-serit {
	display: flex;
	overflow: hidden;
	margin-top: 26px;
	padding-block: 6px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.ogs-referans-serit__sira {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 14px;
	margin: 0;
	padding: 0 7px;
	list-style: none;
	/* 33 logo — marka şeridinden (45s) belirgin uzun, okunabilir hız. */
	animation: ogs-referans-kaydir 110s linear infinite;
	will-change: transform;
}

@keyframes ogs-referans-kaydir {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.ogs-referans-serit:hover .ogs-referans-serit__sira,
.ogs-referans-serit:focus-within .ogs-referans-serit__sira { animation-play-state: paused; }

/*
 * Kart ölçüsü ve logo sınırları (20 Ağustos düzeltmesi).
 *
 * Sorun: tüm logolar 80px YÜKSEKLİĞE normalize edilmiş. Dar/kare logolar
 * (torlak 63×80, engin 78×80, cemsun 80×80) yükseklikten sınırlanıp
 * 36-46px genişlikte kalıyordu; geniş olanlar (kromevye 347×80)
 * genişlikten sınırlanıp kartı kenardan kenara dolduruyordu.
 *
 * Çözüm: kart büyütüldü, izin verilen yükseklik artırıldı (dar logolar
 * büyüsün), genişlik sınırı içerik alanından DAR tutuldu (geniş logolar
 * kenara yapışmasın).
 */
.ogs-referans {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 190px;
	/* 78 → 96 → 132px. Kart yüksekliği dar/dikey logoların ULAŞABİLECEĞİ
	   en büyük boyutu belirler: 62px sınırla dikey bir logo en fazla
	   49×62 olabiliyordu. 100px ile 79×100'e çıkıyor. */
	min-height: 132px;
	padding: 16px 22px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-referans img {
	max-height: 100px;
	/* İçerik alanı 146px; 138 ile kenarda nefes payı. */
	max-width: 138px;
	width: auto;
	object-fit: contain;
	/* Logolar DOĞRUDAN RENKLİ gösterilir (20 Ağustos kararı).
	   Önce gri-scale + hover'da renk vardı; kaldırıldı. */
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ogs-referans-serit { overflow-x: auto; }
	.ogs-referans-serit__sira { animation: none !important; }
	.ogs-referans-serit__sira--kopya { display: none; }
}

/* ==========================================================================
   30. KATALOG TOPOLOJİSİ — alt grup kartlari ve marka sayaci
   /urunler/ → marka → aile → alt grup → urun akisinin ara kademeleri.
   ========================================================================== */

/* Marka kartinda urun sayisi (yalnizca /urunler/ girisinde basilir). */
.ogs-marka-dizin__sayi {
	display: block;
	width: 100%;
	margin-top: 4px;
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ogs-gray-mid);
}

/* Urun belgeleri — Google Drive klasor gorunumu, FACADE ile.
   Sayfa acilirken Google'a istek gitmez; dugmeye basilinca iframe
   olusturulur (YouTube facade'iyle ayni mantik, madde 17). */
/* Tetikleyici: telefon satirinin altinda, metin bagi gibi — kutu ya da
   dolgu yok, ust blogu buyutmesin. */
.ogs-urun__belge { margin: 6px 0 0; }

.ogs-belge-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ogs-ink);
	cursor: pointer;
	border-bottom: 2px solid var(--ogs-accent);
	line-height: 1.4;
}
.ogs-belge-link:hover { color: var(--ogs-accent-dark); }

/* Goruntuleyici kabi — ust blogun altinda, tam genislik. Kapaliyken
   HIC yer kaplamaz (`hidden`), teknik ozelliklerin arasini acmaz. */
.ogs-belgeler {
	margin-top: 20px;
	padding: 14px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}
.ogs-belgeler[hidden] { display: none; }

.ogs-belgeler__aciklama {
	margin: 0 0 10px;
	color: var(--ogs-gray-mid);
	font-size: .88rem;
}

.ogs-belgeler__cerceve {
	display: block;
	width: 100%;
	height: 260px;
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	background: var(--ogs-white);
}

@media (max-width: 600px) {
	.ogs-belgeler__cerceve { height: 320px; }
}

/* Kademeli filtre: kutular YAN YANA, secim ilerledikce yenisi acilir.
   `hidden` ozniteligi flex icinde gorunur kalabilir — acikca gizle. */
.ogs-filtre--kademeli { flex-wrap: wrap; }
.ogs-filtre__alan[hidden] { display: none !important; }

/* Urun grubu tanitimi — urun listesinin ustunde.
   Gorsel solda sabit genislikte, metin sagda akar; dar ekranda gorsel
   ustte tam genislige gecer. */
.ogs-grup-tanitim-sarmal { padding-block: 40px 0; }

.ogs-grup-tanitim {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.ogs-grup-tanitim__gorsel {
	flex: 0 0 420px;
	padding: 12px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-grup-tanitim__gorsel img {
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.ogs-grup-tanitim__metin { flex: 1 1 auto; min-width: 0; }

.ogs-grup-tanitim__metin p {
	margin: 0 0 14px;
	font-size: 1.01rem;
	line-height: 1.75;
	color: var(--ogs-gray-mid);
}
.ogs-grup-tanitim__metin p:last-child { margin-bottom: 0; }

/* `**vurgu**` — model adlarini ayirmak icin; renk degil agirlik. */
.ogs-grup-tanitim__metin strong { color: var(--ogs-ink); font-weight: 700; }

@media (max-width: 900px) {
	.ogs-grup-tanitim { flex-direction: column; gap: 20px; }
	.ogs-grup-tanitim__gorsel { flex: 0 0 auto; width: 100%; }
}

/* Kademe kartlari: gorsel + ad + urun sayisi. Marka, aile ve alt grup
   ayni gorunumu kullanir; kullanici tek desen ogrenir. */
.ogs-dugum-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-dugum__baglanti {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ogs-dugum__baglanti:hover,
.ogs-dugum__baglanti:focus-visible {
	border-color: var(--ogs-gray-mid);
	box-shadow: var(--ogs-shadow-md);
}

.ogs-dugum__gorsel {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--ogs-gray-bg);
	border-bottom: 1px solid var(--ogs-gray-line);
	overflow: hidden;
}

.ogs-dugum__gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ogs-dugum__gorsel--yok {
	font-size: 2rem;
	color: var(--ogs-gray-soft);
}

.ogs-dugum__govde {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
}

.ogs-dugum__ad {
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--ogs-ink);
}

.ogs-dugum__sayi {
	font-size: .82rem;
	color: var(--ogs-gray-mid);
}

.ogs-dugum__ok {
	padding: 0 16px 14px;
	color: var(--ogs-accent-dark);
	font-size: 1.05rem;
}

/* Alt grup listesi: satir satir, tiklanabilir genis hedef. */
.ogs-alt-grup {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-alt-grup__baglanti {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-left: 3px solid var(--ogs-accent);
	border-radius: var(--ogs-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.ogs-alt-grup__baglanti:hover,
.ogs-alt-grup__baglanti:focus-visible {
	border-color: var(--ogs-gray-mid);
	border-left-color: var(--ogs-accent);
	box-shadow: var(--ogs-shadow-md);
}

.ogs-alt-grup__ad {
	flex: 1 1 auto;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--ogs-ink);
}

.ogs-alt-grup__sayi {
	flex: 0 0 auto;
	font-size: .82rem;
	color: var(--ogs-gray-mid);
}

.ogs-alt-grup__ok {
	flex: 0 0 auto;
	color: var(--ogs-accent-dark);
	font-size: 1.05rem;
}

/* ==========================================================================
   29. MARKA SAYFASI — ÜRÜN AİLELERİ + SABİT TEKLİF BUTONU
   /markalar/{marka}/ · taxonomy-marka.php
   Ürün verisi gelene kadar marka sayfasının gövdesi bu bölümdür.
   ========================================================================== */

/* Sabit butonun genisligi. Icerigin altina girmemesi icin ayrilan
   bosluk bu degiskenden hesaplanir; buton buyurse tek yerden ayarlanir. */
:root { --ogs-teklif-w: 140px; }

.ogs-aile-kisayol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
}

.ogs-aile-liste {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ogs-aile {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	padding: 24px;
	background: var(--ogs-white);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
	/* Kisayoldan atlayinca baslik sabit header'in altinda kalmasin. */
	scroll-margin-top: calc(var(--ogs-header-h) + 16px);
}

.ogs-aile__gorsel {
	flex: 0 0 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 12px;
	background: var(--ogs-gray-bg);
	border-radius: var(--ogs-radius);
}

.ogs-aile__gorsel img {
	max-width: 100%;
	max-height: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;   /* beyaz zeminli ürün fotoğrafını yumuşatır */
}

.ogs-aile__metin { flex: 1 1 auto; min-width: 0; }

.ogs-aile__baslik {
	margin: 0 0 10px;
	font-size: 1.22rem;
	line-height: 1.3;
	letter-spacing: -.01em;
}

.ogs-aile__ozet {
	margin: 0 0 14px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ogs-gray-mid);
}

.ogs-aile__ozet p { margin: 0 0 10px; }
.ogs-aile__ozet p:last-child { margin-bottom: 0; }
/* OGS metinlerindeki `**vurgu**` — renk degil agirlik degisir, gri
   govde metninin icinde okunakli kalsin diye ana metin rengi verilir. */
.ogs-aile__ozet strong { color: var(--ogs-ink); font-weight: 700; }

/* --- Marka tanitim blogu (OGS'nin verdigi genel gorsel + metin) --- */
.ogs-marka-tanitim-sarmal { padding-block: 44px 0; }

.ogs-marka-tanitim {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.ogs-marka-tanitim__gorsel {
	flex: 0 0 340px;
	padding: 16px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: var(--ogs-radius);
}

.ogs-marka-tanitim__gorsel img {
	width: 100%;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.ogs-marka-tanitim__metin { flex: 1 1 auto; min-width: 0; }

.ogs-marka-tanitim__metin p {
	margin: 0 0 14px;
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--ogs-gray-mid);
}
.ogs-marka-tanitim__metin p:last-child { margin-bottom: 0; }
.ogs-marka-tanitim__metin strong { color: var(--ogs-ink); }

@media (max-width: 860px) {
	.ogs-marka-tanitim { flex-direction: column; gap: 20px; }
	.ogs-marka-tanitim__gorsel { flex: 0 0 auto; width: 100%; }
}

/* --- Urun kodu etiketleri (ÜNTEL KABLO gibi kod bazli markalar) ---
   Alt alta liste yerine YAN YANA akan etiketler: 126 kodlu bir sayfa
   aksi halde metrelerce uzuyordu. Etiketler tiklanabilir degil, bilgi
   amaclidir; teklif icin sayfanin sabit "Teklif Al" dugmesi var. */
.ogs-aile__kodlar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-aile__kodlar li {
	padding: 4px 10px;
	background: var(--ogs-gray-bg);
	border: 1px solid var(--ogs-gray-line);
	border-radius: 2px;
	font-family: var(--ogs-font-mono);
	font-size: .8rem;
	line-height: 1.45;
	color: var(--ogs-steel);
	/* Kod icinde bosluk varsa satir ortasindan bolunmesin. */
	white-space: nowrap;
}

.ogs-aile__teklif {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ogs-ink);
	border-bottom: 2px solid var(--ogs-accent);
	padding-bottom: 2px;
}
.ogs-aile__teklif:hover { color: var(--ogs-accent-dark); }

.ogs-marka-urunler { margin-top: 56px; }

/* --- Sabit Teklif Al butonu ------------------------------------------------
   `fixed`, `sticky` değil: sticky en yakın kaydırılabilir atanın içinde
   kalır ve gövde bitince kaybolurdu. Sayfa ne kadar uzarsa uzasın buton
   ekranda durmalı.
   z-index 80: header (100) üstünü örtmez, WhatsApp (90) ile de çakışmaz —
   zaten biri sağ üstte, diğeri sağ altta. */
.ogs-teklif-sabit {
	position: fixed;
	/* Sayfa BAŞINDA üst şerit (38px) + header (100px) = 138px yer kaplar;
	   header sticky ama üst şerit değil, yani kaydırınca 100px'e düşer.
	   Ölçü büyük olana göre alınır — aksi halde düğme sayfa başında
	   header'ın altında kalıyordu (z-index 100 > 80). */
	top: calc(var(--ogs-topbar-h) + var(--ogs-header-h) + 18px);
	right: 18px;
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--ogs-teklif-w);
	padding: 12px 16px;
	background: var(--ogs-accent);
	/* Aksan açık renktir → üzerine KOYU metin. Beyaz metin yasak. */
	color: var(--ogs-ink);
	border-radius: var(--ogs-radius);
	box-shadow: var(--ogs-shadow-md);
	font-size: .93rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .15s ease, transform .15s ease;
}

.ogs-teklif-sabit:hover {
	background: var(--ogs-accent-dark);
	color: var(--ogs-ink);
	transform: translateY(-1px);
}

.ogs-teklif-sabit__ikon { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
	.ogs-teklif-sabit { transition: none; }
	.ogs-teklif-sabit:hover { transform: none; }
}

/* Buton icerigin uzerine binmesin diye sag tarafta yer ayrilir.
   1024–1560px arasi kritik bant: sarmalayici (1240px) ekrani doldurdugu
   icin buton icerik alaninin icine dusuyor. */
/* Asagidaki kurallar `.ogs-sabit-teklif` govde sinifina baglidir; sinifi
   `ogs_teklif_sabit_body_class()` ekler. Duğme yeni bir sayfaya
   eklendiginde `ogs_sabit_teklif_var()` guncellenir, CSS'e dokunulmaz. */
@media (min-width: 1024px) {
	body.ogs-sabit-teklif .ogs-marka-govde,
	body.ogs-sabit-teklif .ogs-marka-dizin-govde,
	body.ogs-sabit-teklif .ogs-marka-tanitim-sarmal,
	body.ogs-sabit-teklif .ogs-page-head .ogs-wrap {
		padding-right: calc(20px + var(--ogs-teklif-w) + 18px);
	}
}

/* Ekran yeterince genis: sarmalayicinin sagindaki bosluk butonu zaten
   aliyor, icerigi daraltmaya gerek yok. */
@media (min-width: 1600px) {
	body.ogs-sabit-teklif .ogs-marka-govde,
	body.ogs-sabit-teklif .ogs-marka-dizin-govde,
	body.ogs-sabit-teklif .ogs-marka-tanitim-sarmal,
	body.ogs-sabit-teklif .ogs-page-head .ogs-wrap { padding-right: 20px; }
}

/* --- Mobil ---------------------------------------------------------------
   Sag ustte kalinca hem logoyla hem H1 ile cakisiyordu. Alt kenara tam
   genislikte oturur; parmak erisimi de daha kolay. */
@media (max-width: 1023px) {
	.ogs-teklif-sabit {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		border-radius: 0;
		padding: 15px 16px;
		/* iPhone alt cubugu butonu yemesin. */
		padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -4px 16px rgba(16, 17, 18, .14);
	}

	/* Alt cubuk footer'in son satirini ortmesin. */
	body.ogs-sabit-teklif { padding-bottom: 62px; }

	/* WhatsApp butonu alt cubugun uzerine cikar. */
	body.ogs-sabit-teklif .ogs-wa-float { bottom: calc(62px + 14px); }
}

@media (max-width: 719px) {
	.ogs-aile {
		flex-direction: column;
		gap: 16px;
		padding: 18px;
	}

	.ogs-aile__gorsel {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
	}

	.ogs-aile__gorsel img { max-height: 190px; }
}

/* ---------------------------------------------------------------------
   ÜRÜN MEDYA GALERİSİ  (23 Ağustos — Flexem FL8 ile geldi)
   Ana görselin altında küçük resim şeridi; ilk sıra tanıtım videosu.
   Video FACADE: kapak görseli durur, tıklanınca <video> oluşturulur —
   24 MB'lık dosya sayfa açılışında İNMEZ.
   --------------------------------------------------------------------- */

/* Şerit ÇERÇEVENİN ALTINDA, yatay. İçine konunca ana görseli eziyordu. */
.ogs-urun__medya { display: block; }

.ogs-galeri {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: .6rem 0 0;
	padding: 0;
	list-style: none;
}

.ogs-galeri__oge { margin: 0; }

.ogs-galeri__bag {
	position: relative;
	display: block;
	width: 116px;
	border: 1px solid var(--ogs-line, #e2e5e9);
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	line-height: 0;
}

.ogs-galeri__bag:hover,
.ogs-galeri__bag:focus-visible { border-color: var(--ogs-accent); }

.ogs-galeri__bag.is-secili { border-color: var(--ogs-ink); }

.ogs-galeri__bag img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

/* Oynat üçgeni — saf CSS, ikon dosyası ya da harici istek yok. */
.ogs-galeri__oynat {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(16, 17, 18, .72);
}

.ogs-galeri__oynat::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}

.ogs-galeri__ana { line-height: 0; }

.ogs-galeri__video {
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: #000;
}

/* ---------------------------------------------------------------------
   PROTOKOL ROZETLERİ
   Veri "Veri Yolu Protokolleri" teknik satırından gelir; ayrı meta yok.
   --------------------------------------------------------------------- */

.ogs-urun__blok--protokol { margin-bottom: 1.25rem; }

.ogs-protokol {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ogs-protokol__oge {
	padding: .32rem .7rem;
	border: 1px solid var(--ogs-line, #e2e5e9);
	border-left: 3px solid var(--ogs-accent);
	border-radius: 3px;
	background: #fff;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--ogs-graphite);
	white-space: nowrap;
}

/* Logolu rozet: aksan çubuğu YOK — logonun kendi rengi öne çıksın. */
.ogs-protokol__oge--logo {
	display: inline-flex;
	align-items: center;
	padding: .4rem .75rem;
	border-left-width: 1px;
	border-left-color: var(--ogs-line, #e2e5e9);
}

.ogs-protokol__oge--logo img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
}

/* =========================================================================
 * RTL (Arapça) — dir="rtl" iken fiziksel özellikleri aynala.
 * inc/dil.php <html dir="rtl"> basar (ar 'yon'=>'rtl'). Latin alfabeli
 * diller (tr/en/de) etkilenmez; blok yalnız [dir="rtl"] altında geçerli.
 * ===================================================================== */
[dir="rtl"] { text-align: right; }

/* Sağa yaslanan (margin-left:auto) öğeler → RTL'de sola */
[dir="rtl"] .ogs-nav,
[dir="rtl"] .ogs-nav-toggle__label,
[dir="rtl"] .ogs-footer__sosyal,
[dir="rtl"] .ogs-hizli-ara { margin-left: 0; margin-right: auto; }

/* Metin hizalama — tablo/liste sola değil sağa yaslı */
[dir="rtl"] .ogs-spec-table,
[dir="rtl"] .ogs-spec-table th,
[dir="rtl"] .ogs-spec-table td,
[dir="rtl"] .ogs-kod-tablo,
[dir="rtl"] .ogs-kod-tablo th,
[dir="rtl"] .ogs-kod-tablo td,
[dir="rtl"] .ogs-drive__klasor { text-align: right; }

/* Açılır dil listesi ve yüzen sabit butonlar → karşı kenara */
[dir="rtl"] .ogs-dil__liste { right: auto; left: 0; }
[dir="rtl"] .ogs-wa-float,
[dir="rtl"] .ogs-teklif-sabit { right: auto; left: 18px; }

/* Kayan logo/referans şeritleri RTL'de de LTR akmalı. Marquee animasyonu
   translateX(-100%) ile LTR kurulu; RTL flex akışı yönü ters çevirince döngü
   kopuyor (bir kez akıp duruyordu). Logolar yönsüz — LTR akış her dilde doğru. */
[dir="rtl"] .ogs-marka-serit,
[dir="rtl"] .ogs-referans-serit { direction: ltr; }

/* Hero üstü slider: translateX tabanlı kaydırma RTL'de ters yöne gider
   (2. slide boş görünür). İçerik görsel olduğundan slider'ı LTR'ye sabitle;
   ok yönleri (sol=önceki, sağ=sonraki) tutarlı kalır. */
[dir="rtl"] .ogs-hust { direction: ltr; }

/* ==========================================================================
   HERO ÜSTÜ TANITIM BANNER SLIDER
   Metin görsele gömülü (kaymaz); dile göre görsel. 10 sn oto + ok + nokta.
   ========================================================================== */
.ogs-hust {
	position: relative;
	overflow: hidden;
	/* Banner ortada duruyor; yanlardaki boşluk hero görseliyle (koyu overlay)
	   doldurulur — beyaz boşluk yerine sayfayla tutarlı koyu zemin. */
	background:
		linear-gradient( rgba(9, 20, 36, .82), rgba(9, 20, 36, .82) ),
		var(--ogs-hero-bg, var(--ogs-ink)) center / cover no-repeat;
}
.ogs-hust__pencere {
	overflow: hidden;
	max-width: 1440px;   /* banner ~%25 küçük, ortalı; yanlar hero zemini */
	margin: 0 auto;
}
.ogs-hust__ray {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .6s ease;
}
.ogs-hust__slide { flex: 0 0 100%; min-width: 0; }
.ogs-hust__slide img { display: block; width: 100%; height: auto; }

.ogs-hust__ok {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(16, 17, 18, .5);
	color: #fff;
	font-size: 1.9rem;
	line-height: 1;
	border-radius: 50%;
	transition: background .2s;
}
.ogs-hust__ok:hover,
.ogs-hust__ok:focus-visible { background: rgba(16, 17, 18, .82); }
.ogs-hust__ok--onceki { left: 14px; }
.ogs-hust__ok--sonraki { right: 14px; }

.ogs-hust__noktalar {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.ogs-hust__nokta {
	/* Görsel nokta 10px; padding + content-box ile dokunma hedefi ~26px
	   (WCAG 2.5.5 dokunma alanı), görsel boyut değişmez. */
	box-sizing: content-box;
	width: 10px;
	height: 10px;
	padding: 8px;
	border: 0;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	background-clip: content-box;
	transition: background .2s;
}
.ogs-hust__nokta--aktif { background: var(--ogs-accent); background-clip: content-box; }

@media (max-width: 600px) {
	.ogs-hust__ok { width: 36px; height: 36px; font-size: 1.5rem; }
	.ogs-hust__ok--onceki { left: 8px; }
	.ogs-hust__ok--sonraki { right: 8px; }
}

/* =========================================================================
 * Dokunmatik hedefler — mobil/tablette min ~44px (WCAG 2.5.5).
 * ===================================================================== */
@media (max-width: 1280px) {
	.ogs-nav a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 760px) {
	.ogs-sosyal__bag { width: 40px; height: 40px; }
	.ogs-dil__btn { padding: 9px 10px; }
	.ogs-nav-toggle__label { padding: 11px 14px; }
}