/* ========================================
   PRODUCT PAGE COMMON STYLES
   Shared styles for all product pages
   ======================================== */

/* ========================================
   ORTAK KURALLAR - COMMON RULES
   (Tüm ürün sayfalarında kullanılan)
   ======================================== */
.hero-fullwidth {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 220px 0 70px 0;
	border-bottom: 1px solid #ddd;
	background-color: #ffffff;
}
.product-detail-page .hero-fullwidth {
	background-size: auto;
	background-repeat: no-repeat;
	background-position: bottom center;
	padding: 290px 0 80px 0;
	margin-bottom: 60px;
}
#Urunler-Hero {
	background: var(--color-white);
	padding: 200px 0 0 0;
	border-bottom: 1px solid #fff;
}

#Urunler-Hero::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: url('../i/bg-prod.jpg') no-repeat 0 35%;
	background-size: 100%;
	opacity: 0.6;
	z-index: 1;
}
#hero-content-text {
	position: relative;
	top: 70px;
	width: auto;
	margin: 20px 0 0 0;
	padding: 50px 70px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.9);
}

#hero-content-text h1 {
	max-width: 400px;
}

#hero-content-text p {
	max-width: 900px;
}
.hero-content-card {
	z-index: 2;
	backdrop-filter: blur(20px);
}
.hero-content-card p{
	z-index: 3;
}
.hero-description {
	text-align: justify;
}
.product-hero {
	background: var(--color-white);
	padding: 280px 0 60px 0;
}
.product-detail-page main {
	padding-top: 0;
}
#specs-heading,
#types-heading,
#applications-heading,
#faq-heading {
	scroll-margin-top: 300px;
}

#applications-heading {
	scroll-margin-top: 340px;
}
.text-justified-indent {
	text-align: justify;
	text-indent: 20px;
}

.text-justified {
	text-align: justify;
}
.type-icon-large {
	font-size: 3rem;
}

.type-icon-medium {
	font-size: 2rem;
}
.avatar-clickable {
	cursor: pointer;
}
.ribbon-fixed-bottom {
	bottom: 1.25rem !important;
}
.specimen-clickable {
	cursor: pointer;
}
#TipAvaGal span.avatar {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	cursor: pointer;
}

#TipAvaGal span.avatar img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	filter: contrast(1.05) saturate(1.05);
}
.stair-gallery-thumb,
.custom-gallery-thumb,
.product-gallery-thumb,
.expanded-gallery-thumb,
.perforated-gallery-thumb,
.platform-gallery-thumb {
	cursor: pointer;
}

.stair-gallery-thumb img,
.custom-gallery-thumb img,
.product-gallery-thumb img,
.expanded-gallery-thumb img,
.perforated-gallery-thumb img,
.platform-gallery-thumb img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	filter: contrast(1.05) saturate(1.05);
}
.specimen-inline-img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	filter: contrast(1.05) saturate(1.05);
	cursor: pointer;
}
.product-gallery-thumbs-wrap {
	max-height: 600px;
}

.product-gallery-thumb {
	width: 170px;
	height: 80px;
}

.product-gallery-thumb-caption {
	font-size: 0.7rem;
}

.product-gallery-main-img {
	max-height: 600px;
	object-fit: contain;
	cursor: pointer;
}
.mesh-table-accordion-row.collapse {
	display: none !important;
}

.mesh-table-accordion-row.collapse.show {
	display: table-row !important;
}

.mesh-table-accordion-chevron {
	transition: transform 0.25s ease;
}
.izgara-secim-accordion {
	list-style: none;
	padding: 0;
	margin: 0;
}

.izgara-secim-accordion-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.izgara-secim-accordion-item:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.izgara-secim-accordion-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: background 0.2s ease;
}

.izgara-secim-accordion-trigger * {
	cursor: pointer !important;
}

