/*
	Hatek Elektrik Otomasyon Mühendislik
	Site-specific extension on top of the unmodified "Monoline" template
	by Bestwpware / ThemeWagon — MIT license.

	Kept separate from the template's own stylesheets so those files stay
	intact; this file adds the video hero, the language toggle, real
	contact/map/whatsapp blocks and a few small layout additions.
*/

/* Video hero ---------------------------------------------------------- */

	.home_video {
		overflow: hidden;
	}

	.home_video video {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		transform: translate(-50%, -50%);
		object-fit: cover;
		z-index: 0;
		background-color: #1b2032;
	}

	.home_video:before {
		z-index: 1;
	}

	.home_video .slider-caption {
		z-index: 2;
	}

	.hero-text h1 {
		color: #fff;
		font-size: 60px;
		font-weight: 700;
		line-height: 70px;
		margin: 0 0 20px;
		text-transform: uppercase;
	}

	.slider-caption .btn_one {
		margin: 10px 6px 0;
	}

	.btn_one--alt {
		background: transparent;
		border-color: #fff;
		color: #fff;
	}

	.btn_one--alt:hover {
		background: #ffaa17;
		border-color: #ffaa17;
		color: #fff;
	}

	@media (prefers-reduced-motion: reduce) {
		.home_video video { display: none; }
	}

/* Nav: legible over the video, solid once scrolled ---------------------- */

	.site-navbar .site-menu > li > a,
	.site-navbar .lang-link,
	.site-navbar #lang-toggle {
		color: #fff;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	}

	body.scrolled .site-navbar,
	.sticky-wrapper .site-navbar {
		background: #fff;
		box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
	}

	body.scrolled .site-navbar .site-menu > li > a,
	body.scrolled .site-navbar .lang-link,
	body.scrolled .site-navbar #lang-toggle,
	.sticky-wrapper .site-navbar .site-menu > li > a,
	.sticky-wrapper .site-navbar .lang-link,
	.sticky-wrapper .site-navbar #lang-toggle {
		color: #1b2032;
		text-shadow: none;
	}

	/* Logo: a photo of the real Hatek logo (gears + wordmark) with the
	   background keyed to transparent. It carries its own contrast, but a
	   soft white backing card keeps it crisp over any part of the hero
	   video regardless of what's behind it at a given frame. */
	.site-logo a {
		display: inline-flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.94);
		padding: 8px 16px;
		border-radius: 10px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	}

	.site-logo-img {
		display: block;
		height: 32px;
		width: auto;
	}

	@media screen and (max-width: 991px) {
		.site-logo-img {
			height: 26px;
		}

		.hero-text h1 {
			font-size: 40px;
			line-height: 1.2;
		}
	}

#lang-toggle {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 30px;
		padding: 6px 16px;
		font-size: 13px;
		letter-spacing: 0.1em;
		cursor: pointer;
		transition: 0.2s;
		margin-left: 10px;
	}

	#lang-toggle:hover {
		background: #ffaa17;
		border-color: #ffaa17;
		color: #fff !important;
	}

	body.scrolled #lang-toggle,
	.sticky-wrapper #lang-toggle {
		border-color: rgba(27, 32, 50, 0.35);
	}

	.lang-link {
		display: inline-block;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 30px;
		padding: 6px 16px !important;
		font-size: 13px;
		letter-spacing: 0.1em;
		margin-left: 10px;
	}

	.lang-link:hover {
		background: #ffaa17;
		border-color: #ffaa17;
		color: #fff !important;
	}

	body.scrolled .lang-link,
	.sticky-wrapper .lang-link {
		border-color: rgba(27, 32, 50, 0.35);
	}

/* Tags (About) ----------------------------------------------------------- */

	ul.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem;
		list-style: none;
		padding-left: 0;
		margin: 1.25rem 0 1.5rem 0;
	}

	ul.tags li {
		padding: 6px 18px;
		border-radius: 999px;
		border: 1px solid #1b2032;
		font-size: 13px;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #1b2032;
	}

/* About section video (replaces the old static photo) ------------------- */

	.about-video {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 6px;
	}

/* Icon-font replacements inside feature cards ---------------------------- */

	.single_feature .hicon {
		display: block;
		margin-bottom: 20px;
	}

	.feature-link,
	.feature-link:hover,
	.feature-link:focus {
		display: block;
		color: inherit;
		text-decoration: none;
		height: 100%;
	}

	.single_feature .hicon:before {
		font-size: 42px;
		color: #ffaa17;
	}

	.feature_area--alt {
		margin-top: 0;
		padding-top: 40px;
		background: #f9fcff;
	}

	.feature_area--alt .feature_bg {
		box-shadow: none;
		margin-top: 0;
		background: transparent;
		padding: 0 60px 40px;
	}

	.feature_area--alt .single_feature {
		padding: 40px 30px;
	}

	.counter-suffix {
		font-weight: 700;
		font-size: 50px;
		color: #fff;
	}

