/* ModaKadın Kombin Test Botu — Public Styles */

:root {
	--mkb-acc: #b06ab3;
	--mkb-acc2: #7b4397;
	--mkb-ink: #3a2540;
	--mkb-soft: #faf5ff;
	--mkb-border: #efe7f3;
	--mkb-muted: #6a5d72;
	--mkb-radius: 16px;
	--mkb-shadow: 0 8px 24px rgba(80, 40, 90, 0.10);
}

.mkb-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--mkb-ink);
	line-height: 1.6;
}

.mkb-hero {
	text-align: center;
	margin-bottom: 32px;
}

.mkb-hero__badge {
	display: inline-block;
	background: var(--mkb-soft);
	color: var(--mkb-acc2);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.mkb-hero__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	margin: 0 0 10px;
	color: var(--mkb-ink);
}

.mkb-hero__desc {
	color: var(--mkb-muted);
	max-width: 560px;
	margin: 0 auto;
	font-size: 1.02rem;
}

.mkb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 860px) {
	.mkb-grid {
		grid-template-columns: 1fr;
	}
}

.mkb-form-col,
.mkb-result-col {
	background: #fff;
	border: 1px solid var(--mkb-border);
	border-radius: var(--mkb-radius);
	padding: 24px;
	box-shadow: var(--mkb-shadow);
}

.mkb-upload {
	border: 2px dashed #dccde4;
	border-radius: 14px;
	overflow: hidden;
	margin-bottom: 20px;
	transition: border-color 0.2s;
}

.mkb-upload.is-dragover {
	border-color: var(--mkb-acc);
	background: var(--mkb-soft);
}

.mkb-upload__inner {
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mkb-upload__placeholder {
	text-align: center;
	padding: 24px;
}

.mkb-upload__icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 8px;
}

.mkb-upload__hint {
	font-size: 0.85rem;
	color: var(--mkb-muted);
	margin: 4px 0 14px;
}

.mkb-upload__inner img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	display: block;
}

.mkb-fields {
	display: grid;
	gap: 14px;
	margin-bottom: 16px;
}

.mkb-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--mkb-acc2);
	margin-bottom: 6px;
}

.mkb-field select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--mkb-border);
	border-radius: 10px;
	font-size: 0.95rem;
	background: #fff;
	color: var(--mkb-ink);
}

.mkb-privacy {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.85rem;
	color: var(--mkb-muted);
	margin-bottom: 18px;
	cursor: pointer;
}

.mkb-privacy input {
	margin-top: 3px;
	flex-shrink: 0;
}

.mkb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}

.mkb-btn--primary {
	background: linear-gradient(120deg, var(--mkb-acc2), var(--mkb-acc));
	color: #fff;
	box-shadow: 0 6px 18px rgba(123, 67, 151, 0.28);
}

.mkb-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(123, 67, 151, 0.35);
}

.mkb-btn--outline {
	background: #fff;
	border: 2px solid var(--mkb-acc);
	color: var(--mkb-acc2);
}

.mkb-btn--full {
	width: 100%;
}

.mkb-safe-note {
	font-size: 0.82rem;
	color: var(--mkb-muted);
	text-align: center;
	margin-top: 12px;
}

.mkb-loading {
	text-align: center;
	padding: 32px 16px;
}

.mkb-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid var(--mkb-soft);
	border-top-color: var(--mkb-acc);
	border-radius: 50%;
	animation: mkb-spin 0.8s linear infinite;
	margin: 0 auto 16px;
}

@keyframes mkb-spin {
	to { transform: rotate(360deg); }
}

.mkb-error {
	background: #fff6f6;
	border: 1px solid #f4dede;
	color: #a23b3b;
	padding: 14px 18px;
	border-radius: 12px;
	margin-top: 16px;
	font-size: 0.92rem;
}

.mkb-result__empty {
	text-align: center;
	padding: 40px 20px;
	color: var(--mkb-muted);
}

