/*
Theme Name: Kedge Infoline
Theme URI: https://kedgeinfoline.com
Author: TenG Spectrum LLP
Author URI: https://tengspectrum.com
Description: Scalable, high-performance corporate WordPress block theme for Kedge Infoline BPO & Data Conversion Services. Built by TenG Spectrum LLP.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: tengkedge
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: block-theme, full-site-editing, custom-colors, wide-blocks, business
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
	--tengkedge-color-gold: #BFB94E;
	--tengkedge-color-gold-hover: #a8a23d;
	--tengkedge-color-gold-light: rgba(191, 185, 78, 0.12);
	--tengkedge-color-dark: #181B22;
	--tengkedge-color-forest: #192313;
	--tengkedge-color-charcoal: #221E1F;
	--tengkedge-color-muted: #565454;
	--tengkedge-color-border: #E2E8F0;
	--tengkedge-color-surface: #F8F9FA;
	--tengkedge-color-white: #FFFFFF;
	--tengkedge-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tengkedge-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tengkedge-font-calligraphy: 'Lucida Calligraphy', 'Apple Chancery', 'Brush Script MT', cursive;
}

/* ==========================================================================
   Global Typography: Geometric & Clean (Plus Jakarta Sans + Inter)
   ========================================================================== */
body,
p,
input,
textarea,
select,
button,
.fluentform,
.wp-block-paragraph,
.wp-block-list,
.wp-block-navigation,
.wp-block-button__link {
	font-family: var(--tengkedge-font-body);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--tengkedge-font-heading);
}

/* ==========================================================================
   Brand Name & Taglines: Lucida Calligraphy Exclusively
   ========================================================================== */
.tengkedge-brand-title,
.tengkedge-font-calligraphy,
.tengkedge-hero-motto {
	font-family: var(--tengkedge-font-calligraphy) !important;
}

