@charset "UTF-8";
/* ===========================================================================
   okyanussebze.com.tr — Site stili
   ---------------------------------------------------------------------------
   Tek dosya, çerçevesiz (Bootstrap yok), jQuery yok. Yalnızca CSS Grid/Flex.

   ── TASARIMIN DAYANDIĞI KISIT: KAYNAK GÖRSELLER KÜÇÜK ─────────────────────
   Eski siteden devralınan fotoğrafların en büyüğü 750x500, ürün kareleri
   136x136. Bu yüzden:
     - TAM EKRAN kahraman görseli YOK; kahraman ikiye bölünmüş bir ızgaradır
       ve görsel kutusu en çok 640 px'tir (kaynak büyütülmez).
     - Ürün kartlarının görsel kutusu 136 px'i AŞMAZ; kart dolgu ve tipografi
       ile büyür, görsel değil.
     - `object-fit: cover` kullanılan her kutunun oranı, o klasöre yüklenmesi
       önerilen görsel oranıyla EŞİTTİR (yoksa cover kenarları kırpar).

   ── RENKLER ────────────────────────────────────────────────────────────────
   Turuncu (#ED6D00) müşterinin LOGO RENGİDİR — logodan ölçüldü, değiştirilmez.
   Koyu yeşil (#124A3C) firmanın araç giydirmesinden alındı (kamyon brandası).
   Arayüz logoya uyarlandı, logo arayüze değil.

   ── YAZI TİPİ ──────────────────────────────────────────────────────────────
   Manrope: latin + kiril destekler (tr/en/ru). Arapça için Noto Sans Arabic
   ayrıca yüklenir ve `.dil-ar` altında devreye girer.
   =========================================================================== */

:root
{
	--yesil:        #124a3c;
	--yesil-koyu:   #0d3a30;
	--yesil-acik:   #1c6a54;
	--turuncu:      #ed6d00;
	--turuncu-koyu: #cc5e00;
	--murekkep:     #16211e;
	--sessiz:       #637a72;
	--cizgi:        #e2eae6;
	--yuzey:        #f5f8f6;
	--beyaz:        #ffffff;

	--r:   14px;
	--r-s: 10px;
	--golge:      0 1px 2px rgba(18,74,60,.05), 0 8px 24px rgba(18,74,60,.07);
	--golge-sert: 0 2px 6px rgba(18,74,60,.08), 0 18px 44px rgba(18,74,60,.12);

	--ust-yuk: 76px;         /* yapışkan başlığın yüksekliği (çapa kaydırması) */
	--gecis: .18s ease;
}

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

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

/* Çapa hedefleri yapışkan başlığın ALTINDA kalsın (#urun-takibi gibi) */
[id] { scroll-margin-top: calc(var(--ust-yuk) + 16px); }

body
{
	margin: 0;
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: var(--murekkep);
	background: var(--beyaz);
	-webkit-font-smoothing: antialiased;
}

/* Arapça: kendi yazı tipi + biraz daha büyük gövde (harf yükseklikleri düşük) */
body.dil-ar
{
	font-family: 'Noto Sans Arabic', 'Manrope', system-ui, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.85;
}

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

a { color: var(--yesil); text-decoration: none; }
a:hover { color: var(--turuncu); }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.15rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.25em; }

/* Arapçada sıkı harf aralığı okunurluğu bozar */
body.dil-ar h1, body.dil-ar h2, body.dil-ar h3 { letter-spacing: 0; }

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

