/* LINK Panel - front-end styles for structured Marka/Çözüm pages.
   Built to match the existing Woodmart-built brand/solution pages. */

.linkp-single {
	--linkp-accent: var( --wd-primary-color, #1d4ed8 );
	--linkp-title: var( --wd-title-color, #242424 );
	--linkp-text: var( --wd-text-color, #5b6472 );
	--linkp-border: rgba( 0, 0, 0, 0.08 );
	--linkp-bg-soft: #f6f8fb;
	/* Page-level colours overridable from LINK Panel → Ayarlar → Görünüm.
	   These defaults match the reference site; the dynamic inline style only
	   overrides them when an admin sets a value. */
	--linkp-hero-title: #fff;
	--linkp-hero-text: #fff;
	--linkp-btn-text: #000;
	--linkp-sep-color: #00ff73;
	color: var( --linkp-text );
}

.linkp-single .container {
	max-width: 1222px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

/* Neutralise the theme's content container so our hero can go edge-to-edge
   and sit flush under the header (the theme page title is removed in PHP). */
body.linkp-structured-page .main-page-wrapper {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.linkp-structured-page .main-page-wrapper > .container,
body.linkp-structured-page .main-page-wrapper > .container-fluid {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.linkp-structured-page .main-page-wrapper > .container > .content-layout-wrapper,
body.linkp-structured-page .main-page-wrapper > .container-fluid > .content-layout-wrapper {
	display: block !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.linkp-structured-page .content-layout-wrapper > .col-12,
body.linkp-structured-page .content-layout-wrapper > [class*="col-"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Hero -------------------------------------------------------------- */
.linkp-hero {
	position: relative;
	width: 100%;
	/* Top padding clears the theme's overlapping header (wd-header-overlap /
	   whb-overcontent); the original brand pages use ~100px for the same reason. */
	padding: 130px 0 60px;
	overflow: hidden;
	background: var( --linkp-bg-soft );
	text-align: center;
}

.linkp-hero.has-image {
	display: flex;
	align-items: center;
	min-height: 420px;
	color: #fff;
	text-align: left;
}

.linkp-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.linkp-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.linkp-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgba( 13, 20, 38, 0.85 ) 0%, rgba( 13, 20, 38, 0.6 ) 45%, rgba( 13, 20, 38, 0.2 ) 100% );
}

.linkp-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.linkp-hero:not(.has-image) .linkp-hero-inner {
	max-width: 820px;
	margin: 0 auto;
}

/* Inherit the theme's xxl title typography (wd-fontsize-xxl handles size);
   we only control spacing + colour so it sits correctly over the hero.
   !important is needed to beat the theme's .woodmart-title-container colour. */
.linkp-hero-title {
	margin: 0 0 16px;
	color: var( --linkp-hero-title ) !important;
}

.linkp-hero:not(.has-image) .linkp-hero-title {
	color: var( --linkp-title ) !important;
}

.linkp-hero-desc {
	font-size: 14px;
	line-height: 24px;
	opacity: 0.95;
	max-width: 600px;
}

.linkp-hero.has-image .linkp-hero-desc {
	color: var( --linkp-hero-text );
}

.linkp-hero:not(.has-image) .linkp-hero-desc {
	margin-left: auto;
	margin-right: auto;
}

.linkp-hero-desc p:last-child {
	margin-bottom: 0;
}

.linkp-hero-cta {
	margin-top: 24px;
	margin-bottom: 0;
}

.linkp-btn-discover,
.linkp-btn-discover:hover,
.linkp-btn-discover:focus {
	display: inline-block;
	color: var( --linkp-btn-text ) !important;
}

/* Generic widget rhythm --------------------------------------------- */
.linkp-widget {
	padding: 56px 0;
}

.linkp-intro {
	padding-bottom: 24px;
}

.linkp-widget-title,
.linkp-cozum-heading {
	font-size: clamp( 1.5rem, 2.4vw, 2rem );
	margin: 0 0 26px;
	color: var( --linkp-title );
	text-align: center;
}

.linkp-intro-content,
.linkp-intro-content p {
	font-size: 14px;
	line-height: 1.8;
	color: #000;
}

/* Title content widget (22px) */
.linkp-widget-title-block {
	padding: 24px 0 8px;
}

.linkp-title-widget {
	margin: 0;
	font-family: var( --wd-title-font, inherit );
	font-weight: var( --wd-title-font-weight, 600 );
	font-size: 22px;
	line-height: 1.3;
	color: var( --linkp-title );
}

/* Separator content widget — 476px on desktop, fluid on mobile. Colour comes
   from Ayarlar → Görünüm (default green #00ff73). */
.linkp-widget-separator {
	padding: 16px 0;
}

.linkp-separator {
	display: block;
	width: 476px;
	max-width: 100%;
	height: 3px;
	margin: 0 auto;
	border-radius: 2px;
	background-color: var( --linkp-sep-color, #00ff73 );
}

/* Tüm Çözümler showcase (banner + responsive solution grid/carousel).
   The solution cards overlap upward onto the blue banner, matching the
   original WPBakery design. */
.linkp-as-banner {
	border-radius: 20px;
	padding: 56px 24px 150px;
	text-align: center;
	background-color: #0d1426;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.linkp-as-title {
	margin: 0 0 18px;
	font-family: var( --wd-title-font, inherit );
	font-weight: var( --wd-title-font-weight, 600 );
	font-size: clamp( 1.6rem, 3vw, 2.2rem );
	color: #fff;
}

.linkp-as-sep {
	width: 120px;
	height: 2px;
}

.linkp-as-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 24px;
	align-items: start;
	/* Pull the cards up so they sit over the banner's lower area. */
	margin-top: -110px;
}

.linkp-as-item {
	display: block;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.linkp-as-item:hover {
	transform: translateY( -4px );
}

.linkp-as-img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 1024px ) {
	.linkp-as-banner {
		padding-bottom: 120px;
	}

	.linkp-as-grid {
		grid-template-columns: repeat( 3, 1fr );
		margin-top: -88px;
	}
}

@media ( max-width: 768px ) {
	.linkp-as-banner {
		padding: 36px 18px 96px;
	}

	/* Touch-friendly swipe carousel: scroll-snap with the scrollbar hidden. */
	.linkp-as-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 64%;
		gap: 14px;
		margin-top: -64px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 15px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.linkp-as-grid::-webkit-scrollbar {
		display: none;
	}

	.linkp-as-item {
		scroll-snap-align: center;
	}
}

.linkp-intro-content {
	max-width: none;
	margin: 0;
}

/* Solution tabs — byte-for-byte mirror of Woodmart's vc_tta tab styling
   (themes/woodmart/css/parts/int-wpb-base.min.css). The underline sits on the
   label text itself (not a padded button) and animates to the primary colour
   only on the active tab; inactive tabs are simply dimmed to .7 opacity. There
   is intentionally NO grey divider line under the tab row. */
.linkp-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0;
	margin-bottom: 20px;
}

/* Reset the theme's default <button> chrome (grey rounded background,
   uppercase, min-height, shadow) which would otherwise win over our tab
   styling. We keep the visible look entirely on the label + underline. */
.linkp-single .linkp-tabs-nav .linkp-tab-btn,
.linkp-single .linkp-tabs-nav .linkp-tab-btn:hover,
.linkp-single .linkp-tabs-nav .linkp-tab-btn:focus,
.linkp-single .linkp-tabs-nav .linkp-tab-btn:active {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
}

.linkp-tab-btn {
	appearance: none;
	-webkit-appearance: none;
	padding: 10px 15px;
	font-family: var( --wd-title-font, inherit );
	font-style: var( --wd-title-font-style, normal );
	font-weight: var( --wd-title-font-weight, 600 );
	font-size: 16px;
	line-height: 1.4;
	color: var( --color-gray-800, #242424 );
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.linkp-tab-btn:hover,
.linkp-tab-btn.is-active {
	opacity: 1;
}

.linkp-tab-label {
	position: relative;
	display: inline-block;
	padding-block: 1px;
	line-height: 1.2;
}

.linkp-tab-label::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var( --linkp-accent );
	transition: width 0.4s cubic-bezier( 0.19, 1, 0.22, 1 );
}

.linkp-tab-btn.is-active .linkp-tab-label::after {
	width: 100%;
}

.linkp-tab-panel {
	display: none;
}

.linkp-tab-panel.is-active {
	display: block;
	animation: linkp-fade 0.3s ease;
}

@keyframes linkp-fade {
	from { opacity: 0; transform: translateY( 6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.linkp-cozum-intro {
	margin: 0 0 24px;
	line-height: 1.75;
}

/* Solution / FAQ accordion -----------------------------------------
   Uses Woodmart's native wd-accordion markup; the look (left chevron via
   woodmart-font, grey dividers, primary-colour active title) comes from the
   theme's el-accordion.min.css which we enqueue on our pages. We only adjust
   the body typography to match the brand pages (14px, black). */
.linkp-single .linkp-wd-accordion {
	margin-top: 4px;
}

.linkp-single .linkp-wd-accordion .wd-accordion-content,
.linkp-single .linkp-wd-accordion .wd-accordion-content p {
	font-size: 14px;
	line-height: 1.8;
	color: #000;
}

.linkp-single .linkp-wd-accordion .wd-accordion-content p:last-child {
	margin-bottom: 0;
}

.linkp-more {
	display: inline-block;
	font-weight: 600;
	color: var( --linkp-accent );
	text-decoration: none;
}

.linkp-more:hover {
	text-decoration: underline;
}

/* Image widget ------------------------------------------------------ */
.linkp-widget-image .linkp-image-figure {
	margin: 0;
	text-align: center;
}

.linkp-widget-image.linkp-align-full .container {
	max-width: 100%;
	padding: 0;
}

.linkp-image {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.linkp-image-caption {
	margin-top: 12px;
	font-size: 0.92rem;
}

/* Sub-solution cards (Çözüm children) ------------------------------- */
.linkp-sub-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 22px;
}

.linkp-sub-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	border: 1px solid var( --linkp-border );
	border-radius: 14px;
	background: #fff;
	color: var( --linkp-title );
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.linkp-sub-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 22px 50px -30px rgba( 13, 20, 38, 0.55 );
	border-color: var( --linkp-accent );
}

.linkp-sub-thumb img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.linkp-sub-title {
	font-size: 1.15rem;
	font-weight: 700;
}

.linkp-sub-desc {
	font-size: 0.95rem;
	line-height: 1.6;
}

@media ( max-width: 1024px ) {
	.linkp-hero {
		padding: 110px 0 50px;
	}

	.linkp-hero.has-image {
		min-height: 360px;
	}
}

@media ( max-width: 768px ) {
	.linkp-hero {
		padding: 95px 0 40px;
	}

	.linkp-hero.has-image {
		min-height: 300px;
	}

	.linkp-hero-inner,
	.linkp-hero:not(.has-image) .linkp-hero-inner {
		max-width: 100%;
	}

	.linkp-widget {
		padding: 40px 0;
	}

	.linkp-tab-btn {
		padding: 10px 12px;
	}
}

@media ( max-width: 575px ) {
	.linkp-hero {
		padding: 85px 0 36px;
	}

	.linkp-hero.has-image {
		min-height: 260px;
	}
}