.tengkedge-hero-motto {
	color: var(--tengkedge-color-gold, #BFB94E);
	font-size: clamp(1.4rem, 2.8vw, 2.1rem);
	font-weight: 600;
	margin: 0 0 12px 0;
	display: block;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	animation: tengkedgeHeroFadeDown 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* ==========================================================================
   Hero Section Animations & Dynamic Background
   ========================================================================== */
.tengkedge-hero-section,
.tengkedge-page-hero {
	position: relative;
	overflow: hidden;
}

.tengkedge-hero-section::before {
	content: '';
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 700px;
	height: 380px;
	max-width: 90vw;
	background: radial-gradient(ellipse at center, rgba(191, 185, 78, 0.16) 0%, rgba(24, 27, 34, 0) 70%);
	pointer-events: none;
	z-index: 0;
	filter: blur(40px);
	animation: tengkedgePulseGlow 7s ease-in-out infinite alternate;
}

.tengkedge-hero-section > *,
.tengkedge-page-hero > * {
	position: relative;
	z-index: 1;
}

@keyframes tengkedgePulseGlow {
	0% {
		transform: translate(-50%, -50%) scale(0.85);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.15);
		opacity: 0.9;
	}
}

/* Hero Entrance Keyframes */
@keyframes tengkedgeHeroFadeDown {
	0% {
		opacity: 0;
		transform: translateY(-24px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes tengkedgeHeroFadeUp {
	0% {
		opacity: 0;
		transform: translateY(32px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.tengkedge-hero-motto {
	animation: tengkedgeHeroFadeDown 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.tengkedge-hero-section h1,
.tengkedge-page-hero h1 {
	animation: tengkedgeHeroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.tengkedge-hero-section p:not(.tengkedge-hero-motto),
.tengkedge-page-hero p {
	animation: tengkedgeHeroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.tengkedge-hero-section .wp-block-buttons,
.tengkedge-page-hero .wp-block-buttons {
	animation: tengkedgeHeroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.tengkedge-hero-section .tengkedge-hero-trust-strip,
.tengkedge-page-hero .tengkedge-hero-trust-strip {
	animation: tengkedgeHeroFadeUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

/* Zero out white gap between header and content across all pages */
body,
.wp-site-blocks,
.wp-site-blocks > main,
main.wp-block-group,
.wp-block-post-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Remove gap on first block, but EXCLUDE hero sections so their padding is preserved */
.wp-block-post-content > .wp-block-group:first-child:not(.tengkedge-hero-section):not(.tengkedge-page-hero) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

header.wp-block-template-part,
.tengkedge-header {
	margin-bottom: 0 !important;
}

/* Header & Logo */
.tengkedge-header {
	background-color: var(--tengkedge-color-dark);
	border-bottom: 2px solid var(--tengkedge-color-gold);
	transition: all 0.3s ease;
	position: relative;
	z-index: 100;
}

.tengkedge-logo-box {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none !important;
}

.tengkedge-logo-img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
	transition: transform 0.3s ease;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.tengkedge-logo-box:hover .tengkedge-logo-img {
	transform: scale(1.05);
}

.tengkedge-brand-title {
	font-family: var(--tengkedge-font-calligraphy) !important;
	font-weight: 700;
	font-size: clamp(23px, 2.2vw, 27px);
	letter-spacing: 0.6px;
	color: #FFFFFF !important;
	line-height: 1.2;
	margin: 0;
	display: inline-block;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Navigation Links */
.tengkedge-header .wp-block-navigation a {
	color: #E2E8F0 !important;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
	transition: all 0.2s ease;
	text-decoration: none;
}

.tengkedge-header .wp-block-navigation a:hover,
.tengkedge-header .wp-block-navigation a:focus {
	color: var(--tengkedge-color-gold) !important;
}

/* Submenu / Dropdown Styling: Strictly Vertical */
.tengkedge-header .wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container,
.wp-block-navigation__submenu-container {
	background-color: var(--tengkedge-color-dark, #181B22) !important;
	border: 1px solid var(--tengkedge-color-gold, #BFB94E) !important;
	border-radius: 8px !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5) !important;
	padding: 8px 0 !important;
	min-width: 240px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0 !important;
	list-style: none !important;
	z-index: 9999 !important;
}

.tengkedge-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item,
.wp-block-navigation__submenu-container .wp-block-navigation-item,
.wp-block-navigation__submenu-container .wp-block-navigation__item,
.wp-block-navigation__submenu-container li {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
}

.tengkedge-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation__submenu-container .wp-block-navigation__item a,
.wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container a {
	padding: 11px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #E2E8F0 !important;
	display: block !important;
	width: 100% !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
}

.tengkedge-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child a,
.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child a,
.wp-block-navigation__submenu-container .wp-block-navigation__item:last-child a,
.wp-block-navigation__submenu-container li:last-child a {
	border-bottom: none !important;
}

.tengkedge-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation__submenu-container .wp-block-navigation__item a:hover,
.wp-block-navigation__submenu-container a:hover {
	background-color: rgba(191, 185, 78, 0.14) !important;
	color: var(--tengkedge-color-gold, #BFB94E) !important;
	padding-left: 24px !important;
}

/* Primary Brand Buttons */
.tengkedge-btn-primary a,
.tengkedge-btn-primary.wp-block-button__link {
	background-color: var(--tengkedge-color-gold) !important;
	color: var(--tengkedge-color-dark) !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px;
	border-radius: 6px !important;
	padding: 12px 24px !important;
	transition: all 0.25s ease !important;
	border: 1px solid var(--tengkedge-color-gold) !important;
	box-shadow: 0 4px 14px rgba(191, 185, 78, 0.25);
}

.tengkedge-btn-primary a:hover,
.tengkedge-btn-primary.wp-block-button__link:hover {
	background-color: var(--tengkedge-color-gold-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(191, 185, 78, 0.35);
}

.tengkedge-btn-outline a,
.tengkedge-btn-outline.wp-block-button__link {
	background-color: transparent !important;
	color: #FFFFFF !important;
	border: 2px solid rgba(255, 255, 255, 0.35) !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	padding: 12px 24px !important;
	transition: all 0.25s ease !important;
}

.tengkedge-btn-outline a:hover,
.tengkedge-btn-outline.wp-block-button__link:hover {
	border-color: var(--tengkedge-color-gold) !important;
	color: var(--tengkedge-color-gold) !important;
	background-color: rgba(191, 185, 78, 0.08) !important;
}

/* Hero Section with Custom Background Image & Overlay */
.tengkedge-hero-section {
	position: relative !important;
	background-color: #101217 !important;
	overflow: hidden !important;
	padding-top: 130px !important;
	padding-bottom: 100px !important;
}

.tengkedge-page-hero {
	position: relative !important;
	padding-top: 120px !important;
	padding-bottom: 90px !important;
}

@media (max-width: 1024px) {
	.tengkedge-hero-section {
		padding-top: 100px !important;
		padding-bottom: 80px !important;
	}
	.tengkedge-page-hero {
		padding-top: 90px !important;
		padding-bottom: 70px !important;
	}
}

@media (max-width: 768px) {
	.tengkedge-hero-section {
		padding-top: 80px !important;
		padding-bottom: 60px !important;
	}
	.tengkedge-page-hero {
		padding-top: 70px !important;
		padding-bottom: 50px !important;
	}
}

.tengkedge-hero-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('/wp-content/uploads/2026/09/bg-image_ki.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.45;
	pointer-events: none;
	z-index: 1;
}

.tengkedge-hero-section::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 40%, rgba(24, 27, 34, 0.5) 0%, rgba(16, 18, 23, 0.85) 100%);
	pointer-events: none;
	z-index: 2;
}

.tengkedge-hero-section > * {
	position: relative;
	z-index: 3;
}

/* Feature Cards & Service Blocks */
.tengkedge-card {
	background: #FFFFFF;
	border-radius: 12px;
	border: 1px solid #E2E8F0;
	padding: 36px 30px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tengkedge-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: transparent;
	transition: background 0.3s ease;
}

.tengkedge-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(24, 27, 34, 0.08);
	border-color: var(--tengkedge-color-gold);
}

.tengkedge-card:hover::before {
	background: var(--tengkedge-color-gold);
}

/* Technical Capabilities & Experience Cards */
.tengkedge-tech-card {
	background: #FFFFFF;
	border-radius: 14px;
	border: 1px solid #E2E8F0;
	padding: 32px 28px;
	box-shadow: 0 4px 16px rgba(24, 27, 34, 0.04);
	transition: all 0.28s ease;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.tengkedge-tech-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(24, 27, 34, 0.08);
	border-color: #CBD5E1;
}

.tengkedge-tech-card-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid #F1F5F9;
}

.tengkedge-exp-badge {
	align-self: flex-start;
	background: rgba(191, 185, 78, 0.15);
	color: #6d6610;
	font-weight: 700;
	font-size: 0.8rem;
	padding: 4px 12px;
	border-radius: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border: 1px solid rgba(191, 185, 78, 0.35);
}

.tengkedge-tech-card ul.wp-block-list {
	margin: 0;
	padding-left: 20px;
	color: #475569;
}

.tengkedge-tech-card ul.wp-block-list li {
	margin-bottom: 8px;
}

.tengkedge-tech-card ul.wp-block-list li:last-child {
	margin-bottom: 0;
}

/* Specialized Tools & Workflow Grid */
.tengkedge-tools-wrapper {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 38px 34px;
	box-shadow: 0 8px 24px rgba(24, 27, 34, 0.04);
}

.tengkedge-tools-header {
	margin-bottom: 26px;
	padding-bottom: 16px;
	border-bottom: 1px solid #F1F5F9;
}

.tengkedge-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.tengkedge-tool-chip {
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: all 0.25s ease;
}

.tengkedge-tool-chip:hover {
	background: #FFFFFF;
	border-color: var(--tengkedge-color-gold);
	box-shadow: 0 6px 18px rgba(191, 185, 78, 0.15);
	transform: translateY(-2px);
}

.tengkedge-tool-chip i {
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 8px;
	background: rgba(191, 185, 78, 0.16);
	color: #7d7514;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.tengkedge-tool-chip strong {
	display: block;
	color: #181B22;
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 2px;
}

.tengkedge-tool-chip span {
	display: block;
	color: #64748B;
	font-size: 0.84rem;
	line-height: 1.35;
}

@media (max-width: 768px) {
	.tengkedge-tools-wrapper {
		padding: 24px 20px;
	}
	.tengkedge-tools-grid {
		grid-template-columns: 1fr;
	}
}

/* Stats Bar — sits flush below hero, zero awkward white gap */
.tengkedge-stats-bar,
.wp-block-group.tengkedge-stats-bar {
	background-color: #12151C !important;
	border-top: 1px solid rgba(191, 185, 78, 0.25) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	margin-top: 0 !important;
	padding-top: 36px !important;
	padding-bottom: 36px !important;
	position: relative;
	z-index: 5;
}

/* Metric / Stat Highlight Box */
.tengkedge-stat-box {
	background: rgba(255, 255, 255, 0.03) !important;
	border: 1px solid rgba(191, 185, 78, 0.22) !important;
	border-radius: 12px !important;
	padding: 26px 18px !important;
	text-align: center !important;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.tengkedge-stat-box:hover {
	border-color: var(--tengkedge-color-gold) !important;
	background: rgba(191, 185, 78, 0.08) !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 15px rgba(191, 185, 78, 0.15) !important;
}

.tengkedge-stat-number {
	color: var(--tengkedge-color-gold);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: 8px;
	letter-spacing: -0.5px;
	font-variant-numeric: tabular-nums;
	display: block;
}

/* Why Partner - Modern Icon Cards */
.tengkedge-why-container {
	background: #141822;
	border: 1px solid var(--tengkedge-color-gold);
	border-radius: 16px;
	padding: 34px 28px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.tengkedge-why-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 20px 0 24px 0;
}

.tengkedge-why-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(191, 185, 78, 0.18);
	border-radius: 10px;
	padding: 14px 16px;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tengkedge-why-card:hover {
	background: rgba(191, 185, 78, 0.09);
	border-color: var(--tengkedge-color-gold);
	transform: translateX(6px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.tengkedge-why-icon-box {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 10px;
	background: var(--tengkedge-color-gold);
	color: var(--tengkedge-color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 10px rgba(191, 185, 78, 0.3);
}

.tengkedge-why-icon-box svg {
	width: 22px;
	height: 22px;
	fill: #181B22;
}

.tengkedge-why-icon-box i {
	font-size: 19px !important;
	color: #181B22 !important;
	line-height: 1 !important;
}

.tengkedge-why-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tengkedge-why-title {
	color: #FFFFFF !important;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 !important;
}

.tengkedge-why-desc {
	color: #94a3b8 !important;
	font-size: 0.85rem;
	line-height: 1.4;
	margin: 0 !important;
}

/* Step Indicator */
.tengkedge-step-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tengkedge-color-gold);
	color: var(--tengkedge-color-dark);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 16px;
}

/* Ensure Headings inside Dark Containers are Crisp White */
.has-dark-background-color h1,
.has-dark-background-color h2,
.has-dark-background-color h3,
.has-dark-background-color h4,
.has-dark-background-color h5,
.has-forest-background-color h1,
.has-forest-background-color h2,
.has-forest-background-color h3,
.has-forest-background-color h4 {
	color: #FFFFFF !important;
}

.tengkedge-gold-text {
	color: var(--tengkedge-color-gold) !important;
}

/* Footer Social Icons */
.tengkedge-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(191, 185, 78, 0.35);
	color: var(--tengkedge-color-gold) !important;
	text-decoration: none !important;
	transition: all 0.3s ease;
}

.tengkedge-social-icon:hover {
	background: var(--tengkedge-color-gold);
	color: var(--tengkedge-color-dark) !important;
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(191, 185, 78, 0.4);
}

/* Quote Modal Popup Styling */
.tengkedge-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tengkedge-modal-overlay.is-active {
	opacity: 1;
	visibility: visible;
}

.tengkedge-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(16, 18, 23, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tengkedge-modal-content {
	position: relative;
	background: #181B22;
	border: 1px solid var(--tengkedge-color-gold);
	border-radius: 14px;
	width: 100%;
	max-width: 580px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 36px 32px;
	color: #FFFFFF;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(191, 185, 78, 0.15);
	transform: scale(0.92) translateY(20px);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

.tengkedge-modal-overlay.is-active .tengkedge-modal-content {
	transform: scale(1) translateY(0);
}

.tengkedge-modal-close {
	position: absolute;
	top: 16px;
	right: 18px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #cbd5e1;
	font-size: 24px;
	line-height: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.tengkedge-modal-close:hover {
	background: var(--tengkedge-color-gold);
	color: #181B22;
	border-color: var(--tengkedge-color-gold);
}

.tengkedge-modal-badge {
	color: var(--tengkedge-color-gold);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 6px 0;
}

.tengkedge-modal-title {
	color: #FFFFFF !important;
	font-size: 1.65rem;
	font-weight: 800;
	margin: 0 0 8px 0;
}

.tengkedge-modal-desc {
	color: #94a3b8;
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0 0 24px 0;
}

.tengkedge-modal-body {
	color: #e2e8f0;
}

/* ==========================================================================
   Fluent Forms - Standard Page (Light Theme Form)
   ========================================================================== */

.fluentform,
.fluentform form,
.fluentform * {
	box-sizing: border-box;
}

.fluentform label,
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-input--label label {
	color: #1e293b !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.fluentform .ff-el-is-required.asterisk,
.fluentform .text-danger,
.fluentform .ff-required {
	color: #e11d48 !important;
	font-weight: 700 !important;
	margin-left: 2px !important;
}

.fluentform input,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="password"],
.fluentform select,
.fluentform textarea,
.fluentform .ff-el-form-control,
.fluentform .ff_el_input_group input,
.fluentform .iti input {
	background-color: #FFFFFF !important;
	background-image: none !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	font-size: 0.95rem !important;
	width: 100% !important;
	transition: all 0.2s ease !important;
}

.fluentform input::placeholder,
.fluentform textarea::placeholder,
.fluentform .ff-el-form-control::placeholder {
	color: #94a3b8 !important;
	opacity: 1 !important;
}

.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus,
.fluentform .choices__inner.is-focused,
.choices.is-focused .choices__inner {
	border-color: var(--tengkedge-color-gold) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(191, 185, 78, 0.25) !important;
	background-color: #FFFFFF !important;
}

/* Choices.js Dropdown on Light Pages */
.fluentform .choices,
.choices {
	margin-bottom: 0 !important;
	position: relative !important;
	overflow: visible !important;
}

.fluentform .choices__inner,
.choices__inner {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
	border-radius: 6px !important;
	padding: 8px 14px !important;
	min-height: 48px !important;
	display: flex !important;
	align-items: center !important;
	font-size: 0.95rem !important;
	cursor: pointer !important;
}

.choices[data-type*="select-one"] .choices__inner {
	padding-bottom: 8px !important;
}

.choices__list--single .choices__item {
	color: #0f172a !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
}

.choices__placeholder {
	color: #94a3b8 !important;
	opacity: 1 !important;
}

.choices__list--dropdown,
.choices .choices__list--dropdown,
.fluentform .choices__list--dropdown {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
	z-index: 99999 !important;
	margin-top: 4px !important;
	padding: 6px 0 !important;
	overflow: hidden !important;
	max-height: none !important;
}

.choices__list--dropdown .choices__input,
.choices .choices__list--dropdown .choices__input,
.fluentform .choices__list--dropdown .choices__input {
	background-color: #f8fafc !important;
	background: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	margin: 6px 10px 10px 10px !important;
	width: calc(100% - 20px) !important;
	font-size: 0.92rem !important;
	outline: none !important;
}

.choices__list--dropdown .choices__list,
.choices .choices__list--dropdown .choices__list,
.fluentform .choices__list--dropdown .choices__list {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	max-height: 220px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	padding: 0 !important;
}

.choices__list--dropdown .choices__item,
.choices__list--dropdown .choices__item--choice,
.choices .choices__list--dropdown .choices__item,
.choices .choices__list--dropdown .choices__item--choice,
.fluentform .choices__list--dropdown .choices__item,
.fluentform .choices__list--dropdown .choices__item--choice {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	color: #1e293b !important;
	padding: 12px 18px !important;
	font-size: 0.93rem !important;
	font-weight: 500 !important;
	border-bottom: 1px solid #f1f5f9 !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
}

.choices__list--dropdown .choices__item:last-child,
.choices__list--dropdown .choices__item--choice:last-child {
	border-bottom: none !important;
}

.choices__list--dropdown .choices__item--choice.is-highlighted,
.choices__list--dropdown .choices__item--choice:hover,
.choices .choices__list--dropdown .choices__item--choice.is-highlighted,
.choices .choices__list--dropdown .choices__item--choice:hover,
.fluentform .choices__list--dropdown .choices__item--choice.is-highlighted,
.fluentform .choices__list--dropdown .choices__item--choice:hover {
	background-color: rgba(191, 185, 78, 0.15) !important;
	background: rgba(191, 185, 78, 0.15) !important;
	color: #7d7514 !important;
	font-weight: 600 !important;
	padding-left: 22px !important;
}

/* Submit button (universal gold) */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	background-color: var(--tengkedge-color-gold) !important;
	color: var(--tengkedge-color-dark) !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	border: none !important;
	padding: 14px 28px !important;
	box-shadow: 0 4px 14px rgba(191, 185, 78, 0.3) !important;
	cursor: pointer !important;
	width: 100% !important;
	transition: all 0.25s ease !important;
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
	background-color: var(--tengkedge-color-gold-hover) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(191, 185, 78, 0.4) !important;
}

/* ==========================================================================
   Fluent Forms - Modal Popup (Dark Theme Form)
   ========================================================================== */

.tengkedge-modal-body .fluentform label,
.tengkedge-modal-body .fluentform .ff-el-form-check-label,
.tengkedge-modal-body .fluentform .ff-el-input--label label {
	color: #e2e8f0 !important;
	font-weight: 600 !important;
	margin-bottom: 6px !important;
	display: block !important;
}

.tengkedge-modal-body .fluentform .ff-el-is-required.asterisk,
.tengkedge-modal-body .fluentform .text-danger,
.tengkedge-modal-body .fluentform .ff-required {
	color: #f87171 !important;
}

.tengkedge-modal-body .fluentform input,
.tengkedge-modal-body .fluentform input[type="text"],
.tengkedge-modal-body .fluentform input[type="email"],
.tengkedge-modal-body .fluentform input[type="tel"],
.tengkedge-modal-body .fluentform input[type="number"],
.tengkedge-modal-body .fluentform input[type="password"],
.tengkedge-modal-body .fluentform select,
.tengkedge-modal-body .fluentform textarea,
.tengkedge-modal-body .fluentform .ff-el-form-control,
.tengkedge-modal-body .fluentform .ff_el_input_group input,
.tengkedge-modal-body .fluentform .iti input {
	background-color: #222630 !important;
	background-image: none !important;
	border: 1px solid #3b4252 !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	font-size: 0.95rem !important;
	width: 100% !important;
}

.tengkedge-modal-body .fluentform input::placeholder,
.tengkedge-modal-body .fluentform textarea::placeholder,
.tengkedge-modal-body .fluentform .ff-el-form-control::placeholder {
	color: #94a3b8 !important;
	opacity: 1 !important;
}

.tengkedge-modal-body .fluentform input:focus,
.tengkedge-modal-body .fluentform textarea:focus,
.tengkedge-modal-body .fluentform select:focus,
.tengkedge-modal-body .fluentform .ff-el-form-control:focus,
.tengkedge-modal-body .fluentform .choices__inner.is-focused,
.tengkedge-modal-body .choices.is-focused .choices__inner {
	border-color: var(--tengkedge-color-gold) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(191, 185, 78, 0.25) !important;
	background-color: #262b36 !important;
}

.tengkedge-modal-body .choices__inner {
	background-color: #222630 !important;
	background: #222630 !important;
	border: 1px solid #3b4252 !important;
	color: #FFFFFF !important;
}

.tengkedge-modal-body .choices__list--single .choices__item {
	color: #FFFFFF !important;
}

.tengkedge-modal-body .choices__list--dropdown {
	background-color: #181B22 !important;
	background: #181B22 !important;
	border: 1px solid #3b4252 !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75) !important;
}

.tengkedge-modal-body .choices__list--dropdown .choices__input {
	background-color: #121418 !important;
	background: #121418 !important;
	border: 1px solid #3b4252 !important;
	color: #FFFFFF !important;
}

.tengkedge-modal-body .choices__list--dropdown .choices__list {
	background-color: #181B22 !important;
	background: #181B22 !important;
}

.tengkedge-modal-body .choices__list--dropdown .choices__item,
.tengkedge-modal-body .choices__list--dropdown .choices__item--choice {
	background-color: #181B22 !important;
	background: #181B22 !important;
	color: #cbd5e1 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.tengkedge-modal-body .choices__list--dropdown .choices__item--choice.is-highlighted,
.tengkedge-modal-body .choices__list--dropdown .choices__item--choice:hover {
	background-color: rgba(191, 185, 78, 0.15) !important;
	background: rgba(191, 185, 78, 0.15) !important;
	color: var(--tengkedge-color-gold) !important;
}

/* Dropdown Arrow Styling */
.choices[data-type*="select-one"]::after {
	border-color: var(--tengkedge-color-gold) transparent transparent transparent !important;
	right: 14px !important;
}

.choices[data-type*="select-one"].is-open::after {
	border-color: transparent transparent var(--tengkedge-color-gold) transparent !important;
	margin-top: -8px !important;
}

/* Native select on Light Pages */
.fluentform select,
.fluentform select.ff-el-form-control {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-color: #FFFFFF !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23BFB94E' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 20px !important;
	padding-right: 36px !important;
	border: 1px solid #cbd5e1 !important;
	color: #0f172a !important;
	cursor: pointer !important;
}

.fluentform select:focus,
.fluentform select.ff-el-form-control:focus {
	background-color: #FFFFFF !important;
	border-color: var(--tengkedge-color-gold) !important;
	color: #0f172a !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(191, 185, 78, 0.25) !important;
}

.fluentform select option {
	background-color: #FFFFFF !important;
	color: #0f172a !important;
	padding: 10px 14px !important;
}

/* Native select inside Modal Popup */
.tengkedge-modal-body .fluentform select,
.tengkedge-modal-body .fluentform select.ff-el-form-control {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-color: #222630 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23BFB94E' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 20px !important;
	padding-right: 36px !important;
	border: 1px solid #3b4252 !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
}

.tengkedge-modal-body .fluentform select:focus,
.tengkedge-modal-body .fluentform select.ff-el-form-control:focus {
	background-color: #262b36 !important;
	border-color: var(--tengkedge-color-gold) !important;
	color: #FFFFFF !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(191, 185, 78, 0.25) !important;
}

.tengkedge-modal-body .fluentform select option {
	background-color: #181B22 !important;
	color: #FFFFFF !important;
	padding: 10px 14px !important;
}

/* Sleek Dark Scrollbars for Modal & Dropdowns */
.tengkedge-modal-content::-webkit-scrollbar,
.choices__list::-webkit-scrollbar,
.choices__list--dropdown .choices__list::-webkit-scrollbar {
	width: 6px !important;
}

.tengkedge-modal-content::-webkit-scrollbar-track,
.choices__list::-webkit-scrollbar-track,
.choices__list--dropdown .choices__list::-webkit-scrollbar-track {
	background: #121418 !important;
	border-radius: 4px !important;
}

.tengkedge-modal-content::-webkit-scrollbar-thumb,
.choices__list::-webkit-scrollbar-thumb,
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb {
	background: #3b4252 !important;
	border-radius: 4px !important;
}

.tengkedge-modal-content::-webkit-scrollbar-thumb:hover,
.choices__list::-webkit-scrollbar-thumb:hover,
.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb:hover {
	background: var(--tengkedge-color-gold) !important;
}

/* ==========================================================================
   FAQ Accordion Section - Modern Dynamic Card Style
   ========================================================================== */
.tengkedge-faq-container {
	width: 100% !important;
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.tengkedge-faq-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Ensure every FAQ card strictly takes 100% full container width, perfectly aligned */
.tengkedge-faq-wrapper > .tengkedge-faq-item,
.wp-block-group.tengkedge-faq-wrapper > .tengkedge-faq-item,
.tengkedge-faq-item {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	box-sizing: border-box !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	align-self: stretch !important;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-left: 4px solid transparent;
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 2px 8px -2px rgba(16, 24, 40, 0.04), 0 1px 3px -1px rgba(16, 24, 40, 0.02);
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
}

/* Dynamic hover effect on card */
.tengkedge-faq-item:hover {
	border-color: #CBD5E1;
	border-left-color: rgba(191, 185, 78, 0.5);
	transform: translateY(-2px);
	box-shadow: 0 10px 25px -4px rgba(24, 27, 34, 0.07), 0 4px 10px -2px rgba(24, 27, 34, 0.03);
}

/* Active open card state */
.tengkedge-faq-item[open] {
	border-color: rgba(191, 185, 78, 0.6);
	border-left-color: var(--tengkedge-color-gold, #BFB94E);
	box-shadow: 0 12px 30px -4px rgba(191, 185, 78, 0.16), 0 4px 12px -2px rgba(24, 27, 34, 0.04);
}

.tengkedge-faq-summary {
	padding: 22px 28px;
	font-weight: 700;
	font-size: 1.05rem;
	color: #181B22;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	user-select: none;
	list-style: none;
	background: transparent;
	transition: background 0.2s ease, color 0.2s ease;
	outline: none;
}

.tengkedge-faq-summary::-webkit-details-marker {
	display: none;
}

.tengkedge-faq-item[open] .tengkedge-faq-summary {
	background: linear-gradient(180deg, rgba(191, 185, 78, 0.06) 0%, rgba(255, 255, 255, 0) 100%);
	color: #101217;
}

.tengkedge-faq-question {
	flex: 1;
	line-height: 1.48;
	letter-spacing: -0.01em;
	transition: color 0.2s ease;
}

.tengkedge-faq-summary:hover .tengkedge-faq-question {
	color: #0F172A;
}

/* Sleek dynamic circular badge for chevron */
.tengkedge-faq-icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	background: #F1F5F9;
	color: #64748B;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.tengkedge-faq-summary:hover .tengkedge-faq-icon {
	background: rgba(191, 185, 78, 0.22);
	color: #181B22;
}

.tengkedge-faq-item[open] .tengkedge-faq-icon {
	transform: rotate(180deg);
	background: var(--tengkedge-color-gold, #BFB94E);
	color: #181B22;
	box-shadow: 0 3px 12px rgba(191, 185, 78, 0.4);
}

.tengkedge-faq-answer {
	padding: 0 28px 26px 28px;
	color: #475569;
	font-size: 0.98rem;
	line-height: 1.8;
	border-top: 1px solid rgba(226, 232, 240, 0.7);
	margin-top: 4px;
	padding-top: 20px;
	animation: tengkedgeFaqSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tengkedge-faq-answer p {
	margin: 0;
}

@keyframes tengkedgeFaqSlideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Homepage Direct Connect Section - Modern 2-Column Grid
   ========================================================================== */
.tengkedge-contact-grid-container {
	width: 100% !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

.tengkedge-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 32px;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

/* Left Column: Direct Support & Perks Panel */
.tengkedge-contact-info-panel {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(24, 27, 34, 0.04);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tengkedge-contact-info-panel:hover {
	box-shadow: 0 12px 32px rgba(24, 27, 34, 0.07);
}

.tengkedge-contact-image-wrap {
	position: relative;
	width: 100%;
	height: 220px;
	overflow: hidden;
	background: #181B22;
}

.tengkedge-contact-support-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

.tengkedge-contact-info-panel:hover .tengkedge-contact-support-img {
	transform: scale(1.03);
}

.tengkedge-contact-image-overlay {
	position: absolute;
	bottom: 14px;
	left: 16px;
	z-index: 2;
}

.tengkedge-contact-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(24, 27, 34, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--tengkedge-color-gold, #BFB94E);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 700;
	border: 1px solid rgba(191, 185, 78, 0.35);
	letter-spacing: 0.3px;
}

.tengkedge-contact-info-body {
	padding: 28px 28px 30px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tengkedge-contact-info-headline {
	font-size: 1.32rem;
	font-weight: 800;
	color: #181B22;
	margin: 0 0 8px 0;
	line-height: 1.3;
}

.tengkedge-contact-info-subtext {
	font-size: 0.93rem;
	color: #64748B;
	line-height: 1.6;
	margin: 0 0 20px 0;
}

.tengkedge-contact-perks-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}

.tengkedge-contact-perk-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.tengkedge-contact-perk-icon {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 8px;
	background: rgba(191, 185, 78, 0.16);
	color: #7d7514;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	margin-top: 2px;
}

.tengkedge-contact-perk-text strong {
	display: block;
	font-size: 0.94rem;
	color: #181B22;
	font-weight: 700;
	margin-bottom: 2px;
}

.tengkedge-contact-perk-text span {
	font-size: 0.86rem;
	color: #64748B;
	line-height: 1.45;
	display: block;
}

.tengkedge-contact-direct-channels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid #F1F5F9;
}

.tengkedge-contact-channel-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
	color: #1E293B;
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 600;
	transition: all 0.2s ease;
}

.tengkedge-contact-channel-chip:hover {
	background: var(--tengkedge-color-gold, #BFB94E);
	color: #181B22;
	border-color: var(--tengkedge-color-gold, #BFB94E);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(191, 185, 78, 0.25);
}

.tengkedge-contact-channel-chip i {
	color: #7d7514;
	font-size: 12px;
}

.tengkedge-contact-channel-chip:hover i {
	color: #181B22;
}

/* Right Column: Contact Form Panel */
.tengkedge-contact-form-panel {
	background: #FFFFFF !important;
	border: 1px solid #E2E8F0 !important;
	border-radius: 16px !important;
	padding: 34px 34px !important;
	box-shadow: 0 8px 28px rgba(24, 27, 34, 0.05) !important;
	display: flex !important;
	flex-direction: column !important;
}

.tengkedge-form-card-header {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #F1F5F9;
}

.tengkedge-form-card-title {
	font-size: 1.38rem;
	font-weight: 800;
	color: #181B22;
	margin: 0 0 6px 0;
}

.tengkedge-form-card-subtitle {
	font-size: 0.92rem;
	color: #64748B;
	margin: 0;
	line-height: 1.5;
}

/* Responsive Media Queries */
@media (max-width: 960px) {
	.tengkedge-contact-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.tengkedge-contact-image-wrap {
		height: 200px;
	}
}

@media (max-width: 768px) {
	.tengkedge-contact-form-panel {
		padding: 24px 20px !important;
	}
	.tengkedge-contact-info-body {
		padding: 22px 20px;
	}
	.tengkedge-faq-summary {
		padding: 18px 20px;
		font-size: 0.98rem;
		gap: 14px;
	}
	.tengkedge-faq-answer {
		padding: 0 20px 22px 20px;
		font-size: 0.94rem;
	}
	.tengkedge-faq-icon {
		width: 32px;
		height: 32px;
		min-width: 32px;
		font-size: 12px;
	}
}

/* ==========================================================================
   Blog & Post Feed Styles
   ========================================================================== */
.tengkedge-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 32px;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	.tengkedge-blog-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.tengkedge-blog-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: all 0.28s ease;
	box-shadow: 0 4px 16px rgba(24, 27, 34, 0.04);
}

.tengkedge-blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(24, 27, 34, 0.08);
	border-color: #CBD5E1;
}

.tengkedge-blog-card .wp-block-post-featured-image {
	margin: 0 !important;
	overflow: hidden;
	position: relative;
	background: #F1F5F9;
}

.tengkedge-blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.tengkedge-blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.tengkedge-blog-card-body {
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.tengkedge-blog-card-meta-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	gap: 8px;
	flex-wrap: wrap;
}

.tengkedge-cat-badge,
.tengkedge-single-cat-pill {
	background: rgba(191, 185, 78, 0.15);
	color: #6d6610;
	font-weight: 700;
	font-size: 0.78rem;
	padding: 4px 12px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	display: inline-block;
	border: 1px solid rgba(191, 185, 78, 0.35);
}

.tengkedge-cat-badge a,
.tengkedge-single-cat-pill a {
	color: inherit !important;
	text-decoration: none !important;
}

.tengkedge-cat-badge a:hover,
.tengkedge-single-cat-pill a:hover {
	color: #181B22 !important;
}

.tengkedge-post-date {
	color: #94A3B8;
	font-size: 0.82rem;
	margin: 0;
}

.tengkedge-blog-card-title {
	margin: 0 0 12px 0;
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.38;
}

.tengkedge-blog-card-title a {
	color: var(--tengkedge-color-dark);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tengkedge-blog-card-title a:hover {
	color: var(--tengkedge-color-gold);
}

.tengkedge-blog-card-excerpt p {
	color: var(--tengkedge-color-muted);
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0;
	flex-grow: 1;
}

.tengkedge-blog-card-footer {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #F1F5F9;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.85rem;
}

.tengkedge-post-author {
	color: #64748B;
	font-weight: 600;
	margin: 0;
}

.tengkedge-read-more-link {
	color: var(--tengkedge-color-gold);
	font-weight: 700;
	font-size: 0.88rem;
	transition: transform 0.2s ease;
}

.tengkedge-blog-card:hover .tengkedge-read-more-link {
	transform: translateX(3px);
}

.tengkedge-no-posts-box {
	text-align: center;
	padding: 70px 24px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 14px;
	max-width: 680px;
	margin: 0 auto;
	box-shadow: 0 4px 16px rgba(24, 27, 34, 0.04);
}

/* Pagination */
.wp-block-query-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	padding: 9px 18px;
	border-radius: 6px;
	border: 1px solid #E2E8F0;
	background: #FFFFFF;
	color: var(--tengkedge-color-dark);
	text-decoration: none;
	transition: all 0.2s ease;
	font-size: 0.92rem;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination .page-numbers.current {
	background: var(--tengkedge-color-gold);
	color: #181B22;
	border-color: var(--tengkedge-color-gold);
	font-weight: 700;
}

/* ==========================================================================
   Single Post & Article Prose Styles
   ========================================================================== */
.tengkedge-single-title {
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 12px 0 0 0;
	color: #FFFFFF !important;
}

.tengkedge-single-meta .wp-block-post-author__name {
	font-weight: 600;
	color: #FFFFFF;
}

.tengkedge-single-featured-image {
	box-shadow: 0 12px 32px rgba(24, 27, 34, 0.08);
	overflow: hidden;
}

.tengkedge-single-featured-image img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	display: block;
}

.tengkedge-prose-container {
	font-size: 1.08rem;
	line-height: 1.85;
	color: #221E1F;
}

.tengkedge-prose-container p {
	margin-bottom: 24px;
}

.tengkedge-prose-container h2 {
	font-size: clamp(1.6rem, 2.5vw, 2.1rem);
	font-weight: 800;
	color: var(--tengkedge-color-dark);
	margin: 44px 0 18px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #F1F5F9;
}

.tengkedge-prose-container h3 {
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	font-weight: 700;
	color: var(--tengkedge-color-dark);
	margin: 36px 0 14px 0;
}

.tengkedge-prose-container blockquote {
	border-left: 4px solid var(--tengkedge-color-gold);
	padding: 18px 26px;
	background: #F8FAFC;
	margin: 32px 0;
	border-radius: 0 10px 10px 0;
	font-style: italic;
	color: #475569;
}

.tengkedge-prose-container ul,
.tengkedge-prose-container ol {
	padding-left: 28px;
	margin-bottom: 24px;
	color: #334155;
}

.tengkedge-prose-container li {
	margin-bottom: 10px;
}

.tengkedge-tag-pill a {
	background: #F1F5F9;
	color: #475569;
	font-size: 0.82rem;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 4px;
	text-decoration: none;
	margin-right: 8px;
	transition: all 0.2s ease;
	display: inline-block;
	margin-bottom: 8px;
}

.tengkedge-tag-pill a:hover {
	background: var(--tengkedge-color-gold);
	color: #181B22;
}

.tengkedge-post-navigation a {
	color: var(--tengkedge-color-dark);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tengkedge-post-navigation a:hover {
	color: var(--tengkedge-color-gold);
}

/* Dynamic Author Box Styles */
.tengkedge-author-box {
	margin-top: 40px;
	background: #F8FAFC;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 24px 28px;
}

.tengkedge-author-box .wp-block-post-author {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.tengkedge-author-box .wp-block-post-author__avatar {
	flex-shrink: 0;
}

.tengkedge-author-box .wp-block-post-author__avatar img,
.tengkedge-single-meta .wp-block-post-author__avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
	border: 2px solid var(--tengkedge-color-gold);
}

.tengkedge-single-meta .wp-block-post-author__avatar img {
	width: 36px;
	height: 36px;
	border-width: 1px;
}

.tengkedge-author-box .wp-block-post-author__content {
	display: flex;
	flex-direction: column;
}

.tengkedge-author-box .wp-block-post-author__byline {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #94A3B8;
	margin: 0 0 4px 0;
	font-weight: 600;
}

.tengkedge-author-box .wp-block-post-author__name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--tengkedge-color-dark);
	margin: 0 0 6px 0;
}

.tengkedge-author-box .wp-block-post-author__bio {
	font-size: 0.94rem;
	color: var(--tengkedge-color-muted);
	line-height: 1.6;
	margin: 0;
}

/* Fallback bio if author profile biographical info is not filled */
.tengkedge-author-box .wp-block-post-author__bio:empty::before {
	content: "Technical specialist & publishing consultant at Kedge Infoline. Delivering 99.5% guaranteed accuracy across JATS XML, Accessible EPUB3, OCR automation, and enterprise BPO pipelines.";
	display: block;
}

/* ==========================================================================
   Header Navigation Bar & Menu Spacing
   ========================================================================== */
.tengkedge-header .wp-block-navigation,
.wp-block-navigation {
	display: flex;
	align-items: center;
}

.tengkedge-header .wp-block-navigation > .wp-block-navigation__container,
.tengkedge-header .wp-block-navigation > ul,
.wp-block-navigation > .wp-block-navigation__container,
.wp-block-navigation > ul:not(.wp-block-navigation__submenu-container) {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 28px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item,
.wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation__item,
.wp-block-navigation > ul > .wp-block-navigation-item,
.wp-block-navigation > ul > .wp-block-navigation__item {
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.wp-block-navigation-item a,
.wp-block-navigation__item a,
.wp-block-navigation-item .wp-block-navigation-item__content {
	color: #FFFFFF !important;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none !important;
	transition: color 0.2s ease, opacity 0.2s ease;
	padding: 6px 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.wp-block-navigation-item a:hover,
.wp-block-navigation__item a:hover,
.wp-block-navigation-item.current-menu-item a {
	color: var(--tengkedge-color-gold) !important;
}

/* Dropdown / Submenu arrow icons */
.wp-block-navigation-submenu__toggle,
.wp-block-navigation__submenu-icon {
	margin-left: 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: currentColor !important;
}

.wp-block-navigation-submenu__toggle svg,
.wp-block-navigation__submenu-icon svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* Single Post Category Pill & Meta Styling */
.tengkedge-single-cat-pill,
.tengkedge-single-cat-pill a,
.tengkedge-cat-badge,
.tengkedge-cat-badge a {
	background: rgba(191, 185, 78, 0.16) !important;
	color: #BFB94E !important;
	font-weight: 700 !important;
	font-size: 0.78rem !important;
	padding: 5px 14px !important;
	border-radius: 20px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.8px !important;
	text-decoration: none !important;
	display: inline-block !important;
	border: 1px solid rgba(191, 185, 78, 0.35) !important;
	transition: all 0.2s ease !important;
}

.tengkedge-single-cat-pill a:hover,
.tengkedge-cat-badge a:hover {
	background: #BFB94E !important;
	color: #181B22 !important;
}

.tengkedge-single-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	color: #cbd5e1;
	font-size: 0.92rem;
	flex-wrap: wrap;
}

.tengkedge-single-meta .wp-block-post-author {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   Seamless Footer & Template Part Alignment
   ========================================================================== */
header.wp-block-template-part,
footer.wp-block-template-part,
main.wp-block-group,
.wp-block-post-content {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

footer.wp-block-template-part,
footer {
	background-color: var(--tengkedge-color-dark) !important;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

/* Prevent bottom margin leakage from last children */
main > *:last-child,
.wp-block-post-content > *:last-child,
.entry-content > *:last-child {
	margin-bottom: 0 !important;
	margin-block-end: 0 !important;
}

/* ==========================================================================
   Technical Capabilities Cards & Badges
   ========================================================================== */
.tengkedge-tech-card {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 12px;
	padding: 28px 26px;
	box-shadow: 0 4px 16px rgba(24, 27, 34, 0.04);
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
}

.tengkedge-tech-card:hover {
	transform: translateY(-5px);
	border-color: rgba(191, 185, 78, 0.6);
	box-shadow: 0 14px 30px rgba(24, 27, 34, 0.08), 0 0 16px rgba(191, 185, 78, 0.12);
}

.tengkedge-tech-card-header {
	margin-bottom: 16px;
}

.tengkedge-exp-badge {
	display: inline-block;
	background: rgba(191, 185, 78, 0.15);
	color: #78731E;
	border: 1px solid rgba(191, 185, 78, 0.4);
	font-size: 0.76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.tengkedge-tech-card h3 {
	margin: 0;
	color: var(--tengkedge-color-dark);
}

.tengkedge-tech-card ul {
	margin: 0;
	padding-left: 18px;
	color: var(--tengkedge-color-muted);
}

.tengkedge-tech-card ul li {
	margin-bottom: 8px;
}

/* ==========================================================================
   Tools & Workflows Chips Grid
   ========================================================================== */
.tengkedge-tools-wrapper {
	box-sizing: border-box;
}

.tengkedge-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-top: 20px;
}

.tengkedge-tool-chip {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(24, 27, 34, 0.05);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tengkedge-tool-chip:hover {
	transform: translateY(-3px);
	border-color: var(--tengkedge-color-gold);
	box-shadow: 0 10px 24px rgba(191, 185, 78, 0.2);
}

.tengkedge-tool-chip i {
	font-size: 1.6rem;
	color: var(--tengkedge-color-gold);
	flex-shrink: 0;
	width: 32px;
	text-align: center;
}

.tengkedge-tool-chip strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: #181B22 !important;
	margin-bottom: 2px;
}

.tengkedge-tool-chip span {
	display: block;
	font-size: 0.82rem;
	color: #64748B !important;
	line-height: 1.4;
}

/* Dark Container Overrides */
.has-dark-background-color .tengkedge-tools-wrapper .tengkedge-tool-chip,
.tengkedge-hero-section .tengkedge-tools-wrapper .tengkedge-tool-chip {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.has-dark-background-color .tengkedge-tools-wrapper .tengkedge-tool-chip strong,
.tengkedge-hero-section .tengkedge-tools-wrapper .tengkedge-tool-chip strong {
	color: #FFFFFF !important;
}

.has-dark-background-color .tengkedge-tools-wrapper .tengkedge-tool-chip span,
.tengkedge-hero-section .tengkedge-tools-wrapper .tengkedge-tool-chip span {
	color: #94A3B8 !important;
}

/* ==========================================================================
   Trust & ISO Certification Badges
   ========================================================================== */
.tengkedge-hero-trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}

.tengkedge-trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(191, 185, 78, 0.45);
	color: #F1F5F9;
	font-size: 0.84rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 30px;
	letter-spacing: 0.3px;
	backdrop-filter: blur(8px);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tengkedge-trust-pill i {
	color: var(--tengkedge-color-gold);
	font-size: 0.92rem;
}

.tengkedge-trust-pill:hover {
	background: rgba(191, 185, 78, 0.18);
	border-color: var(--tengkedge-color-gold);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(191, 185, 78, 0.25);
}

.tengkedge-trust-pill-light {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	color: var(--tengkedge-color-dark);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tengkedge-trust-pill-light:hover {
	border-color: var(--tengkedge-color-gold);
	box-shadow: 0 4px 12px rgba(191, 185, 78, 0.2);
}

/* ==========================================================================
   Smooth & Noticeable Scroll Reveal Animations
   ========================================================================== */
.tengkedge-animate-init {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.tengkedge-animate-init.is-revealed {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Subtle Interactive Card Enhancements */
.tengkedge-service-card,
.tengkedge-service-card-v2,
.tengkedge-specialization-card,
.tengkedge-why-card,
.tengkedge-why-container,
.tengkedge-step-card,
.tengkedge-stat-box,
.tengkedge-contact-card,
.tengkedge-blog-card {
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.35s ease,
	            background-color 0.35s ease;
}

.tengkedge-service-card:hover,
.tengkedge-service-card-v2:hover,
.tengkedge-specialization-card:hover,
.tengkedge-why-card:hover {
	transform: translateY(-5px);
	border-color: rgba(191, 185, 78, 0.5) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 0 16px rgba(191, 185, 78, 0.12) !important;
}

/* Button Subtle Hover Elevation & Glow */
.tengkedge-btn-primary .wp-block-button__link {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tengkedge-btn-primary .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(191, 185, 78, 0.35);
}

.tengkedge-btn-outline .wp-block-button__link {
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tengkedge-btn-outline .wp-block-button__link:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.08);
}

/* Smooth Accordion Arrow Rotation */
.tengkedge-faq-item .tengkedge-faq-icon i {
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tengkedge-faq-item[open] .tengkedge-faq-icon i {
	transform: rotate(180deg);
}



/* ==========================================================================
   Data Conversion - Graphic Design Slide View (Times New Roman Edition)
   ========================================================================== */
.tengkedge-conversion-slideview {
	position: relative;
	background: #181B22;
	border: 1px solid rgba(191, 185, 78, 0.35);
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(191, 185, 78, 0.08);
	overflow: hidden;
	margin-top: 30px;
}

/* Enforce Times New Roman Typography across this slide presentation as requested */
.tengkedge-conversion-slideview,
.tengkedge-conversion-slideview h1,
.tengkedge-conversion-slideview h2,
.tengkedge-conversion-slideview h3,
.tengkedge-conversion-slideview h4,
.tengkedge-conversion-slideview p,
.tengkedge-conversion-slideview span,
.tengkedge-conversion-slideview li,
.tengkedge-conversion-slideview button,
.tengkedge-conversion-slideview a {
	font-family: 'Times New Roman', Times, 'Liberation Serif', Georgia, serif !important;
}

/* Top Tab Navigation */
.tengkedge-slider-tabs {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 20px;
	margin-bottom: 30px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	scrollbar-width: thin;
	scrollbar-color: var(--tengkedge-color-gold, #BFB94E) transparent;
}
.tengkedge-slider-tabs::-webkit-scrollbar {
	height: 4px;
}
.tengkedge-slider-tabs::-webkit-scrollbar-thumb {
	background: var(--tengkedge-color-gold, #BFB94E);
	border-radius: 4px;
}

.tengkedge-slider-tab {
	background: rgba(255, 255, 255, 0.04);
	color: #cbd5e1;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	align-items: center;
	gap: 10px;
}
.tengkedge-slider-tab i {
	color: var(--tengkedge-color-gold, #BFB94E);
	font-size: 1rem;
	transition: transform 0.3s ease;
}
.tengkedge-slider-tab:hover {
	background: rgba(191, 185, 78, 0.15);
	border-color: rgba(191, 185, 78, 0.5);
	color: #ffffff;
	transform: translateY(-2px);
}
.tengkedge-slider-tab.is-active {
	background: linear-gradient(135deg, #BFB94E 0%, #9E983B 100%);
	color: #181B22 !important;
	border-color: #BFB94E;
	font-weight: 700;
	box-shadow: 0 4px 18px rgba(191, 185, 78, 0.4);
}
.tengkedge-slider-tab.is-active i {
	color: #181B22 !important;
}

/* Slide Viewport & Slides */
.tengkedge-slider-viewport {
	position: relative;
	min-height: 440px;
}

.tengkedge-slide {
	display: none;
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tengkedge-slide.is-active {
	display: block;
	opacity: 1;
	transform: translateX(0);
	animation: tengkedgeSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tengkedgeSlideIn {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.tengkedge-slide-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: center;
}

/* Left Content Area */
.tengkedge-slide-content {
	padding-right: 15px;
}

.tengkedge-slide-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(191, 185, 78, 0.15);
	border: 1px solid rgba(191, 185, 78, 0.4);
	color: #BFB94E;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 20px;
	margin-bottom: 16px;
}

.tengkedge-slide-title {
	color: #ffffff;
	font-size: clamp(2rem, 3.2vw, 2.7rem);
	font-weight: 700;
	margin: 0 0 16px 0;
	line-height: 1.25;
	letter-spacing: 0.3px;
}

.tengkedge-slide-desc {
	color: #d1d5db;
	font-size: 1.15rem;
	line-height: 1.75;
	margin-bottom: 24px;
}

.tengkedge-slide-features {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 28px;
	list-style: none;
	padding: 0;
}
.tengkedge-slide-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #e2e8f0;
	font-size: 1.05rem;
	background: rgba(255, 255, 255, 0.03);
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.tengkedge-slide-features li i {
	color: var(--tengkedge-color-gold, #BFB94E);
	font-size: 0.95rem;
}

.tengkedge-slide-cta-wrap {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.tengkedge-slide-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #BFB94E;
	color: #181B22 !important;
	padding: 12px 26px;
	border-radius: 30px;
	font-size: 1.05rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(191, 185, 78, 0.35);
	transition: all 0.3s ease;
}
.tengkedge-slide-btn:hover {
	background: #a8a23d;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(191, 185, 78, 0.45);
}

/* Right Graphic Design Showcase Box */
.tengkedge-slide-graphic {
	background: radial-gradient(circle at 80% 20%, rgba(191, 185, 78, 0.15) 0%, rgba(25, 35, 19, 0.9) 100%);
	border: 1px solid rgba(191, 185, 78, 0.3);
	border-radius: 16px;
	padding: 30px;
	position: relative;
	box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 380px;
}

.tengkedge-graphic-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 14px;
	margin-bottom: 20px;
}
.tengkedge-graphic-window-dots {
	display: flex;
	gap: 6px;
}
.tengkedge-graphic-window-dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}
.tengkedge-graphic-window-dots span:nth-child(1) { background: #ef4444; }
.tengkedge-graphic-window-dots span:nth-child(2) { background: #eab308; }
.tengkedge-graphic-window-dots span:nth-child(3) { background: #22c55e; }

.tengkedge-graphic-badge {
	background: rgba(191, 185, 78, 0.2);
	border: 1px solid rgba(191, 185, 78, 0.5);
	color: #BFB94E;
	font-size: 0.85rem;
	padding: 4px 10px;
	border-radius: 12px;
	font-weight: 700;
}

.tengkedge-graphic-body {
	position: relative;
}

/* Graphic Mockups */
.tengkedge-graphic-code {
	font-family: 'Consolas', 'Courier New', monospace !important;
	font-size: 0.9rem;
	color: #cbd5e1;
	line-height: 1.7;
	background: rgba(0, 0, 0, 0.35);
	padding: 16px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	overflow-x: auto;
}
.tengkedge-graphic-code .tag { color: #f472b6; }
.tengkedge-graphic-code .attr { color: #38bdf8; }
.tengkedge-graphic-code .val { color: #facc15; }
.tengkedge-graphic-code .txt { color: #f8fafc; }

.tengkedge-graphic-flow {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tengkedge-flow-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(0, 0, 0, 0.3);
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 3px solid #BFB94E;
}
.tengkedge-flow-step span {
	font-size: 1.05rem;
	color: #f1f5f9;
}
.tengkedge-flow-step i {
	color: #BFB94E;
}

.tengkedge-graphic-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 16px;
}
.tengkedge-graphic-stat-box {
	background: rgba(255, 255, 255, 0.04);
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.tengkedge-graphic-stat-box .val {
	font-size: 1.4rem;
	font-weight: 700;
	color: #BFB94E;
	display: block;
}
.tengkedge-graphic-stat-box .lbl {
	font-size: 0.85rem;
	color: #94a3b8;
}

/* Bottom Controls */
.tengkedge-slider-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	flex-wrap: wrap;
	gap: 16px;
}

.tengkedge-slider-nav-btns {
	display: flex;
	gap: 12px;
}
.tengkedge-slider-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 1rem;
	transition: all 0.3s ease;
}
.tengkedge-slider-arrow:hover {
	background: #BFB94E;
	color: #181B22;
	border-color: #BFB94E;
	transform: scale(1.08);
	box-shadow: 0 0 14px rgba(191, 185, 78, 0.4);
}

.tengkedge-slider-dots-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.tengkedge-slider-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: all 0.3s ease;
	border: none;
	padding: 0;
}
.tengkedge-slider-dot.is-active {
	background: #BFB94E;
	width: 32px;
	border-radius: 12px;
	box-shadow: 0 0 10px rgba(191, 185, 78, 0.5);
}

.tengkedge-slider-counter {
	color: #cbd5e1;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 1px;
}
.tengkedge-slider-counter span {
	color: #BFB94E;
	font-weight: 700;
}

/* Responsive Media Queries */
@media (max-width: 900px) {
	.tengkedge-conversion-slideview {
		padding: 24px;
	}
	.tengkedge-slide-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.tengkedge-slide-content {
		padding-right: 0;
	}
	.tengkedge-slide-features {
		grid-template-columns: 1fr;
	}
}