.mkb-result__empty-icon {
	font-size: 2.5rem;
	margin-bottom: 12px;
}

.mkb-result__empty h3 {
	color: var(--mkb-ink);
	margin: 0 0 8px;
}

/* Result card */
.mkb-result-card {
	animation: mkb-fadeIn 0.4s ease;
}

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

.mkb-result-header {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
}

.mkb-result-image {
	flex: 0 0 100px;
	border-radius: 12px;
	overflow: hidden;
}

.mkb-result-image img {
	width: 100px;
	height: 130px;
	object-fit: cover;
	display: block;
}

.mkb-result-score {
	flex: 1;
	text-align: center;
	padding: 16px;
	border-radius: 14px;
	background: var(--mkb-soft);
}

.mkb-result-score__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mkb-acc2);
}

.mkb-result-score__value {
	font-size: 2.8rem;
	font-weight: 800;
	line-height: 1;
	color: var(--mkb-ink);
}

.mkb-result-score__value small {
	font-size: 1rem;
	font-weight: 600;
	color: var(--mkb-muted);
}

.mkb-score--excellent .mkb-result-score { background: linear-gradient(135deg, #f0fff4, #e8faf0); }
.mkb-score--good .mkb-result-score { background: linear-gradient(135deg, #faf5ff, #f3e9fa); }
.mkb-score--fair .mkb-result-score { background: linear-gradient(135deg, #fffbf0, #fef6e4); }
.mkb-score--low .mkb-result-score { background: linear-gradient(135deg, #fff6f6, #fef0f0); }

.mkb-result-summary {
	font-size: 1.02rem;
	line-height: 1.7;
	margin: 0 0 8px;
}

.mkb-result-disclaimer {
	font-size: 0.82rem;
	color: var(--mkb-muted);
	margin: 0 0 16px;
	font-style: italic;
}

.mkb-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.mkb-tag {
	background: var(--mkb-soft);
	color: var(--mkb-acc2);
	font-size: 0.82rem;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid #ecdcf0;
}

.mkb-section {
	margin-bottom: 22px;
}

.mkb-section h4 {
	font-size: 1rem;
	color: var(--mkb-acc2);
	margin: 0 0 10px;
	border-bottom: 2px solid var(--mkb-soft);
	padding-bottom: 6px;
}

.mkb-section ul {
	margin: 0;
	padding-left: 20px;
	line-height: 1.75;
}

.mkb-section--strengths ul { list-style: none; padding-left: 0; }
.mkb-section--strengths li::before { content: "✓ "; color: #3a9d5c; font-weight: 700; }

.mkb-section--improve ul { list-style: none; padding-left: 0; }
.mkb-section--improve li::before { content: "→ "; color: var(--mkb-acc); font-weight: 700; }

.mkb-score-row { margin-bottom: 10px; }

.mkb-score-label {
	display: flex;
	justify-content: space-between;
	font-size: 0.88rem;
	margin-bottom: 4px;
}

.mkb-score-track {
	height: 8px;
	background: #f3eef6;
	border-radius: 999px;
	overflow: hidden;
}

.mkb-score-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--mkb-acc2), var(--mkb-acc));
	border-radius: 999px;
	transition: width 0.6s ease;
}

.mkb-related-grid,
.mkb-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.mkb-related-card,
.mkb-product-card {
	display: block;
	text-decoration: none;
	background: var(--mkb-soft);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--mkb-border);
	transition: transform 0.15s;
}

.mkb-related-card:hover,
.mkb-product-card:hover {
	transform: translateY(-3px);
}

.mkb-related-card img,
.mkb-product-card img {
	width: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	display: block;
}

.mkb-related-card span,
.mkb-product-card span {
	display: block;
	padding: 10px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--mkb-ink);
	line-height: 1.35;
}

.mkb-share-card-preview {
	text-align: center;
	margin-bottom: 16px;
}

.mkb-share-card-preview img {
	max-width: 220px;
	border-radius: 12px;
	box-shadow: var(--mkb-shadow);
}

.mkb-share-card-hint {
	font-size: 0.8rem;
	color: var(--mkb-muted);
	margin: 8px 0 0;
}

.mkb-feedback-thanks {
	font-size: 0.88rem;
	color: #3a9d5c;
	text-align: center;
	margin-top: 8px;
}

.mkb-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mkb-share-btn {
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	background: var(--mkb-soft);
	color: var(--mkb-acc2);
}

.mkb-share-btn--pin { background: #e60023; color: #fff; }
.mkb-share-btn--wa { background: #25d366; color: #fff; }
.mkb-share-btn--x { background: #000; color: #fff; }

.mkb-feedback {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--mkb-border);
	text-align: center;
}

.mkb-feedback p {
	font-size: 0.9rem;
	color: var(--mkb-muted);
	margin: 0 0 8px;
}

.mkb-feedback-stars {
	display: flex;
	justify-content: center;
	gap: 6px;
}

.mkb-star {
	background: none;
	border: none;
	font-size: 1.6rem;
	color: #ddd;
	cursor: pointer;
	padding: 0 2px;
	transition: color 0.15s, transform 0.15s;
}

.mkb-star:hover,
.mkb-star.is-active {
	color: #f5a623;
	transform: scale(1.15);
}

.mkb-cta {
	text-align: center;
	margin-top: 20px;
}

.mkb-ads-slot {
	margin: 16px 0;
	padding: 12px;
	background: #fafafa;
	border-radius: 10px;
	text-align: center;
}

.mkb-faq {
	margin-top: 40px;
}

.mkb-faq h3 {
	font-family: 'Playfair Display', Georgia, serif;
	margin-bottom: 16px;
}

.mkb-faq-item {
	background: #fff;
	border: 1px solid var(--mkb-border);
	border-radius: 12px;
	margin-bottom: 10px;
	padding: 0 18px;
}

.mkb-faq-item summary {
	cursor: pointer;
	font-weight: 600;
	padding: 14px 0;
	list-style: none;
}

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

.mkb-faq-item p {
	margin: 0 0 14px;
	color: var(--mkb-muted);
	font-size: 0.92rem;
}

/* Quota & history (Faz 3) */
.mkb-quota-banner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	background: var(--mkb-soft);
	border: 1px solid var(--mkb-border);
	border-radius: 12px;
	padding: 12px 18px;
	margin-bottom: 20px;
	font-size: 0.9rem;
}

.mkb-quota-banner--premium {
	background: linear-gradient(120deg, #fff7fb, #f3e9fa);
	border-color: #ecdcf0;
}

.mkb-quota-banner--guest {
	justify-content: space-between;
}

.mkb-quota-badge {
	background: linear-gradient(120deg, var(--mkb-acc2), var(--mkb-acc));
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.mkb-quota-bar {
	height: 6px;
	background: #efe7f3;
	border-radius: 999px;
	overflow: hidden;
	flex: 1;
	min-width: 80px;
	max-width: 140px;
}

.mkb-quota-bar--inline { max-width: 100px; }

.mkb-quota-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--mkb-acc2), var(--mkb-acc));
	border-radius: 999px;
}

.mkb-quota-link {
	margin-left: auto;
	font-weight: 600;
	color: var(--mkb-acc2);
	text-decoration: none;
}

.mkb-quota-link:hover { text-decoration: underline; }

.mkb-btn--sm {
	padding: 8px 14px;
	font-size: 0.82rem;
}

.mkb-report-download {
	margin: 20px 0;
	text-align: center;
}

.mkb-report-hint {
	font-size: 0.8rem;
	color: var(--mkb-muted);
	margin: 8px 0 0;
}

.mkb-history-wrap h2 {
	font-family: 'Playfair Display', Georgia, serif;
	margin: 0 0 16px;
}

.mkb-quota-card {
	background: var(--mkb-soft);
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 24px;
}

.mkb-quota-card--premium {
	background: linear-gradient(120deg, #fff7fb, #f3e9fa);
}

.mkb-quota-warn {
	color: #a23b3b;
	font-size: 0.88rem;
	margin: 8px 0 0;
}

.mkb-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.mkb-history-card {
	background: #fff;
	border: 1px solid var(--mkb-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--mkb-shadow);
}

.mkb-history-card__img img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	display: block;
}

.mkb-history-card__body {
	padding: 14px 16px 16px;
}

.mkb-history-card__score {
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--mkb-acc2);
	line-height: 1;
}

.mkb-history-card__score small {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mkb-muted);
}

.mkb-history-card__meta {
	font-size: 0.85rem;
	color: var(--mkb-muted);
	margin: 6px 0;
}

.mkb-history-card__body time {
	font-size: 0.78rem;
	color: var(--mkb-muted);
}

.mkb-history-card__actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.mkb-history-empty,
.mkb-history-login {
	text-align: center;
	padding: 40px 20px;
}

.mkb-history-login p {
	margin-bottom: 16px;
	color: var(--mkb-muted);
}

/* Faz 4 */
.mkb-palette-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
}

.mkb-palette-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mkb-soft);
	border-radius: 10px;
	padding: 10px 12px;
	border: 1px solid var(--mkb-border);
}