/* Ekran okuyucuya görünür, ekranda görünmez */
.gizli-metin
{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

/* Klavyeyle gezinende ilk sekme: doğrudan içeriğe */
.atla
{
	position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
	background: var(--yesil); color: #fff;
	padding: 10px 16px; border-radius: 0 0 var(--r-s) var(--r-s);
	transition: top var(--gecis);
}
.atla:focus { top: 0; color: #fff; }


/* ===========================================================================
   DÜZEN
   =========================================================================== */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.wrap-dar { max-width: 760px; }

.bolum { padding: clamp(44px, 6vw, 84px) 0; }
.bolum-dar { padding-bottom: 0; }
.bolum-acik { background: var(--yuzey); }

.bolum-bas { max-width: 680px; margin-bottom: 32px; }
.bolum-bas h2 { margin-bottom: .3em; }
.bolum-bas-satir
{
	max-width: none;
	display: flex; flex-wrap: wrap; gap: 12px 24px;
	align-items: flex-end; justify-content: space-between;
}

.etiket
{
	margin: 0 0 .5em;
	font-size: .78rem; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--turuncu);
}
body.dil-ar .etiket { letter-spacing: 0; }

.bolum-alt { color: var(--sessiz); margin: 0; }
.bolum-alt-tek { margin-bottom: 20px; }

.bag { font-weight: 700; color: var(--yesil); white-space: nowrap; }
.bag:hover { color: var(--turuncu); }


/* ===========================================================================
   DÜĞMELER
   =========================================================================== */
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.dugme
{
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px;                 /* dokunma hedefi */
	padding: 12px 24px;
	border: 2px solid transparent; border-radius: 999px;
	font: inherit; font-weight: 700; line-height: 1.2;
	cursor: pointer; text-align: center;
	transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme:active { transform: translateY(1px); }

.dugme-dolu { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }
.dugme-dolu:hover { background: var(--turuncu-koyu); border-color: var(--turuncu-koyu); color: #fff; }

.dugme-cizgi { border-color: var(--cizgi); color: var(--yesil); background: #fff; }
.dugme-cizgi:hover { border-color: var(--yesil); color: var(--yesil); }

.dugme-acik { background: #fff; border-color: #fff; color: var(--yesil); }
.dugme-acik:hover { background: var(--turuncu); border-color: var(--turuncu); color: #fff; }


/* ===========================================================================
   BAŞLIK
   =========================================================================== */
.ust
{
	position: sticky; top: 0; z-index: 90;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(1.4) blur(8px);
	border-bottom: 1px solid var(--cizgi);
}
/* ⚠ backdrop-filter veren ata, position:fixed torunu kendi kutusuna hapseder.
   Mobil menü bu yüzden FIXED DEĞİL, başlığın altında akan bir panel olarak
   çizilir (aşağıdaki .menu kuralına bakın). */

.ust-serit { background: var(--yesil); color: rgba(255,255,255,.88); font-size: .82rem; }
.ust-serit-ic { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
.serit-bosluk { flex: 1 1 auto; }

.serit-link { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
.serit-link:hover { color: #fff; }
.serit-link svg { width: 15px; height: 15px; fill: var(--turuncu); flex: none; }

.diller { display: flex; gap: 4px; }
.diller a
{
	display: inline-block; min-width: 34px; padding: 4px 8px;
	border-radius: 999px; text-align: center;
	font-size: .76rem; font-weight: 800; letter-spacing: .05em;
	color: rgba(255,255,255,.75);
}
.diller a:hover { background: rgba(255,255,255,.14); color: #fff; }
.diller a.etkin { background: var(--turuncu); color: #fff; }

.ust-ic { display: flex; align-items: center; gap: 20px; min-height: var(--ust-yuk); }

.logo { flex: none; }
.logo img { width: 164px; height: auto; }

.menu { margin-inline-start: auto; }
.menu-liste { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu-liste > li { position: relative; }

.menu-liste > li > a
{
	display: inline-flex; align-items: center; gap: 4px;
	padding: 10px 13px; border-radius: var(--r-s);
	font-size: .94rem; font-weight: 700; color: var(--murekkep);
	white-space: nowrap;
}
.menu-liste > li > a:hover { background: var(--yuzey); color: var(--yesil); }
.menu-liste > li > a.etkin { color: var(--turuncu); }
.menu-liste .ok { width: 16px; height: 16px; fill: currentColor; opacity: .55; }

.menu-cta
{
	background: var(--yesil); color: #fff !important;
	padding-inline: 20px !important;
	border-radius: 999px !important;
}
.menu-cta:hover { background: var(--turuncu); }

/* Alt menü — masaüstünde üzerine gelince, klavyeyle odaklanınca */
.alt-menu
{
	position: absolute; inset-inline-start: 0; top: calc(100% + 6px);
	min-width: 230px; margin: 0; padding: 8px; list-style: none;
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
	box-shadow: var(--golge-sert);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}
.alt-menulu:hover > .alt-menu,
.alt-menulu:focus-within > .alt-menu { opacity: 1; visibility: visible; transform: none; }

.alt-menu a
{
	display: block; padding: 9px 12px; border-radius: var(--r-s);
	font-size: .92rem; font-weight: 600; color: var(--murekkep);
}
.alt-menu a:hover { background: var(--yuzey); color: var(--yesil); }

.menu-dugme
{
	display: none;
	margin-inline-start: auto;
	width: 46px; height: 46px; padding: 0;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-s);
	cursor: pointer;
}
.menu-cizgi, .menu-cizgi::before, .menu-cizgi::after
{
	display: block; width: 20px; height: 2px; margin-inline: auto;
	background: var(--murekkep); border-radius: 2px;
	transition: transform var(--gecis), opacity var(--gecis);
}
.menu-cizgi { position: relative; }
.menu-cizgi::before, .menu-cizgi::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-cizgi::before { top: -6px; }
.menu-cizgi::after  { top:  6px; }

.menu-dugme[aria-expanded="true"] .menu-cizgi { background: transparent; }
.menu-dugme[aria-expanded="true"] .menu-cizgi::before { transform: translateY(6px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] .menu-cizgi::after  { transform: translateY(-6px) rotate(-45deg); }

/* Kırıntı yolu */
.kirinti
{
	border-bottom: 1px solid var(--cizgi);
	background: var(--yuzey);
	font-size: .85rem; color: var(--sessiz);
}
.kirinti .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-block: 11px; }
.kirinti a { color: var(--sessiz); }
.kirinti a:hover { color: var(--turuncu); }
.kirinti .simdi { color: var(--murekkep); font-weight: 700; }


/* ===========================================================================
   KAHRAMAN (ana sayfa)
   =========================================================================== */
.kahraman
{
	padding: clamp(32px, 5vw, 72px) 0;
	background:
		radial-gradient(900px 420px at 88% 0%, rgba(237,109,0,.10), transparent 62%),
		linear-gradient(180deg, var(--yuzey), #fff);
}
.kahraman-ic
{
	display: grid; gap: clamp(28px, 4vw, 56px);
	grid-template-columns: 1fr;
	align-items: center;
}
.kahraman-metin { min-width: 0; }
.kahraman-baslik
{
	margin: 0 0 .4em;
	font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.2rem);
	font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
	color: var(--yesil);
}
body.dil-ar .kahraman-baslik { letter-spacing: 0; line-height: 1.35; }
.kahraman-alt { font-size: 1.08rem; color: var(--sessiz); max-width: 48ch; }

.kahraman-noktalar { display: flex; gap: 8px; margin-top: 28px; }
.kahraman-noktalar button
{
	width: 30px; height: 6px; padding: 0;
	background: var(--cizgi); border: 0; border-radius: 999px;
	cursor: pointer; transition: background var(--gecis), width var(--gecis);
}
.kahraman-noktalar button[aria-selected="true"] { background: var(--turuncu); width: 48px; }

.kahraman-gorsel
{
	position: relative;
	aspect-ratio: 3 / 2;            /* kaynak 750x500 = 3:2 — cover kırpmasın */
	border-radius: calc(var(--r) * 1.6);
	overflow: hidden;
	box-shadow: var(--golge-sert);
	background: var(--yuzey);
}
.kahraman-foto
{
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity .5s ease;
}
.kahraman-foto.etkin { opacity: 1; }


/* ===========================================================================
   RAKAMLAR
   =========================================================================== */
.rakamlar { background: var(--yesil); color: #fff; }
.rakam-ic
{
	display: grid; gap: 4px 20px;
	grid-template-columns: repeat(2, 1fr);
	padding-block: clamp(26px, 3.5vw, 44px);
}
.rakam { padding: 10px 0; }
.rakam strong
{
	display: block;
	font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 800;
	line-height: 1.1; color: var(--turuncu);
}
.rakam span { font-size: .92rem; color: rgba(255,255,255,.82); }


/* ===========================================================================
   KATEGORİ KARTLARI
   =========================================================================== */
.kat-izgara { display: grid; gap: 20px; grid-template-columns: 1fr; }

.kat-kart
{
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
	overflow: hidden; color: var(--murekkep);
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.kat-kart:hover
{
	transform: translateY(-3px);
	border-color: transparent; box-shadow: var(--golge-sert); color: var(--murekkep);
}
.kat-foto
{
	display: block;
	aspect-ratio: 300 / 259;        /* kaynak kategori görselinin oranı */
	background: var(--yuzey); overflow: hidden;
}
.kat-foto img { width: 100%; height: 100%; object-fit: cover; }

.kat-govde { display: block; padding: 22px; }
.kat-sayi
{
	display: block; margin-bottom: 4px;
	font-size: .78rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: var(--turuncu);
}
body.dil-ar .kat-sayi { letter-spacing: 0; }
.kat-ad { display: block; font-size: 1.3rem; font-weight: 800; color: var(--yesil); }
.kat-ozet { display: block; margin-top: 6px; color: var(--sessiz); font-size: .95rem; }
.kat-ok { display: block; margin-top: 14px; font-weight: 700; color: var(--turuncu); }

.kat-kart-sade { background: var(--yesil); border-color: var(--yesil); }
.kat-kart-sade .kat-ad { color: #fff; }
.kat-kart-sade .kat-ozet { color: rgba(255,255,255,.75); }
.kat-kart-sade .kat-sayi { color: rgba(255,255,255,.6); }


/* ===========================================================================
   İKİLİ BLOK (görsel + metin)
   =========================================================================== */
.ikili { display: grid; gap: clamp(24px, 4vw, 52px); grid-template-columns: 1fr; align-items: center; }
.ikili-gorsel
{
	aspect-ratio: 5 / 4;
	border-radius: var(--r); overflow: hidden;
	background: var(--yuzey); box-shadow: var(--golge);
}
.ikili-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.ikili-metin { min-width: 0; }

.yazi-govde { color: #32433d; }
.yazi-govde :where(h2, h3) { color: var(--yesil); margin-top: 1.4em; }
.yazi-govde :where(p, li) { font-size: 1.02rem; }
.yazi-govde a { text-decoration: underline; }

/* Süreç maddeleri: madde imi yerine onay işareti */
.liste-tik ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.liste-tik li
{
	position: relative;
	padding-inline-start: 36px;
	padding-block: 2px;
}
.liste-tik li::before
{
	content: "";
	position: absolute; inset-inline-start: 0; top: .45em;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--turuncu) no-repeat center / 12px 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}


/* ===========================================================================
   SÜREÇ KARTLARI
   =========================================================================== */
.surec-izgara { display: grid; gap: 18px; grid-template-columns: 1fr; }
.surec-kart
{
	display: block; padding: 26px 24px;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
	color: var(--murekkep);
	transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.surec-kart:hover { background: #fff; transform: translateY(-3px); box-shadow: var(--golge-sert); color: var(--murekkep); }
.surec-no
{
	display: block; margin-bottom: 10px;
	font-size: 1.6rem; font-weight: 800; color: var(--turuncu);
	font-variant-numeric: tabular-nums;
}
.surec-no.buyuk { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.6rem); line-height: 1; }
.surec-ad { display: block; font-size: 1.12rem; font-weight: 800; color: var(--yesil); }
.surec-ozet { display: block; margin-top: 8px; color: var(--sessiz); font-size: .95rem; }

.surec-bas { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.surec-bas h2 { margin-bottom: .25em; }
.surec-govde { display: grid; gap: 28px; grid-template-columns: 1fr; }
.surec-fotolar { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); align-content: start; }
.surec-fotolar a
{
	display: block; aspect-ratio: 1 / 1;
	border-radius: var(--r-s); overflow: hidden; background: var(--yuzey);
}
.surec-fotolar img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.surec-fotolar a:hover img { transform: scale(1.05); }

/* Sayfa içi bölüm menüsü */
.ic-menu { border-bottom: 1px solid var(--cizgi); background: #fff; }
.ic-menu-ic
{
	display: flex; gap: 6px; overflow-x: auto; padding-block: 10px;
	scrollbar-width: thin;
}
.ic-menu-ic a
{
	flex: none; padding: 8px 16px; border-radius: 999px;
	font-size: .9rem; font-weight: 700; color: var(--sessiz);
	background: var(--yuzey); white-space: nowrap;
}
.ic-menu-ic a:hover { color: var(--yesil); }
.ic-menu-ic a.etkin { background: var(--yesil); color: #fff; }


/* ===========================================================================
   TAKVİM ÇAĞRISI
   =========================================================================== */
.takvim-cta { background: var(--yesil-koyu); color: #fff; padding: clamp(34px, 4.5vw, 58px) 0; }
.takvim-cta-ic { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.takvim-cta h2 { margin-bottom: .25em; }
.takvim-cta p { margin: 0; color: rgba(255,255,255,.78); max-width: 52ch; }


/* ===========================================================================
   GALERİ ŞERİDİ / IZGARALAR
   =========================================================================== */
.serit
{
	display: grid; gap: 12px;
	grid-auto-flow: column; grid-auto-columns: 74%;
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: 6px;
}
.serit-kare { scroll-snap-align: start; border-radius: var(--r); overflow: hidden; background: var(--yuzey); }
.serit-kare img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.foto-izgara { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.foto { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--yuzey); }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.foto:hover img { transform: scale(1.04); }
.foto-ad
{
	position: absolute; inset-inline: 0; bottom: 0;
	padding: 26px 14px 12px; color: #fff; font-size: .88rem; font-weight: 700;
	background: linear-gradient(transparent, rgba(13,58,48,.86));
}

.belge-izgara { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.belge { display: block; color: var(--murekkep); }
.belge-foto
{
	display: block; aspect-ratio: 5 / 7;   /* belgeler dikey tarandı (500x710) */
	border-radius: var(--r); overflow: hidden;
	background: var(--yuzey); border: 1px solid var(--cizgi);
	transition: box-shadow var(--gecis), transform var(--gecis);
}
.belge:hover .belge-foto { box-shadow: var(--golge-sert); transform: translateY(-3px); }
.belge-foto img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.belge-ad { display: block; margin-top: 12px; font-weight: 700; font-size: .95rem; }
.belge-ipucu { display: block; font-size: .82rem; color: var(--sessiz); }

.basin-izgara { display: grid; gap: 20px; grid-template-columns: 1fr; }
.basin { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; }
.basin-foto { display: block; background: var(--yuzey); }
.basin-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.basin-govde { padding: 18px 20px 22px; }
.basin-tarih { margin: 0 0 4px; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--turuncu); }
body.dil-ar .basin-tarih { letter-spacing: 0; }
.basin-ad { margin: 0; font-weight: 800; color: var(--yesil); }
.basin-yayin { margin: 2px 0 0; color: var(--sessiz); font-size: .9rem; }

.yazi-izgara { display: grid; gap: 20px; grid-template-columns: 1fr; }
.yazi-kart
{
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
	overflow: hidden; color: var(--murekkep);
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.yazi-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-sert); border-color: transparent; color: var(--murekkep); }
.yazi-foto { display: block; background: var(--yuzey); }
.yazi-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.yazi-kart .yazi-govde { display: block; padding: 20px; }
.yazi-baslik { display: block; font-size: 1.1rem; font-weight: 800; color: var(--yesil); }
.yazi-ozet { display: block; margin-top: 6px; color: var(--sessiz); font-size: .94rem; }

.yazi-detay-bas { margin-bottom: 28px; }
.yazi-fotolar { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
.yazi-fotolar a { display: block; border-radius: var(--r); overflow: hidden; background: var(--yuzey); border: 1px solid var(--cizgi); }
.yazi-fotolar img { width: 100%; height: auto; }


/* ===========================================================================
   SAYFA BAŞLIĞI
   =========================================================================== */
.sayfa-bas
{
	padding: clamp(32px, 4.5vw, 60px) 0 clamp(24px, 3vw, 40px);
	background:
		radial-gradient(700px 320px at 92% 0%, rgba(237,109,0,.09), transparent 60%),
		var(--yuzey);
	border-bottom: 1px solid var(--cizgi);
}
.sayfa-bas h1 { margin: 0 0 .3em; color: var(--yesil); }
.sayfa-bas p { margin: 0; max-width: 70ch; color: var(--sessiz); }


/* ===========================================================================
   ARAMA + ÜRÜN IZGARASI
   =========================================================================== */
.ara-kutu
{
	position: relative; max-width: 420px; margin-bottom: 22px;
}
.ara-kutu svg
{
	position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; fill: var(--sessiz); pointer-events: none;
}
.ara-kutu input
{
	width: 100%; min-height: 50px;
	padding: 12px 18px; padding-inline-start: 46px;
	font: inherit; color: var(--murekkep);
	background: #fff; border: 1px solid var(--cizgi); border-radius: 999px;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.ara-kutu input:focus { border-color: var(--yesil); box-shadow: 0 0 0 4px rgba(18,74,60,.08); outline: none; }
.ara-kutu-sade { margin-bottom: 0; max-width: 320px; }

.ara-bos { padding: 28px 0; color: var(--sessiz); font-weight: 600; }

.urun-izgara
{
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.urun
{
	padding: 14px 10px 16px; text-align: center;
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.urun:hover { transform: translateY(-2px); box-shadow: var(--golge); border-color: transparent; }

/* ⚠ Kaynak 136x136; kutu da 136'yı AŞMAZ — büyütme bulanıklaştırırdı. */
.urun-foto
{
	width: 100%; max-width: 136px; margin: 0 auto 10px;
	aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--yuzey);
}
.urun-foto img { width: 100%; height: 100%; object-fit: cover; }
.urun-ad { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.35; }
.urun-tr { margin: 2px 0 0; font-size: .78rem; color: var(--sessiz); }


/* ===========================================================================
   ÜRETİM TAKVİMİ
   =========================================================================== */
.takvim-arac { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 18px; }

.sekmeler { display: flex; gap: 8px; }
.sekme
{
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 46px; padding: 10px 20px;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px;
	font: inherit; font-weight: 700; color: var(--sessiz); cursor: pointer;
	transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.sekme:hover { color: var(--yesil); }
.sekme.etkin { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.sekme-adet
{
	padding: 1px 9px; border-radius: 999px;
	background: rgba(0,0,0,.08); font-size: .78rem; font-variant-numeric: tabular-nums;
}
.sekme.etkin .sekme-adet { background: rgba(255,255,255,.2); }

.takvim-ipucu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 16px; font-size: .86rem; color: var(--sessiz); }
.kutu-ornek { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--cizgi); vertical-align: -3px; }
.kutu-ornek.dolu { background: var(--turuncu); }

.takvim-panel:not(.etkin) { display: none; }

/* Yatay kaydırma: 12 sütun dar ekrana sığmaz. Ürün sütunu solda SABİT kalır. */
.takvim-kaydir
{
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--cizgi); border-radius: var(--r); background: #fff;
}
table.takvim { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
table.takvim th, table.takvim td { padding: 0; }

.takvim thead th
{
	position: sticky; top: 0; z-index: 2;
	background: var(--yuzey); border-bottom: 1px solid var(--cizgi);
	font-weight: 800; color: var(--sessiz);
}
.takvim-ay { width: 44px; min-width: 44px; text-align: center; padding: 10px 0 !important; font-variant-numeric: tabular-nums; }
.takvim-ay abbr { text-decoration: none; border: 0; }

.takvim-ad
{
	position: sticky; inset-inline-start: 0; z-index: 1;
	min-width: 190px; max-width: 240px;
	padding: 10px 14px !important; text-align: start; vertical-align: middle;
	background: #fff; border-inline-end: 1px solid var(--cizgi);
	font-weight: 700;
}
.takvim thead .takvim-ad { z-index: 3; background: var(--yuzey); }
.takvim-ad small { display: block; font-weight: 500; font-size: .78rem; color: var(--sessiz); }

.takvim tbody tr:nth-child(even) .takvim-ad { background: #fbfdfc; }
.takvim tbody tr:nth-child(even) td { background: #fbfdfc; }
.takvim tbody tr:hover .takvim-ad,
.takvim tbody tr:hover td { background: #fff7f0; }

.takvim-hucre { height: 38px; border-bottom: 1px solid var(--cizgi); position: relative; }
.takvim-hucre::after
{
	content: ""; position: absolute; inset: 9px 6px;
	border-radius: 4px; background: var(--cizgi);
}
.takvim-hucre.dolu::after { background: var(--turuncu); }
.takvim tbody tr:last-child .takvim-hucre { border-bottom: 0; }


/* ===========================================================================
   İLETİŞİM
   =========================================================================== */
.iletisim-ic { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1fr; }

.bilgi-kart
{
	display: flex; gap: 16px; align-items: flex-start;
	padding: 18px 20px; margin-bottom: 14px;
	background: var(--yuzey); border-radius: var(--r);
}
.bilgi-kart h2 { margin: 0 0 4px; font-size: 1rem; color: var(--yesil); }
.bilgi-kart p { margin: 0; font-size: .95rem; }
.bilgi-sol { color: var(--sessiz); }
.bilgi-ikon
{
	flex: none; display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: #fff; box-shadow: var(--golge);
}
.bilgi-ikon svg { width: 20px; height: 20px; fill: var(--turuncu); }
.iletisim-grup { margin-top: 18px; font-size: .9rem; color: var(--sessiz); }

.iletisim-form
{
	padding: clamp(22px, 3vw, 34px);
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
	box-shadow: var(--golge);
}
.iletisim-form h2 { color: var(--yesil); }

.alan { margin-bottom: 16px; }
.alan label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 700; }
.yildiz { color: var(--turuncu); }

.alan input, .alan textarea
{
	width: 100%; min-height: 50px; padding: 12px 16px;
	font: inherit; color: var(--murekkep);
	background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-s);
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan textarea { min-height: 140px; resize: vertical; }
.alan input:focus, .alan textarea:focus
{
	border-color: var(--yesil); box-shadow: 0 0 0 4px rgba(18,74,60,.08); outline: none;
}
.alan.hatali input, .alan.hatali textarea { border-color: #c0392b; box-shadow: 0 0 0 4px rgba(192,57,43,.08); }

.alan-ikili { display: grid; gap: 0 16px; grid-template-columns: 1fr; }

.alan-kod { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.alan-kod > div:first-child { flex: 1 1 180px; }
.kod-gorsel { display: flex; align-items: center; gap: 8px; }
.kod-gorsel img { width: 150px; height: 52px; border: 1px solid var(--cizgi); border-radius: var(--r-s); background: #fff; }
.kod-gorsel button
{
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-s); cursor: pointer;
}
.kod-gorsel button svg { width: 18px; height: 18px; fill: var(--yesil); }
.kod-gorsel button:hover { background: #fff; }

/* Bal küpü — görsel olarak gizli ama DOM'da duruyor.
   ⚠ `left: -9999px` KULLANMA: soldan taşan içerik LTR'de kaydırma üretmez ama
   SAĞDAN SOLA sayfada (Arapça) taşma "bitiş" yönüne düşer ve belge ~11.000 px
   genişler — ziyaretçi yana kaydırınca bomboş bir alana düşer, ekran görüntüsü
   bembeyaz çıkar. (Ölçüldü: /ar/iletisim tamamen boş çiziliyordu; aynı sayfa
   dir=ltr ile sorunsuzdu.)
   Doğru yol: 1 px'e indirip kırpmak — hiç taşma üretmez. `display:none`
   KULLANILMIYOR çünkü botların bir kısmı onu atlıyor; burada alan hâlâ
   "görünür" sayılır ama ekranda yer kaplamaz. Erişilebilirlik tarafı
   aria-hidden + tabindex="-1" ile kapatıldı (bkz. views/contact.php). */
.bal-kupu
{
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}

.form-not { font-size: .85rem; color: var(--sessiz); }
.form-alt { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.form-sonuc { margin: 0; font-weight: 700; font-size: .92rem; }
.form-sonuc.basarili { color: #1b7a4b; }
.form-sonuc.hatali { color: #c0392b; }

.harita { line-height: 0; border-top: 1px solid var(--cizgi); }
.harita iframe { display: block; width: 100%; height: 420px; }


/* ===========================================================================
   KUTU ÇAĞRISI / 404
   =========================================================================== */
.kutu-cagri
{
	padding: clamp(28px, 4vw, 48px);
	background: var(--yuzey); border-radius: var(--r); text-align: center;
}
.kutu-cagri h2 { color: var(--yesil); }
.kutu-cagri p { color: var(--sessiz); max-width: 56ch; margin-inline: auto; }
.kutu-cagri .dugme { margin-top: 10px; }

.hata { text-align: center; }
.hata-kod
{
	margin: 0; font-size: clamp(4rem, 2rem + 10vw, 9rem); font-weight: 800;
	line-height: 1; color: var(--cizgi); letter-spacing: -.04em;
}
.hata .dugmeler { justify-content: center; }


/* ===========================================================================
   ALT BİLGİ
   =========================================================================== */
.alt { background: var(--yesil-koyu); color: rgba(255,255,255,.76); margin-top: auto; }
.alt-ic
{
	display: grid; gap: 32px; grid-template-columns: 1fr;
	padding-block: clamp(36px, 5vw, 64px);
}
.alt-logo { width: 170px; height: auto; margin-bottom: 18px; }
.alt-marka p { font-size: .94rem; max-width: 42ch; }
.alt-grup { color: rgba(255,255,255,.5); font-size: .86rem; }

.alt-baslik { font-size: .82rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--turuncu); margin-bottom: 14px; }
body.dil-ar .alt-baslik { letter-spacing: 0; }

.alt-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt-liste a, .alt-adres a { color: rgba(255,255,255,.76); }
.alt-liste a:hover, .alt-adres a:hover { color: var(--turuncu); }

.alt-adres { font-style: normal; font-size: .94rem; }
.alt-adres p { margin: 0 0 8px; }
.alt-sol { color: rgba(255,255,255,.5); }
.alt .dugme-acik { margin-top: 10px; }

.sosyal { display: flex; gap: 10px; margin-top: 18px; }
.sosyal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); }
.sosyal a:hover { background: var(--turuncu); }
.sosyal svg { width: 18px; height: 18px; fill: #fff; }

.alt-serit { border-top: 1px solid rgba(255,255,255,.1); }
.alt-serit-ic
{
	display: flex; flex-wrap: wrap; gap: 10px 20px;
	align-items: center; justify-content: space-between;
	padding-block: 16px; font-size: .84rem; color: rgba(255,255,255,.52);
}
/* ⚠ Üretici imzası 60x25 px yayınlanıyor; GENİŞLETİLMEZ (bulanıklaşır). */
.uretici { display: inline-flex; align-items: center; }
.uretici img { max-width: 60px; height: auto; }


/* ===========================================================================
   BÜYÜTEÇ (lightbox) — assets/js/site.js açar
   =========================================================================== */
.buyutec
{
	position: fixed; inset: 0; z-index: 300;
	display: grid; place-items: center;
	padding: 20px;
	background: rgba(9,28,23,.94);
	opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.buyutec.acik { opacity: 1; visibility: visible; }
.buyutec img
{
	max-width: min(100%, 1400px); max-height: calc(100vh - 150px);
	width: auto; border-radius: var(--r-s);
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.buyutec-bilgi
{
	position: absolute; inset-inline: 0; bottom: 18px;
	text-align: center; color: rgba(255,255,255,.88); font-size: .9rem; padding-inline: 70px;
}
.buyutec button
{
	position: absolute; display: grid; place-items: center;
	width: 48px; height: 48px; padding: 0;
	background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
	color: #fff; cursor: pointer; transition: background var(--gecis);
}
.buyutec button:hover { background: var(--turuncu); }
.buyutec button svg { width: 22px; height: 22px; fill: currentColor; }
.buyutec-kapat { top: 16px; inset-inline-end: 16px; }
.buyutec-onceki { inset-inline-start: 16px; top: 50%; transform: translateY(-50%); }
.buyutec-sonraki { inset-inline-end: 16px; top: 50%; transform: translateY(-50%); }

body.buyutec-acik { overflow: hidden; }


/* ===========================================================================
   DUYARLI — 620 px ve üzeri
   =========================================================================== */
@media (min-width: 620px)
{
	.rakam-ic { grid-template-columns: repeat(4, 1fr); }
	.alan-ikili { grid-template-columns: 1fr 1fr; }
	.yazi-fotolar { grid-template-columns: repeat(2, 1fr); }
	.serit { grid-auto-columns: 46%; }
	.surec-fotolar { grid-template-columns: repeat(3, 1fr); }
	.belge-izgara { grid-template-columns: repeat(3, 1fr); }
	.foto-izgara { grid-template-columns: repeat(2, 1fr); }
	.basin-izgara { grid-template-columns: repeat(2, 1fr); }
	.yazi-izgara { grid-template-columns: repeat(2, 1fr); }
	.kat-izgara { grid-template-columns: repeat(2, 1fr); }
}


/* ===========================================================================
   DUYARLI — 900 px ve üzeri (masaüstü)
   =========================================================================== */
@media (min-width: 900px)
{
	.kahraman-ic { grid-template-columns: 1fr 1.05fr; }

	/* ⚠ `margin-inline-start: auto` KULLANMA: ızgara öğesinde satır eksenli bir
	   auto kenar boşluğu `justify-self: stretch`i iptal eder, kutu fit-content
	   genişliğine düşer — içeriği MUTLAK KONUMLU olduğu için genişlik 0 olur ve
	   slayt görseli HİÇ GÖRÜNMEZ. (Ölçüldü: .kahraman-gorsel 0x0.)
	   Doğru yol: açıkça sağa yasla ve genişliği kendimiz ver. */
	.kahraman-gorsel { justify-self: end; width: 100%; max-width: 640px; }

	.ikili { grid-template-columns: 1fr 1fr; }
	.ikili-ters .ikili-gorsel { order: 2; }

	.surec-izgara { grid-template-columns: repeat(3, 1fr); }
	.surec-govde { grid-template-columns: 1.6fr 1fr; align-items: start; }
	.surec-fotolar { grid-template-columns: repeat(2, 1fr); }

	.serit { grid-auto-columns: 31%; }
	.foto-izgara { grid-template-columns: repeat(3, 1fr); }
	.belge-izgara { grid-template-columns: repeat(3, 1fr); }
	.basin-izgara { grid-template-columns: repeat(2, 1fr); }
	.yazi-izgara { grid-template-columns: repeat(3, 1fr); }
	.kat-izgara { grid-template-columns: repeat(3, 1fr); }

	.iletisim-ic { grid-template-columns: 1fr 1.25fr; align-items: start; }

	.alt-ic { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }

	.urun-izgara { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}


/* ===========================================================================
   DUYARLI — 899 px ve altı (mobil menü)
   =========================================================================== */
@media (max-width: 899px)
{
	.menu-dugme { display: grid; place-items: center; }

	/* ⚠ FIXED DEĞİL: .ust'ün backdrop-filter'ı fixed torunu kendi kutusuna
	   hapsediyor (kapsayıcı blok kuralı). Panel başlığın hemen altında,
	   mutlak konumlu olarak açılıyor. */
	.menu
	{
		position: absolute; inset-inline: 0; top: 100%;
		margin: 0;
		max-height: calc(100vh - var(--ust-yuk) - 38px);
		overflow-y: auto;
		background: #fff; border-bottom: 1px solid var(--cizgi);
		box-shadow: var(--golge-sert);
		display: none;
	}
	.menu.acik { display: block; }

	.menu-liste { display: block; padding: 10px 20px 24px; }
	.menu-liste > li > a
	{
		justify-content: space-between;
		padding: 14px 4px; border-radius: 0;
		border-bottom: 1px solid var(--cizgi);
		font-size: 1.02rem;
	}
	.menu-liste > li:last-child > a { border-bottom: 0; }
	.menu-cta { display: inline-flex !important; margin-top: 16px; }

	.alt-menu
	{
		position: static; min-width: 0;
		opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; border-radius: 0;
		padding: 2px 0 10px 16px;
		display: none;
	}
	.alt-menulu.acik > .alt-menu { display: block; }
	.alt-menulu.acik > a .ok { transform: rotate(180deg); }
	.alt-menu a { padding: 10px 4px; }

	.takvim-arac { gap: 12px; }
	.ara-kutu-sade { max-width: none; width: 100%; }
}


/* ===========================================================================
   YAZDIRMA + HAREKET AZALTMA
   =========================================================================== */
@media (prefers-reduced-motion: reduce)
{
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}

@media print
{
	.ust, .alt, .buyutec, .ara-kutu, .ic-menu, .takvim-cta, .atla { display: none !important; }
	body { font-size: 11pt; }
	.takvim-panel:not(.etkin) { display: block !important; }
	.takvim-kaydir { overflow: visible; }
}


/* ===========================================================================
   SAĞDAN SOLA (Arapça)
   ---------------------------------------------------------------------------
   Düzenin TAMAMI mantıksal özelliklerle yazıldı (inset-inline-start,
   padding-inline-start, margin-inline-start…), bu yüzden <body dir="rtl">
   çoğu şeyi kendiliğinden çevirir. Burada yalnız yön BİLGİSİ TAŞIYAN
   içerikler düzeltilir.
   =========================================================================== */

/* "Keşfet →" gibi metin okları: RTL'de sola bakmalı. Karakterin kendisi
   çevrilmediği için öğe yatayda aynalanıyor. */
.ok-ic { display: inline-block; }
[dir="rtl"] .ok-ic { transform: scaleX(-1); }

/* Kırıntı yolundaki eğik çizgi ayracı RTL'de ters yöne bakar */
[dir="rtl"] .kirinti span[aria-hidden] { transform: scaleX(-1); display: inline-block; }

/* Tablodaki ürün sütunu RTL'de sağda sabitlenir; ayraç çizgisi de yer değiştirir */
[dir="rtl"] .takvim-ad { border-inline-end: 1px solid var(--cizgi); }

/* Belgeler üstten hizalı taranmış görseller — RTL'de de üstten */
[dir="rtl"] .belge-foto img { object-position: top; }