/*
* Esna - Ozel bolumler
* 1. Hikayemiz (anasayfa #about) - ortalanmis "our story" duzeni
* 2. Tam genislik serit (anasayfa) - solda yazi, sagda gorsel
* 3. Urun listesi gorselleri (/Home/Urunler) - esit olculu kutular
* 4. Urunler sayfasi baslik seridi - duz krem zemin
* 5. Online katalog cercevesi
* 6. Mobil duzeltmeleri (logo, footer)
* 7. Anasayfa iletisim bolumu
* 8. Urun karti (kose yuvarlama + uzerine gelme orstusu)
*/

/* ==========================================================================
   Ortak ogeler
   ========================================================================== */
.esna-kicker {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #dfa400;
}

.esna-rule {
	display: block;
	width: 44px;
	height: 2px;
	margin: 14px auto 0;
	background-image: linear-gradient(90deg, rgba(223, 164, 0,.15), #dfa400);
}

/* ==========================================================================
   1. Hikayemiz
   ========================================================================== */
section.esna-story {
	padding: 70px 0;
	background-color: #fdfbf7;
	text-align: center;
}

.esna-story-inner {
	max-width: 780px;
	margin: 0 auto;
}

.esna-story-title {
	margin: 20px 0 0;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-size: 46px;
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.01em;
	text-transform: none;
	color: #151515;
}

.esna-story-lead {
	max-width: 620px;
	margin: 16px auto 0;
	font-size: 17px;
	line-height: 1.7;
	color: #6b6055;
}

/* Altin susleme: cizgi + eskenar dortgen + cizgi */
.esna-ornament {
	margin-top: 26px;
	font-size: 0;
	line-height: 0;
	text-align: center;
}

.esna-ornament span {
	display: inline-block;
	vertical-align: middle;
	width: 58px;
	height: 1px;
}

.esna-ornament span:first-child {
	background-image: linear-gradient(90deg, rgba(223, 164, 0,0), #dfa400);
}

.esna-ornament span:last-child {
	background-image: linear-gradient(90deg, #dfa400, rgba(223, 164, 0,0));
}

.esna-ornament i {
	display: inline-block;
	vertical-align: middle;
	width: 6px;
	height: 6px;
	margin: 0 14px;
	background-color: #dfa400;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Yonetici panelinden gelen (CKEditor) metin */
.esna-story-body {
	margin-top: 30px;
	font-size: 16px;
	line-height: 1.9;
	color: #62594e;
	text-align: justify;
}

.esna-story-body > *:first-child {
	margin-top: 0;
}

.esna-story-body > *:last-child {
	margin-bottom: 0;
}

.esna-story-body p {
	margin: 0 0 20px;
}

.esna-story-body h1,
.esna-story-body h2,
.esna-story-body h3,
.esna-story-body h4,
.esna-story-body h5,
.esna-story-body h6 {
	margin: 30px 0 14px;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-weight: 500;
	color: #151515;
	text-align: center;
}

.esna-story-body img {
	max-width: 100%;
	height: auto;
}

.esna-story-body ul,
.esna-story-body ol {
	display: inline-block;
	text-align: left;
}

/* Ilk paragrafin ilk harfi - altin drop cap */
.esna-story-body > p:first-child:first-letter {
	float: left;
	margin: 6px 12px 0 0;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-size: 66px;
	font-weight: 500;
	line-height: .8;
	color: #dfa400;
}

/* ==========================================================================
   2. Tam genislik serit (solda yazi / sagda gorsel)
   ========================================================================== */
section.esna-band {
	position: relative;
	padding: 30px 0;
	background-color: #f6f1e8;
	border-top: 1px solid #ece3d3;
	border-bottom: 1px solid #ece3d3;
}

.esna-band-text {
	max-width: 520px;
	text-align: left;
}

.esna-band .esna-rule {
	margin-left: 0;
	margin-right: 0;
}

.esna-band-title {
	margin: 18px 0 0;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	color: #151515;
}

.esna-band-text p {
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.85;
	color: #62594e;
}

.esna-band-actions {
	margin-top: 22px;
}

.esna-band-media {
	position: relative;
}

.esna-band-media img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 240px;
	-o-object-fit: cover;
	object-fit: cover;
}

/* gorselin arkasinda hafif kaydirilmis altin cerceve */
.esna-band-media:before {
	content: '';
	position: absolute;
	left: -16px;
	bottom: -16px;
	width: 100%;
	height: 100%;
	border: 1px solid rgba(223, 164, 0,.5);
}

/* gorsel yuklenmemisse gosterilen yer tutucu */
.esna-band-media-empty {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 240px;
	border: 1px dashed rgba(223, 164, 0,.55);
	background-color: #fdfbf7;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #dfa400;
	text-align: center;
}

/* ==========================================================================
   Duyarli (responsive)
   ========================================================================== */
@media (min-width: 1200px) {
	section.esna-story {
		padding: 110px 0;
	}

	.esna-story-title {
		font-size: 54px;
	}

	section.esna-band {
		padding: 38px 0;
	}
}

@media (max-width: 991px) {
	.esna-band-text {
		max-width: none;
	}

	.esna-band-media,
	.esna-band-media-empty {
		margin-top: 28px;
	}

	.esna-band-media:before {
		display: none;
	}

	.esna-band-media img,
	.esna-band-media-empty {
		height: 220px;
	}
}

@media (max-width: 767px) {
	section.esna-story {
		padding: 50px 0;
	}

	.esna-story-title {
		font-size: 32px;
	}

	.esna-story-lead {
		font-size: 16px;
	}

	.esna-story-body {
		font-size: 15px;
		line-height: 1.85;
		text-align: left;
	}

	.esna-story-body > p:first-child:first-letter {
		font-size: 52px;
	}

	.esna-ornament span {
		width: 40px;
	}

	section.esna-band {
		padding: 26px 0;
	}

	.esna-band-title {
		font-size: 28px;
	}

	.esna-band-media img,
	.esna-band-media-empty {
		height: 190px;
	}
}

/* ==========================================================================
   3. Urun listesi gorselleri (/Home/Urunler ve /Home/Category)
   Tum kutular ayni olcudedir (16:9). Resim alta hizali oldugu icin kutudan
   uzun kalan kisim yalnizca ustten kesilir; sag/sol taraf tam gorunur.
   (Urun fotograflarinin tamami yatay ve 16:9'dan dar oldugu icin pratikte
   hicbirinin yani kirpilmaz. 16:9'dan genis bir fotograf gelirse ustte bos
   beyaz bant birakmak yerine kutuyu doldurur, yandan cok az kirpilir.)
   Oran degisecekse asagidaki padding-bottom ile Core/ResimYardimcisi.cs
   icindeki Genislik / Yukseklik degerleri birlikte guncellenmelidir.
   ========================================================================== */
.esna-thumb {
	position: relative;
	overflow: hidden;
	padding-bottom: 56.25%; /* 16:9 - yatay kutu (540 / 960) */
	background-color: #fff;
	border-radius: 10px;
}

.esna-thumb > a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* object-position alta hizali: kirpilan taraf her zaman ust taraf olur */
.esna-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center bottom;
	object-position: center bottom;
}

/* Baslik bolumu (mobilde gorselin altinda durur) esit yukseklikte kalsin */
.esna-thumb + .thumbnail-classic-caption {
	min-height: 62px;
}

/* ==========================================================================
   4. Baslik seridi - acik zemin (/Home/Urunler ve /Home/Category)
   Temanin koyu parallax gorseli yerine duz krem zemin. Sinif Urunler ve
   Category sayfalarindaki section'a eklidir; ayni serit About, ContactUs ve
   Product sayfalarinda koyu haliyle kalir.
   ========================================================================== */
.esna-breadcrumbs-light .breadcrumbs_section {
	background-image: none;
	background-color: #f6f1e8;
}

/* temanin uzerine bindirdigi koyu rgba(0,0,0,.6) katman */
.esna-breadcrumbs-light .breadcrumbs_section:before {
	display: none;
}

/* .context-dark basligi beyaz yapiyor; acik zeminde koyuya cevrilir */
.esna-breadcrumbs-light .breadcrumbs-custom-title {
	color: #151515;
	text-shadow: none;
}

/* ==========================================================================
   5. Online katalog cercevesi (/Home/Katalog)
   Katalog kendi bagimsiz sayfasinda (/pdf-viewer/) calisir; menu ve footer
   kaybolmasin diye cerceve icinde gosterilir.
   ========================================================================== */
.esna-katalog {
	background-color: #e9e9e9;
}

.esna-katalog iframe {
	display: block;
	width: 100%;
	/* masaustunde menu akista, yuksekligi dusuluyor */
	height: calc(100vh - 100px);
	min-height: 420px;
	border: 0;
}

@media (max-width: 991px) {
	.esna-katalog iframe {
		/* mobilde menu sabit ve 64px */
		height: calc(100vh - 64px);
	}
}

/* ==========================================================================
   6. Mobil duzeltmeleri
   ========================================================================== */

/* --- Logo mobil sabit menude ortalanir (hamburger solda kalir) --- */
.ch-navbar-fixed .ch-navbar-brand {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 0;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* --- Footer: magaza adresi ilk adresten hafifce ayrilir --- */
.footer-modern .esna-magaza {
	display: inline-block;
	margin-top: 6px;
}

/* --- Footer logosu: mobilde tum sutuna yayilip devlesiyordu; olcusu sinirlanip
       ortalanir (footerin geri kalani sola hizali kalir) --- */
@media (max-width: 991px) {
	.footer-modern .footer-classic-brand {
		text-align: center;
	}

	.footer-modern .footer-classic-brand img {
		width: auto;
		max-width: 180px;
		height: auto;
	}
}

/* --- Footer iletisim satirlari: ikon ustte ayri satir yerine metnin solunda ---
   Isaretlemedeki .flex-column (Bootstrap) 768px altinda dikey yapiyordu;
   telefon numarasi bu yuzden 2. satira dusuyordu. */
@media (max-width: 767px) {
	.footer-modern .contacts-creative .unit {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row !important;
		flex-direction: row !important;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.footer-modern .contacts-creative .unit-left {
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}
}

/* ==========================================================================
   7. Anasayfa iletisim bolumu (#contact)
   ========================================================================== */

/* Baslik altindaki altin cizgi. Kapsayici blok oldugu icin bolumun
   text-align degerini izler: masaustunde solda, mobilde basligin hizasinda. */
.esna-title-rule {
	margin-top: 12px;
}

.esna-title-rule span {
	display: inline-block;
	width: 50%; /* kapsayicinin ortasina kadar */
	height: 2px;
	background-image: linear-gradient(90deg, #dfa400, rgba(223,164,0,.15));
}

/* Telefon / adres / e-posta seridi biraz daha alcak */
.esna-contact-info {
	padding-top: 36px;
	padding-bottom: 36px;
}

@media (min-width: 992px) {
	.esna-contact-info {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}

@media (min-width: 1200px) {
	.esna-contact-info {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* ==========================================================================
   8. Urun karti (/Home/Urunler ve /Home/Category)
   Kurallar .esna-thumb uzerinden yazilidir; boylece yalnizca bu CSS dosyasi
   guncellenerek calisir, isaretlemeye ek sinif gerekmez.
   ========================================================================== */

/* Uzerine gelince site renginde cerceve.
   Ayri bir katman olarak cizilir: kart olculeri degismez (kayma olmaz),
   z-index:2 ile baslik ortusunun de uzerinde kalir. */
.esna-thumb::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 2px solid transparent;
	border-radius: inherit;
	pointer-events: none;
	-webkit-transition: border-color .3s ease;
	transition: border-color .3s ease;
	z-index: 2;
}

.thumbnail-classic:hover .esna-thumb::after {
	border-color: #dfa400;
}

/* Uzerine gelme ortusu: temanin rgb(0 0 0 / .7) siyahi yerine krem */
.desktop .esna-thumb + .thumbnail-classic-caption::before {
	background: rgba(246, 241, 232, .62);
	border-radius: 10px;
}

/* Acik zeminde beyaz baslik okunmaz; koyuya cevrilir */
.esna-thumb + .thumbnail-classic-caption .thumbnail-classic-title {
	color: #151515;
}

/* ==========================================================================
   9. Mobil urun izgarasi
   Isotope ogeleri position:absolute yapiyor; 576px altinda hicbir genislik
   kurali olmadigi icin kartlar icerige gore buzulup dar kaliyordu.
   ========================================================================== */
@media (max-width: 575px) {
	.isotope-wrap .isotope-item {
		width: 100%;
	}
}