.izgara-secim-accordion-chevron {
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.izgara-secim-accordion-trigger[aria-expanded="true"] .izgara-secim-accordion-chevron {
	transform: rotate(180deg);
}

.izgara-secim-accordion-content {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.3s ease;
}

.izgara-secim-accordion-content.show {
	max-height: 2000px;
}

.izgara-secim-accordion-body {
	padding: 1rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.95rem;
	line-height: 1.6;
}

.izgara-secim-accordion-body p:last-child {
	margin-bottom: 0;
}
.modal-dialog.modal-xxl {
	max-width: 90vw;
	width: 90vw;
}
.modal.fade {
	transition: none !important;
}

.modal.fade .modal-dialog {
	transition: none !important;
}

.modal-backdrop.fade {
	transition: opacity 0.1s ease !important;
}

.modal img {
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.modal-content {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
@media screen and (max-width: 767px) {
	.product-hero {
		padding: 200px 0 40px 0;
	}
	#specs-heading,
	#types-heading,
	#faq-heading {
		scroll-margin-top: 300px;
	}
	
	#applications-heading {
		scroll-margin-top: 860px;
	}
	.modal-dialog.modal-xxl {
		max-width: 98vw;
		width: 98vw;
		margin: 0.5rem auto;
	}
}

@media (max-width: 1200px) {
	.modal-dialog.modal-xxl {
		max-width: 95vw;
		width: 95vw;
	}
}


/* ========================================
   SAYFA ÖZELİ BÖLÜMLER
   (Her ürün sayfasına özel kurallar)
   ======================================== */


#product-hero-platform-izgarasi {
	background-image: url("../i/001-bg.jpg");
}
#product-overview-section {
	position: relative;
	top: -90px;
}
.technical-diagram-wrap {
	max-width: 800px;
	overflow: visible !important;
}

.technical-diagram-wrap .technical-diagram-img {
	max-height: 500px;
	object-fit: contain;
}

.technical-diagram-hotspot {
	transform: translate(-50%, -50%);
	z-index: 1;
	overflow: visible !important;
}

.technical-diagram-hotspot:hover,
.technical-diagram-hotspot:focus-within {
	z-index: 100 !important;
}

.technical-diagram-hotspot:hover .hotspot-detail,
.technical-diagram-hotspot:focus-within .hotspot-detail,
.technical-diagram-hotspot.highlight-from-list .hotspot-detail {
	display: block !important;
}

.technical-diagram-hotspot.highlight-from-list {
	z-index: 100 !important;
}

.technical-diagram-hotspot .hotspot-dot:hover {
	opacity: 0.9;
}

.hotspot-dot {
	cursor: pointer;
}
.spec-hotspot-trigger {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.spec-hotspot-trigger:hover,
.spec-hotspot-trigger:focus {
	opacity: 0.85;
	outline: none;
}
.hotspot-detail {
	min-width: 300px;
	max-width: 450px;
	bottom: 100%;
	margin-bottom: 8px;
	display: none;
	z-index: 10;
	white-space: normal;
	overflow: visible;
}
#GratingKeyCodeTable th {
	font-weight: 900;
}

#GratingKeyCodeTable th,
#GratingKeyCodeTable td {
	padding: 5px;
	text-align: center;
}
#dimensionsMatrixModal .table-responsive {
	border: 1px solid #dee2e6;
}

#dimensionsMatrixModal table th,
#dimensionsMatrixModal table td {
	padding: 0.5rem;
	vertical-align: middle;
}

#dimensionsMatrixModal table thead th {
	background-color: #f8f9fa;
	border-bottom: 2px solid #dee2e6;
}

#dimensionsMatrixModal table tbody tr:nth-child(even) {
	background-color: #f8f9fa;
}

#dimensionsMatrixModal table tbody tr:hover {
	background-color: #e9ecef;
}
#dimensionsMatrixModal table thead th.distributor-col,
#dimensionsMatrixModal table tbody td.distributor-cell {
	width: 70px;
	min-width: 70px;
	max-width: 70px;
	box-sizing: border-box;
}

#dimensionsMatrixModal table tbody td:first-child,
#dimensionsMatrixModal table thead th:first-child {
	box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
#dimensionsMatrixModal table tbody tr.row-hover {
	background-color: #e3f2fd !important;
}

#dimensionsMatrixModal table thead th.col-hover {
	background-color: #e3f2fd !important;
}

#dimensionsMatrixModal table tbody td.row-hover {
	background-color: #e3f2fd !important;
}

#dimensionsMatrixModal table tbody td.col-hover {
	background-color: #bbdefb !important;
}