/* Portfolio / Machines: no-photo placeholder card ------------------------ */

	.single-gallery--placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.75rem;
		aspect-ratio: 4 / 3;
		background: #f4f6f9;
		border: 1px dashed #c7cdd6;
	}

	.single-gallery--placeholder .hicon:before {
		font-size: 34px;
		color: #b7bfca;
	}

	.single-gallery--placeholder .placeholder-label {
		font-size: 12px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #9aa3b1;
	}

	.single-gallery--placeholder h4 {
		position: static;
		opacity: 1;
		color: #1b2032;
		margin-top: 6px;
	}

	.single-gallery--placeholder:before {
		display: none;
	}

/* Contact ------------------------------------------------------------------ */

	.contact-list {
		list-style: none;
		padding-left: 0;
		margin: 0 0 1.5rem 0;
	}

	.contact-list li {
		display: flex;
		align-items: center;
		gap: 0.85rem;
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		color: #fff;
	}

	.contact-list li:last-child {
		border-bottom: 0;
	}

	.contact-list .hicon {
		flex: 0 0 auto;
		width: 42px;
		height: 42px;
		line-height: 42px;
		text-align: center;
		border-radius: 100%;
		border: 1px solid rgba(255, 255, 255, 0.4);
	}

	.contact-list a {
		color: #fff;
	}

	.contact-list a:hover {
		color: #ffaa17;
	}

	.whatsapp_btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: #25d366;
		color: #fff !important;
		padding: 10px 22px;
		border-radius: 30px;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		margin-bottom: 1.5rem;
		transition: 0.2s;
	}

	.whatsapp_btn:hover {
		background: #1ebe5b;
	}

	.contact-map {
		border-radius: 6px;
		overflow: hidden;
		min-height: 260px;
	}

	.contact-map iframe {
		width: 100%;
		height: 260px;
		border: 0;
		display: block;
	}

/* Footer ------------------------------------------------------------------- */

	.footer_logo h3 {
		color: #fff;
		font-size: 22px;
		margin-bottom: 15px;
	}

	.footer-logo-img {
		height: 34px;
		width: auto;
		margin-bottom: 15px;
		background: rgba(255, 255, 255, 0.94);
		padding: 6px 14px;
		border-radius: 8px;
	}

	.single_footer_address ul li {
		margin-bottom: 10px;
	}

	/* The template's own style.css sets text-transform:capitalize on
	   every ".single_footer ul li a" link (meant for the Quick Links
	   column). The address column reuses that same class combo, which
	   visually mangled the mailto link into "Info@Hatekelektrik.Com". */
	.single_footer_address ul li a {
		text-transform: none;
	}

	.template-credit {
		opacity: 0.5;
		font-size: 12px;
		margin-top: 4px;
	}

	@media screen and (max-width: 767px) {
		.single_footer,
		.single_footer_address {
			padding-top: 40px;
		}
	}

