/* ===========================================================================
   aegean.zone - tasarim sistemi
   ---------------------------------------------------------------------------
   Eski bootstrap + rd-navbar temasinin yerini alir. Tek dosya, bagimliliksiz.
   Renkler Ege kimliginden gelir: deniz, zeytin, kum.
   =========================================================================== */

:root {
	--kagit:        #ffffff;
	--kum:          #f7f5f0;
	--kum-koyu:     #efece4;
	--cizgi:        #e4e0d7;

	--murekkep:     #16201f;
	--murekkep-yum: #6a7573;

	--deniz:        #0e5c63;
	--deniz-acik:   #14828c;
	--deniz-sis:    #e6f1f1;

	--zeytin:       #7d8c52;
	--altin:        #c08a2e;
	--kirmizi:      #a4382f;

	--golge-s:      0 1px 2px rgba(22,32,31,.06), 0 2px 8px rgba(22,32,31,.04);
	--golge-m:      0 2px 6px rgba(22,32,31,.06), 0 12px 28px rgba(22,32,31,.08);
	--golge-l:      0 30px 60px rgba(22,32,31,.14);

	--yuvarlak-s:   8px;
	--yuvarlak:     14px;
	--yuvarlak-l:   22px;

	--gecis:        180ms cubic-bezier(.4, 0, .2, 1);
	--en:           1200px;
}

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

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

body {
	margin: 0;
	background: var(--kagit);
	color: var(--murekkep);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
	margin: 0 0 .5em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--deniz); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--deniz-acik); }

img { max-width: 100%; }

.kapsayici {
	width: 100%;
	max-width: var(--en);
	margin: 0 auto;
	padding: 0 24px;
}

.bolum      { padding: 64px 0; }
.bolum-dar  { padding: 40px 0; }
.bolum-kum  { background: var(--kum); }

.sessiz     { color: var(--murekkep-yum); }
.ortala     { text-align: center; }
.kucuk      { font-size: .875rem; }
.mini       { font-size: .78rem; }

.bolum-baslik { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.bolum-baslik p { color: var(--murekkep-yum); margin: 0; }

/* --- Izgara -------------------------------------------------------------- */
.izgara { display: grid; gap: 22px; }
.izgara-kart  { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.izgara-genis { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.izgara-2     { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.izgara-3     { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Dugmeler ------------------------------------------------------------ */
.dugme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--deniz);
	color: #fff;
	font-size: .9rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background var(--gecis), transform var(--gecis), box-shadow var(--gecis);
}
.dugme:hover {
	background: var(--deniz-acik);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--golge-m);
}
.dugme:active { transform: none; }

.dugme-hat {
	background: transparent;
	border-color: var(--cizgi);
	color: var(--murekkep);
}
.dugme-hat:hover {
	background: var(--kum);
	border-color: var(--murekkep-yum);
	color: var(--murekkep);
	box-shadow: none;
}

.dugme-beyaz { background: #fff; color: var(--deniz); }
.dugme-beyaz:hover { background: #fff; color: var(--deniz-acik); }

.dugme-kucuk { padding: 8px 16px; font-size: .82rem; }

/* --- Ust cubuk ----------------------------------------------------------- */
.ust {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255,255,255,.88);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--cizgi);
}
.ust-ic {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 68px;
}
.marka {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--murekkep);
}
.marka:hover { color: var(--murekkep); }
.marka span { color: var(--deniz-acik); }
.marka small {
	display: block;
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--murekkep-yum);
}

.gezinti { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.gezinti a {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	color: var(--murekkep-yum);
	font-size: .9rem;
	font-weight: 500;
	transition: background var(--gecis), color var(--gecis);
}
.gezinti a:hover { background: var(--kum); color: var(--murekkep); }
.gezinti .etkin a { background: var(--deniz-sis); color: var(--deniz); }

.gezinti-dugme {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--cizgi);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.gezinti-dugme span,
.gezinti-dugme span::before,
.gezinti-dugme span::after {
	position: absolute;
	left: 50%; top: 50%;
	width: 18px; height: 1.5px;
	margin-left: -9px;
	background: var(--murekkep);
	content: '';
	transition: transform var(--gecis);
}
.gezinti-dugme span::before { top: -6px; left: 0; margin: 0; }
.gezinti-dugme span::after  { top: 6px;  left: 0; margin: 0; }

/* --- Kahraman ------------------------------------------------------------ */
.kahraman {
	position: relative;
	padding: 92px 0 104px;
	background: linear-gradient(150deg, #0b4147 0%, var(--deniz) 46%, #14727a 100%);
	color: #fff;
	overflow: hidden;
}
.kahraman::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 80% at 85% -10%, rgba(255,255,255,.16), transparent 60%),
		radial-gradient(90% 60% at 0% 110%, rgba(125,140,82,.30), transparent 65%);
	pointer-events: none;
}
.kahraman > * { position: relative; z-index: 1; }
.kahraman h1 { color: #fff; margin-bottom: 16px; }
.kahraman-ozet {
	max-width: 620px;
	margin: 0 auto 34px;
	color: rgba(255,255,255,.86);
	font-size: 1.05rem;
}

/* Firma sayfasi kapagi */
.kapak {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	background: var(--deniz);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.kapak::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(8,32,34,.88) 0%, rgba(8,32,34,.35) 55%, rgba(8,32,34,.15) 100%);
}
.kapak-ic { position: relative; z-index: 1; width: 100%; padding: 40px 0 34px; }
.kapak h1 { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin-bottom: 6px; }
.kapak .sessiz { color: rgba(255,255,255,.8); }