.mkb-palette-swatch {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,.08);
	flex-shrink: 0;
}

.mkb-palette-info {
	display: flex;
	flex-direction: column;
	font-size: 0.82rem;
	line-height: 1.35;
}

.mkb-season-box {
	background: var(--mkb-soft);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 12px;
}

.mkb-tag--trend {
	background: linear-gradient(120deg, #fff7fb, #f3e9fa);
}

.mkb-body-guide__ai {
	background: var(--mkb-soft);
	border-left: 4px solid var(--mkb-acc);
	padding: 12px 16px;
	border-radius: 0 10px 10px 0;
	margin-bottom: 12px;
	font-size: 0.92rem;
}

.mkb-history-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.mkb-compare-selects {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.mkb-compare-selects .mkb-field { flex: 1; min-width: 200px; }

.mkb-compare-vs {
	font-weight: 800;
	color: var(--mkb-acc2);
	font-size: 1.2rem;
	padding-bottom: 10px;
}

.mkb-compare-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 24px 0;
}

@media (max-width: 600px) {
	.mkb-compare-cards { grid-template-columns: 1fr; }
}

.mkb-compare-card {
	background: #fff;
	border: 1px solid var(--mkb-border);
	border-radius: 14px;
	overflow: hidden;
	text-align: center;
	padding-bottom: 16px;
	box-shadow: var(--mkb-shadow);
}

.mkb-compare-card img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
}

.mkb-compare-better { background: #f0fff4; font-weight: 700; color: #2d6a3e; }

.mkb-compare-table {
	width: 100%;
	border-collapse: collapse;
}

.mkb-compare-table th,
.mkb-compare-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mkb-border);
}

/* Demo mode */
.mkb-demo-notice,
.mkb-demo-badge {
	background: #fef6e4;
	border: 1px solid #e8c547;
	color: #6b5200;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 0.9rem;
	margin-bottom: 16px;
}

.mkb-demo-badge {
	margin-bottom: 12px;
	text-align: center;
	font-weight: 600;
}

/* Virtual Try-On teaser (Faz 5) */
.mkb-tryon-teaser {
	position: relative;
	background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
	border: 1px dashed var(--mkb-acc2);
	border-radius: 14px;
	padding: 24px;
	text-align: center;
	margin: 24px 0;
}

.mkb-tryon-teaser__badge {
	display: inline-block;
	background: var(--mkb-acc2);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 10px;
}

.mkb-tryon-teaser h4 {
	margin: 0 0 8px;
	color: var(--mkb-acc2);
	font-size: 1.1rem;
}

.mkb-tryon-teaser p {
	margin: 0;
	color: var(--mkb-muted);
	font-size: 0.95rem;
}