/* Products page --------------------------------------------------------- */

	.page-header_area {
		background: #1b2032;
		padding: 160px 0 70px;
		text-align: center;
	}

	.page-header_area h1 {
		color: #fff;
		font-size: 40px;
		font-weight: 600;
		margin-bottom: 10px;
	}

	.page-header_area p {
		color: rgba(255, 255, 255, 0.75);
		max-width: 640px;
		margin: 0 auto;
	}

	.product-grid {
		padding: 80px 0;
	}

	.product-card {
		background: #fff;
		border: 1px solid #eef0f4;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 30px;
		height: 100%;
		display: flex;
		flex-direction: column;
		transition: 0.2s;
		cursor: pointer;
	}

	a.product-card,
	a.product-card:hover,
	a.product-card:focus {
		color: inherit;
		text-decoration: none;
	}

	a.product-card:focus {
		outline: 3px solid rgba(255, 170, 23, 0.45);
		outline-offset: 3px;
	}

	.product-card:hover {
		box-shadow: 0 10px 30px rgba(27, 32, 50, 0.1);
		transform: translateY(-3px);
	}

	.product-card-img {
		aspect-ratio: 4 / 3;
		background: #f4f6f9;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.product-card-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-card-img .hicon:before {
		font-size: 34px;
		color: #b7bfca;
	}

	.product-card-body {
		padding: 22px 24px 24px;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.product-card-category {
		font-size: 12px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #ffaa17;
		font-weight: 600;
		margin-bottom: 6px;
	}

	.product-card-body h4 {
		color: #1b2032;
		font-size: 18px;
		margin-bottom: 10px;
	}

	.product-card-body h3 {
		color: #1b2032;
		font-size: 18px;
		line-height: 1.35;
		margin-bottom: 10px;
	}

	.product-card-body p {
		color: #747474;
		font-size: 14px;
		margin-bottom: 16px;
		flex: 1;
	}

	.product-card-link {
		font-size: 13px;
		font-weight: 600;
		color: #1b2032;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.product-card:hover .product-card-link {
		color: #ffaa17;
	}

	.seo-product-links {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 12px;
		margin-top: 24px;
	}

	.seo-product-links a {
		display: block;
		border: 1px solid #eef0f4;
		border-radius: 8px;
		color: #1b2032;
		font-weight: 600;
		padding: 14px 16px;
		background: #fff;
	}

	.draft-badge {
		display: inline-block;
		background: #fff4e0;
		color: #a5690a;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		padding: 4px 10px;
		border-radius: 20px;
		margin-bottom: 10px;
	}

	/* Product modal */
	#productModal .modal-content {
		border: 0;
		border-radius: 10px;
		overflow: hidden;
	}

	#productModal .modal-header {
		border-bottom: 0;
		position: absolute;
		right: 0;
		z-index: 2;
	}

	#productModal .close {
		background: rgba(255, 255, 255, 0.85);
		border-radius: 100%;
		width: 34px;
		height: 34px;
		opacity: 1;
		margin: 14px;
		font-size: 20px;
		line-height: 34px;
		text-align: center;
		padding: 0;
	}

	#productModal .modal-product-img {
		width: 100%;
		aspect-ratio: 16 / 9;
		background: #f4f6f9;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	#productModal .modal-product-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	#productModal .modal-product-img .hicon:before {
		font-size: 46px;
		color: #b7bfca;
	}

	#productModal .modal-body {
		padding: 32px 34px 36px;
	}

	#productModal .product-card-category {
		margin-bottom: 8px;
	}

	#productModal h3 {
		color: #1b2032;
		font-size: 24px;
		margin-bottom: 14px;
	}

	#productModal .modal-desc {
		color: #747474;
		margin-bottom: 20px;
	}

	#productModal .spec-list {
		list-style: none;
		padding-left: 0;
		margin: 0;
		border-top: 1px solid #eef0f4;
	}

	#productModal .spec-list li {
		padding: 10px 0;
		border-bottom: 1px solid #eef0f4;
		font-size: 14px;
		color: #444;
	}

	#productModal .spec-list li strong {
		color: #1b2032;
		font-weight: 600;
		margin-right: 6px;
	}