#dimensionsMatrixModal table tbody td.row-hover.col-hover {
	background-color: #90caf9 !important;
	font-weight: bold;
}

#dimensionsMatrixModal table tbody td.distributor-cell:hover {
	background-color: #e3f2fd !important;
	cursor: pointer;
}

#dimensionsMatrixModal table thead th.carrier-header:hover {
	background-color: #e3f2fd !important;
	cursor: pointer;
}
#dimensionsMatrixModal table tbody td.type-ne {
	background-color: #e8f5e9 !important;
	color: #2e7d32;
	font-weight: 500;
}

#dimensionsMatrixModal table tbody td.type-yg {
	background-color: #fff3e0 !important;
	color: #e65100;
	font-weight: 500;
}

#dimensionsMatrixModal table tbody td.type-tg {
	background-color: #ffebee !important;
	color: #c62828;
	font-weight: 600;
}
#dimensionsMatrixModal table tbody td.type-ne.row-hover,
#dimensionsMatrixModal table tbody td.type-ne.col-hover {
	background-color: #c8e6c9 !important;
}

#dimensionsMatrixModal table tbody td.type-yg.row-hover,
#dimensionsMatrixModal table tbody td.type-yg.col-hover {
	background-color: #ffe0b2 !important;
}

#dimensionsMatrixModal table tbody td.type-tg.row-hover,
#dimensionsMatrixModal table tbody td.type-tg.col-hover {
	background-color: #ffcdd2 !important;
}

#dimensionsMatrixModal table tbody td.type-ne.row-hover.col-hover {
	background-color: #a5d6a7 !important;
}

#dimensionsMatrixModal table tbody td.type-yg.row-hover.col-hover {
	background-color: #ffcc80 !important;
}

#dimensionsMatrixModal table tbody td.type-tg.row-hover.col-hover {
	background-color: #ef9a9a !important;
}
#dimensionsMatrixModal table thead th.carrier-3mm {
	font-weight: 700 !important;
	font-size: 0.9rem;
}

#dimensionsMatrixModal table tbody td.distributor-3mm,
#dimensionsMatrixModal table tbody td.distributor-o5 {
	font-weight: 700 !important;
	font-size: 0.9rem;
}

#dimensionsMatrixModal table tbody tr.distributor-3mm td.cell-3mm,
#dimensionsMatrixModal table tbody tr.distributor-o5 td.cell-3mm,
#dimensionsMatrixModal table tbody tr.distributor-o5 td.matrix-cell {
	font-weight: 700 !important;
}
#dimensionsMatrixModal table thead th.thickness-group-end {
	border-right: 2px solid #bbb !important;
}

#dimensionsMatrixModal table tbody td.thickness-group-end {
	border-right: 2px solid #bbb !important;
}

#dimensionsMatrixModal table tbody tr.thickness-group-end-row td {
	border-bottom: 2px solid #bbb !important;
}

#dimensionsMatrixModal table tbody tr.thickness-group-end-row td.distributor-cell {
	border-bottom: 2px solid #bbb !important;
}
#dimensionsMatrixModal table th.watermark-col.separator-col,
#dimensionsMatrixModal table td.watermark-col.separator-col {
	width: 4px;
	min-width: 4px;
	max-width: 5px;
	padding: 0 1px !important;
	font-size: 5px !important;
	color: #bbb;
	background-color: #f5f5f5 !important;
	border-left: none !important;
	border-right: none !important;
	overflow: visible;
	vertical-align: middle;
	text-align: center;
	position: relative;
}

#dimensionsMatrixModal table th.watermark-col.separator-col .watermark-vertical,
#dimensionsMatrixModal table td.watermark-col.separator-col .watermark-vertical {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: 0;
	transform: translate(-50%, -50%) rotate(-90deg);
	white-space: nowrap;
	line-height: 1.1;
	font-size: 5px;
	letter-spacing: 0.02em;
	color: #bbb;
}