.firma-amblem {
	width: 96px; height: 96px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px;
	padding: 12px;
	background: #fff;
	border-radius: var(--yuvarlak);
	box-shadow: var(--golge-m);
}
.firma-amblem img { max-height: 100%; object-fit: contain; }

/* --- Filtre paneli ------------------------------------------------------- */
.filtre {
	background: #fff;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-l);
	box-shadow: var(--golge-m);
	padding: 22px;
}
.kahraman .filtre { box-shadow: var(--golge-l); text-align: left; }

.filtre-satir {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	align-items: end;
}
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan > label {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--murekkep-yum);
}

input[type=text], input[type=search], input[type=password], select, textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-s);
	background: #fff;
	color: var(--murekkep);
	font-family: inherit;
	font-size: .92rem;
	transition: border-color var(--gecis), box-shadow var(--gecis);
}
input[type=text]:focus, input[type=search]:focus, input[type=password]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--deniz-acik);
	box-shadow: 0 0 0 3px rgba(20,130,140,.14);
}
textarea { min-height: 150px; resize: vertical; line-height: 1.55; }

input[type=file] {
	width: 100%;
	font-family: inherit;
	font-size: .85rem;
	color: var(--murekkep-yum);
}
input[type=file]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 1px solid var(--cizgi);
	border-radius: 999px;
	background: var(--kum);
	color: var(--murekkep);
	font-family: inherit;
	font-size: .82rem;
	cursor: pointer;
}

.filtre-alt {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--cizgi);
}

/* --- Firma karti --------------------------------------------------------- */
.kart {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 18px;
	background: #fff;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	text-align: center;
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
a.kart:hover {
	transform: translateY(-3px);
	box-shadow: var(--golge-m);
	border-color: #d4cfc3;
	color: inherit;
}
.kart-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 76px;
	margin-bottom: 16px;
}
.kart-logo img { max-height: 76px; max-width: 100%; object-fit: contain; }
.kart-logo-yok {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px; height: 62px;
	border-radius: 50%;
	background: var(--deniz-sis);
	color: var(--deniz);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -.02em;
}
.kart-ad {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--murekkep);
}
.kart-yer { margin-top: 5px; font-size: .8rem; color: var(--murekkep-yum); }
.kart-alt { margin-top: auto; padding-top: 14px; }