/* Product detail pages -------------------------------------------------- */

	.product-detail-hero {
		text-align: left;
	}

	.product-detail-hero h1 {
		max-width: 820px;
		font-size: 42px;
		line-height: 1.2;
	}

	.product-detail-hero p {
		max-width: 760px;
		margin: 0 0 24px;
	}

	.product-breadcrumb {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		color: rgba(255, 255, 255, 0.7);
		font-size: 13px;
		margin-bottom: 22px;
	}

	.product-breadcrumb a {
		color: #fff;
	}

	.product-breadcrumb a:hover {
		color: #ffaa17;
	}

	.product-breadcrumb strong {
		color: rgba(255, 255, 255, 0.84);
		font-weight: 500;
	}

	.product-detail-kicker {
		display: inline-block;
		color: #ffaa17 !important;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		margin-bottom: 12px !important;
	}

	.product-detail-overview {
		background: #fff;
	}

	.product-detail-media {
		aspect-ratio: 4 / 3;
		background: #f4f6f9;
		border: 1px solid #eef0f4;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: #9aa3b1;
		min-height: 300px;
	}

	.product-detail-media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-detail-media .hicon:before {
		font-size: 48px;
		color: #b7bfca;
	}

	.product-media-placeholder {
		min-height: 260px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		border: 1px solid #e6eaf0;
		background: #f7f9fc;
		color: #626b7a;
		font-size: 14px;
		text-align: center;
		padding: 24px;
	}

	.product-detail-copy {
		padding-left: 36px;
	}

	.product-detail-copy h2,
	.product-detail-band h2,
	.product-spec-section h2,
	.product-faq-section h2,
	.product-related-section h2,
	.product-cta h2 {
		color: #1b2032;
		font-size: 28px;
		line-height: 1.25;
		margin-bottom: 18px;
	}

	.product-detail-copy p {
		color: #626b7a;
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 16px;
	}

	.category-intro {
		background: #fff;
	}

	.category-intro h2 {
		color: #1b2032;
		font-size: 30px;
		line-height: 1.25;
		margin-bottom: 18px;
	}

	.category-intro p {
		color: #626b7a;
		font-size: 16px;
		line-height: 1.8;
		margin-bottom: 14px;
	}

	.category-proof {
		border: 1px solid #eef0f4;
		border-radius: 10px;
		background: #f7f9fc;
		padding: 28px;
	}

	.category-proof strong {
		display: block;
		color: #ffaa17;
		font-family: Oswald, sans-serif;
		font-size: 56px;
		line-height: 1;
		margin-bottom: 8px;
	}

	.category-proof span,
	.category-proof a {
		display: block;
		color: #1b2032;
		font-size: 15px;
		line-height: 1.6;
	}

	.category-proof a {
		font-weight: 700;
		margin-top: 12px;
	}

	.product-grid--static {
		padding-top: 70px;
	}

	.product-data-note {
		border-left: 3px solid #ffaa17;
		background: #fff8ec;
		color: #5f4a20;
		font-size: 14px;
		line-height: 1.6;
		padding: 12px 14px;
		margin: 18px 0;
	}

	.category-links a {
		color: #1b2032;
		font-weight: 600;
	}

	.category-links a:hover {
		color: #ffaa17;
	}

	.product-detail-band {
		background: #f7f9fc;
		padding: 62px 0 40px;
	}

	.product-check-list {
		list-style: none;
		padding-left: 0;
		margin: 0 0 24px;
	}

	.product-check-list li {
		position: relative;
		color: #596273;
		font-size: 15px;
		line-height: 1.65;
		padding-left: 24px;
		margin-bottom: 12px;
	}

	.product-check-list li:before {
		content: "";
		position: absolute;
		left: 0;
		top: 10px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #ffaa17;
	}

	.product-spec-section .section-title p {
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}

	.product-spec-table-wrap {
		overflow-x: auto;
		border: 1px solid #eef0f4;
		border-radius: 10px;
		background: #fff;
	}

	.product-spec-table {
		width: 100%;
		border-collapse: collapse;
		min-width: 520px;
	}

	.product-spec-table th,
	.product-spec-table td {
		border-bottom: 1px solid #eef0f4;
		padding: 15px 18px;
		text-align: left;
		vertical-align: top;
		font-size: 15px;
		line-height: 1.55;
	}

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

	.product-spec-table th {
		width: 34%;
		color: #1b2032;
		font-weight: 600;
		background: #f9fbfe;
	}

	.product-spec-table td {
		color: #596273;
	}

	.product-faq-section {
		background: #f7f9fc;
		padding: 72px 0;
	}

	.product-faq-item {
		max-width: 860px;
		margin: 0 auto 16px;
		padding: 22px 26px;
		background: #fff;
		border: 1px solid #eef0f4;
		border-radius: 8px;
	}

	.product-faq-item h3 {
		color: #1b2032;
		font-size: 18px;
		line-height: 1.35;
		margin-bottom: 8px;
	}

	.product-faq-item p {
		color: #626b7a;
		font-size: 15px;
		line-height: 1.7;
		margin-bottom: 0;
	}

	.related-product-link {
		display: block;
		height: 100%;
		min-height: 126px;
		background: #fff;
		border: 1px solid #eef0f4;
		border-radius: 8px;
		padding: 22px 24px;
		margin-bottom: 24px;
		text-decoration: none;
		transition: 0.2s;
	}

	.related-product-link:hover,
	.related-product-link:focus {
		box-shadow: 0 10px 30px rgba(27, 32, 50, 0.1);
		text-decoration: none;
		transform: translateY(-2px);
	}

	.related-product-link span {
		display: block;
		color: #ffaa17;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		margin-bottom: 8px;
	}

	.related-product-link strong {
		display: block;
		color: #1b2032;
		font-size: 18px;
		line-height: 1.35;
	}

	.product-cta {
		background: #1b2032;
		padding: 70px 0;
		text-align: center;
	}

	.product-cta h2,
	.product-cta p {
		color: #fff;
	}

	.product-cta p {
		max-width: 680px;
		margin: 0 auto 24px;
		color: rgba(255, 255, 255, 0.78);
	}

	@media screen and (max-width: 991px) {
		.product-detail-hero h1 {
			font-size: 34px;
		}

		.product-detail-copy {
			padding-left: 0;
			padding-top: 32px;
		}
	}

	@media screen and (max-width: 575px) {
		.product-detail-hero {
			padding-top: 130px;
		}

		.product-detail-hero h1 {
			font-size: 29px;
		}

		.product-detail-copy h2,
		.product-detail-band h2,
		.product-spec-section h2,
		.product-faq-section h2,
		.product-related-section h2,
		.product-cta h2 {
			font-size: 24px;
		}

		.product-faq-item,
		.related-product-link {
			padding: 20px;
		}
	}