#dimensionsMatrixModal table th.thickness-group-end.carrier-3mm,
#dimensionsMatrixModal table td.thickness-group-end.cell-3mm {
	border-right: none !important;
}
#dimensionsMatrixModal table tr.watermark-row.separator-row td.watermark-row-cell {
	height: 1px;
	max-height: 8px;
	padding: 0 4px !important;
	font-size: 5px !important;
	line-height: 1;
	color: #bbb;
	background-color: #f5f5f5 !important;
	overflow: hidden;
	white-space: nowrap;
	border-top: none !important;
	border-bottom: none !important;
	vertical-align: middle;
}

#dimensionsMatrixModal table tr.before-watermark-row td {
	border-bottom: none !important;
}
.table-protected {
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	background-color: #fff;
}

.table-protected table,
.table-protected table th,
.table-protected table td {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
.table-watermark-wrap {
	position: relative;
	display: block;
}

.table-watermark {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../i/2026-logo-tek.jpg');
	background-repeat: repeat;
	background-size: 500px auto;
	background-position: center center;
	opacity: 0.05;
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: multiply;
}

.table-protected table.table-transparent {
	position: relative;
	z-index: 2;
	background-color: transparent !important;
}

.table-protected table.table-transparent thead {
	background-color: rgba(255, 255, 255, 0.85) !important;
}

.table-protected table.table-transparent thead th {
	background-color: rgba(255, 255, 255, 0.85) !important;
}

.table-protected table.table-transparent tbody {
	background-color: transparent !important;
}

.table-protected table.table-transparent tbody tr {
	background-color: transparent !important;
}

.table-protected table.table-transparent tbody tr:nth-child(even) {
	background-color: rgba(248, 249, 250, 0.6) !important;
}

.table-protected table.table-transparent tbody td {
	background-color: transparent !important;
}

.table-protected table.table-transparent tbody td.type-ne {
	background-color: rgba(232, 245, 233, 0.7) !important;
}

.table-protected table.table-transparent tbody td.type-yg {
	background-color: rgba(255, 243, 224, 0.7) !important;
}

.table-protected table.table-transparent tbody td.type-tg {
	background-color: rgba(255, 235, 238, 0.7) !important;
}

.table-protected table.table-transparent thead th:first-child,
.table-protected table.table-transparent tbody td.distributor-cell {
	background-color: #fff !important;
	z-index: 12;
}
#dimensionsMatrixModal tbody td.matrix-cell.cell-brand {
	position: relative;
}

#dimensionsMatrixModal tbody td.matrix-cell.cell-brand::after {
	content: 'Milimetal';
	position: absolute;
	bottom: 2px;
	right: 4px;
	font-size: 6px;
	line-height: 1;
	opacity: 0.35;
	color: #444;
	pointer-events: none;
	white-space: nowrap;
}
#faq-card-celik-izgara-image {
	background-image: url("../i/prod/gr-010.jpg");
	background-repeat: no-repeat;
	background-position: 0 70%;
	background-size: cover;
}
@media screen and (max-width: 767px) {
	#dimensionsMatrixModal table {
		font-size: 0.75rem;
	}
	
	#dimensionsMatrixModal table th,
	#dimensionsMatrixModal table td {
		padding: 0.25rem;
	}
}


#product-hero-ozel-uretim-izgara {
	background-image: url("../i/002-bg.jpg");
}
#product-overview-section-custom {
	position: relative;
	top: -100px;
}
#faq-card-custom-product {
	background-image: url("../i/prod/custom-012a.jpg");
	background-repeat: no-repeat;
	background-position: 0 70%;
	background-size: 30%;
	padding-left: 32%;
}
.faq-accordion-body {
	position: relative;
	overflow: hidden;
	padding-left: 3rem !important;
	text-indent: 25px;
}
.faq-decorative-icon {
	position: absolute;
	font-size: 75px;
	top: -20px;
	left: -45px;
	opacity: 0.5;
}


#product-hero-celik-basamak {
	background-image: url("../i/003-bg.jpg");
}
#faq-card-celik-basamak-image {
	background-image: url("../i/prod/cb-010.jpg");
	background-repeat: no-repeat;
	background-position: 0 70%;
	background-size: cover;
}


#product-hero-genisletilmis-metal {
	background-image: url("../i/004-bg.jpg");
}


#product-hero-delikli-sac {
	background-image: url("../i/005-bg.jpg");
}


#product-hero-celik-platform-sistemleri {
	background-image: url("../i/006-bg.jpg");
}