/* ========================================
   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) {
	/* 1. Hero Padding & Başlık */
	.product-detail-page .hero-fullwidth {
		padding: 200px 0 10px 0 !important;
	}
	
	#product-hero-celik-basamak {
		background-position: 70% 100% !important;
	}
	
	#hero-heading {
		font-size: 3rem !important;
	}
	
	/* Hero sol ve alt padding */
	.hero-content-card {
		padding-left: 1rem !important;
		padding-bottom: 1.5rem !important;
	}
	
	.product-hero {
		padding: 200px 0 40px 0;
	}
	
	/* 2. Genel Bilgiler - Mobilde Tek Sütun */
	#product-overview-section .col-6,
	#product-overview-section-custom .col-6 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	
	#product-overview-section p,
	#product-overview-section .text-justified-indent,
	#product-overview-section .text-justified,
	#product-overview-section-custom p,
	#product-overview-section-custom .text-justified-indent,
	#product-overview-section-custom .text-justified {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
		text-align: left !important;
		text-indent: 0 !important;
	}
	
	#product-overview-section h2 {
		font-size: 1.1rem !important;
	}
	
	/* 3. Teknik Görsel İşaretçileri */
	.technical-diagram-hotspot .hotspot-dot {
		font-size: 1.25rem !important;
		width: 32px !important;
		height: 32px !important;
		padding: 0 !important;
	}
	
	/* 4. Bölüm Sıralaması - nth-child ile Kesin Hedefleme */
	section[aria-labelledby="specs-heading"] .col-md-6 > .row.g-4.h-100 {
		display: flex !important;
		flex-direction: column !important;
	}
	
	/* İlk child: Ölçü Bilgileri (Material/Coating/Standard) -> order: 2 */
	section[aria-labelledby="specs-heading"] .col-md-6 > .row.g-4.h-100 > *:nth-child(1) {
		order: 2 !important;
	}
	
	/* İkinci child: Teknik Görsel -> order: 1 (EN ÜSTE) */
	section[aria-labelledby="specs-heading"] .col-md-6 > .row.g-4.h-100 > *:nth-child(2) {
		order: 1 !important;
		margin-top: 0 !important;
	}
	
	/* Üçüncü child: Izgara Seçimi Accordion -> order: 3 (EN ALTA) */
	section[aria-labelledby="specs-heading"] .col-md-6 > .row.g-4.h-100 > *:nth-child(3) {
		order: 3 !important;
	}
	
	/* Göz Aralığı Tablosu - Tablo ve Yazı Alt Alta */
	.mesh-table-accordion-body .row {
		flex-direction: column !important;
	}
	
	.mesh-table-accordion-body .col-6 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-bottom: 1rem !important;
	}
	
	.mesh-table-accordion-body .col-6:last-child {
		margin-bottom: 0 !important;
	}
	
	/* Kullanım Alanları - Mobilde İki Sütun */
	section[aria-labelledby="applications-heading"] .row.g-3 > [class*="col-md-4"] {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
	}
	
	section[aria-labelledby="applications-heading"] .module-1 p {
		font-size: 0.8rem !important;
	}
	
	section[aria-labelledby="applications-heading"] .type-icon-medium {
		font-size: 1.5rem !important;
	}
	
	/* 5. Göz Aralığı Tablosu */
	#dimensionsMatrixModal .modal-dialog {
		max-width: 100vw !important;
		width: 100vw !important;
		margin: 0 !important;
	}
	
	#dimensionsMatrixModal .modal-content {
		border-radius: 0 !important;
	}
	
	#dimensionsMatrixModal table {
		font-size: 0.65rem !important;
		display: block !important;
		overflow-x: auto !important;
		white-space: nowrap !important;
	}
	
	#dimensionsMatrixModal table th,
	#dimensionsMatrixModal table td {
		padding: 0.15rem 0.1rem !important;
		font-size: 0.65rem !important;
		white-space: nowrap !important;
	}
	
	#dimensionsMatrixModal thead,
	#dimensionsMatrixModal tbody,
	#dimensionsMatrixModal tr {
		display: table !important;
		width: auto !important;
	}
	
	/* 6. CTA Başlık */
	h2[class*="display"],
	h2[class*="fs-3"],
	h2.fs-2rem {
		font-size: 1.5rem !important;
	}
	
	#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;
}


#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");
}