/* --- Rozetler ------------------------------------------------------------ */
.rozet {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--deniz-sis);
	color: var(--deniz);
	font-size: .74rem;
	font-weight: 500;
	white-space: nowrap;
}
.rozet-zeytin { background: #f0f2e6; color: #5c6a38; }
.rozet-kum    { background: var(--kum-koyu); color: var(--murekkep-yum); }
.rozet-dizi   { display: flex; flex-wrap: wrap; gap: 8px; }
a.rozet:hover { background: var(--deniz); color: #fff; }

/* --- Sayilar ------------------------------------------------------------- */
.sayi-kutu { text-align: center; padding: 10px; }
.sayi {
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--deniz);
	line-height: 1.1;
}
.sayi-etiket {
	margin-top: 4px;
	font-size: .82rem;
	color: var(--murekkep-yum);
	letter-spacing: .02em;
}

/* --- Sektor karti -------------------------------------------------------- */
.sektor {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	min-height: 132px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.sektor:hover {
	transform: translateY(-3px);
	box-shadow: var(--golge-m);
	border-color: #d4cfc3;
}
.sektor-ad { font-weight: 600; font-size: 1rem; color: var(--murekkep); line-height: 1.3; }

/* --- Urun karti ---------------------------------------------------------- */
.urun {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	overflow: hidden;
	height: 100%;
}
.urun-gorsel { aspect-ratio: 4 / 3; background: var(--kum); overflow: hidden; }
.urun-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.urun:hover .urun-gorsel img { transform: scale(1.04); }
.urun-govde { padding: 18px; }
.urun-govde h4 { margin-bottom: 4px; }

/* --- Panel --------------------------------------------------------------- */
.pano {
	background: #fff;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	padding: 26px;
	margin-bottom: 22px;
}
.pano > h4 { margin-bottom: 4px; }
.pano-ipucu { margin: 0 0 18px; font-size: .86rem; color: var(--murekkep-yum); }

.pano-ust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.alan-grup { margin-bottom: 18px; }
.alan-grup:last-child { margin-bottom: 0; }
.alan-grup > label {
	display: block;
	margin-bottom: 6px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--murekkep-yum);
}

.uyari {
	padding: 13px 17px;
	border-radius: var(--yuvarlak-s);
	border: 1px solid transparent;
	font-size: .9rem;
	margin-bottom: 20px;
}
.uyari-basari { background: #eef5ee; border-color: #cde0cd; color: #33663a; }
.uyari-hata   { background: #fbeceb; border-color: #f0d2cf; color: var(--kirmizi); }
.uyari-bilgi  { background: var(--deniz-sis); border-color: #c9e2e3; color: var(--deniz); }

.ilerleme {
	height: 7px;
	border-radius: 999px;
	background: var(--kum-koyu);
	overflow: hidden;
	margin: 10px 0 12px;
}
.ilerleme-dolu { height: 100%; border-radius: 999px; background: var(--deniz-acik); }

.liste-sade { margin: 0; padding-left: 18px; color: var(--murekkep-yum); font-size: .86rem; }

/* Panelde urun satiri */
.urun-satir {
	display: flex;
	gap: 16px;
	padding: 14px;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak);
	background: #fff;
}
.urun-satir-gorsel {
	flex: 0 0 96px;
	width: 96px; height: 96px;
	border-radius: var(--yuvarlak-s);
	object-fit: cover;
	background: var(--kum);
}
.urun-satir-govde { flex: 1; min-width: 0; }

/* --- Sayfalama ----------------------------------------------------------- */
.sayfalama { display: flex; justify-content: center; gap: 6px; margin-top: 38px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
	min-width: 40px;
	padding: 9px 12px;
	border: 1px solid var(--cizgi);
	border-radius: var(--yuvarlak-s);
	background: #fff;
	color: var(--murekkep-yum);
	font-size: .875rem;
	text-align: center;
	transition: all var(--gecis);
}
.sayfalama a:hover { border-color: var(--deniz-acik); color: var(--deniz); }
.sayfalama .etkin { background: var(--deniz); border-color: var(--deniz); color: #fff; font-weight: 600; }

/* --- Sonuc cubugu -------------------------------------------------------- */
.sonuc-cubugu {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 30px 0 18px;
}
.sonuc-sayi { font-size: .95rem; color: var(--murekkep-yum); }
.sonuc-sayi strong { color: var(--murekkep); font-size: 1.1rem; font-weight: 700; }

.bos-durum {
	padding: 70px 24px;
	text-align: center;
	color: var(--murekkep-yum);
	background: #fff;
	border: 1px dashed var(--cizgi);
	border-radius: var(--yuvarlak);
}

/* --- Alt bilgi ----------------------------------------------------------- */
.alt {
	margin-top: 72px;
	padding: 48px 0 32px;
	background: #0d2b2e;
	color: rgba(255,255,255,.70);
	font-size: .88rem;
}
.alt a { color: rgba(255,255,255,.88); }
.alt a:hover { color: #fff; }
.alt-ic {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: space-between;
	align-items: flex-start;
}
.alt-marka { font-size: 1.05rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.alt-baglantilar { display: flex; flex-wrap: wrap; gap: 18px; }
.alt-telif {
	margin-top: 34px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .8rem;
	color: rgba(255,255,255,.55);
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 820px) {
	.bolum { padding: 44px 0; }
	.kahraman { padding: 64px 0 72px; }

	.gezinti-dugme { display: block; }
	.gezinti {
		display: none;
		position: absolute;
		left: 16px; right: 16px; top: 64px;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 10px;
		background: #fff;
		border: 1px solid var(--cizgi);
		border-radius: var(--yuvarlak);
		box-shadow: var(--golge-m);
	}
	.gezinti.acik { display: flex; }
	.ust-ic { position: relative; }

	.filtre-alt { flex-direction: column; align-items: stretch; }
	.filtre-alt .dugme { width: 100%; }

	.urun-satir { flex-direction: column; }
	.urun-satir-gorsel { width: 100%; height: 170px; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}