/* =============================================================
   KiaCTA Generator – Public CSS
   Standar WARNA CERAH: semua card/grid pakai warna terang
   ============================================================= */

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

/* ---- ROOT VARIABLES ---- */
#kiacgen-app {
	--kg-primary:    #FF6B35;
	--kg-primary-d:  #E85520;
	--kg-accent:     #FFB703;
	--kg-green:      #2DC653;
	--kg-blue:       #0077B6;
	--kg-purple:     #7B2FBE;
	--kg-bg:         #F8F9FC;
	--kg-surface:    #FFFFFF;
	--kg-border:     #E8ECF2;
	--kg-text:       #1A1A2E;
	--kg-muted:      #6B7280;
	--kg-radius:     14px;
	--kg-shadow:     0 4px 20px rgba(0,0,0,0.08);
	--kg-shadow-lg:  0 8px 40px rgba(0,0,0,0.14);
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---- RESET SCOPED ---- */
#kiacgen-app * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
#kiacgen-app a { text-decoration: none; }
#kiacgen-app button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ============================================================
   HERO
   ============================================================ */
.kiacgen-hero {
	background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
	border-radius: 20px;
	padding: 48px 32px 40px;
	text-align: center;
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}
.kiacgen-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 0%, rgba(255,107,53,0.25) 0%, transparent 60%),
	            radial-gradient(ellipse at 80% 100%, rgba(0,119,182,0.2) 0%, transparent 50%);
}
.kiacgen-hero > * { position: relative; z-index: 1; }

.kiacgen-hero__badge {
	display: inline-block;
	background: linear-gradient(90deg, #FF6B35, #FFB703);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	padding: 5px 14px;
	border-radius: 100px;
	margin-bottom: 16px;
	text-transform: uppercase;
}
.kiacgen-hero__title {
	font-size: clamp(26px, 5vw, 42px);
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.15;
	margin-bottom: 12px;
	letter-spacing: -0.02em;
}
.kiacgen-hero__sub {
	font-size: 15px;
	color: rgba(255,255,255,0.72);
	line-height: 1.6;
	max-width: 480px;
	margin: 0 auto 20px;
}
.kiacgen-member-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 100px;
	padding: 8px 8px 8px 16px;
	backdrop-filter: blur(8px);
	flex-wrap: wrap;
	justify-content: center;
}
.kiacgen-member-cta__text {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
}
.kiacgen-member-cta__btn {
	background: linear-gradient(90deg, #FF6B35, #FFB703);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 18px;
	border-radius: 100px;
	transition: opacity 0.2s;
}
.kiacgen-member-cta__btn:hover { opacity: 0.88; }

/* ============================================================
   LAYOUT 2 KOLOM
   ============================================================ */
.kiacgen-layout {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 24px;
	align-items: start;
}
@media (max-width: 900px) {
	.kiacgen-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   PANEL
   ============================================================ */
.kiacgen-panel--editor {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.kiacgen-panel--output {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 80px;
}

/* ============================================================
   STEP CARDS – WARNA CERAH per step
   ============================================================ */
.kiacgen-step {
	background: var(--kg-surface);
	border: 1px solid var(--kg-border);
	border-radius: var(--kg-radius);
	overflow: hidden;
	box-shadow: var(--kg-shadow);
}
.kiacgen-step__head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.01em;
}
/* Step 1 – Orange */
.kiacgen-step:nth-child(1) .kiacgen-step__head {
	background: linear-gradient(90deg, #FF6B35, #FF8C42);
}
/* Step 2 – Blue */
.kiacgen-step:nth-child(2) .kiacgen-step__head {
	background: linear-gradient(90deg, #0077B6, #00B4D8);
}
/* Step 3 – Green */
.kiacgen-step:nth-child(3) .kiacgen-step__head {
	background: linear-gradient(90deg, #2DC653, #52D98A);
}
/* Step 4 – Purple */
.kiacgen-step:nth-child(4) .kiacgen-step__head {
	background: linear-gradient(90deg, #7B2FBE, #9D4EDD);
}

.kiacgen-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	background: rgba(255,255,255,0.25);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 800;
}
.kiacgen-step__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* ============================================================
   FIELDS
   ============================================================ */
.kiacgen-field { display: flex; flex-direction: column; gap: 6px; }
.kiacgen-field label, .kiacgen-field-label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kg-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.kiacgen-optional { font-weight: 400; color: #aaa; font-style: italic; }
.kiacgen-input {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--kg-border);
	border-radius: 8px;
	font-size: 14px;
	font-family: inherit;
	color: var(--kg-text);
	background: #FAFBFE;
	transition: border-color 0.2s, box-shadow 0.2s;
	outline: none;
}
.kiacgen-input:focus {
	border-color: var(--kg-primary);
	box-shadow: 0 0 0 3px rgba(255,107,53,0.12);
	background: #fff;
}
.kiacgen-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kiacgen-checkboxes { display: flex; gap: 20px; flex-wrap: wrap; }
.kiacgen-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--kg-text);
	cursor: pointer;
}
.kiacgen-check input { accent-color: var(--kg-primary); width: 15px; height: 15px; }

/* ============================================================
   RANGE SLIDER
   ============================================================ */
.kiacgen-range {
	width: 100%;
	accent-color: var(--kg-primary);
	height: 4px;
	cursor: pointer;
}
.kiacgen-range-hints {
	display: flex;
	justify-content: space-between;
	font-size: 10.5px;
	color: #bbb;
	margin-top: 2px;
}

/* ============================================================
   PRESET BUTTONS – WARNA CERAH
   ============================================================ */
.kiacgen-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	position: relative;
}
.kiacgen-preset-btn {
	padding: 7px 14px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	transition: transform 0.15s, box-shadow 0.15s;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
	border: 2px solid transparent;
}
.kiacgen-preset-btn:hover:not(.disabled) {
	transform: scale(1.06);
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.kiacgen-preset-btn.active {
	border-color: #fff;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
	transform: scale(1.06);
}
.kiacgen-preset-btn.disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); }
.kiacgen-presets--premium { margin-top: 4px; }

.kiacgen-lock-badge {
	font-size: 10.5px;
	background: linear-gradient(90deg, #FF6B35, #FFB703);
	color: #fff;
	padding: 2px 8px;
	border-radius: 100px;
	font-weight: 700;
}
.kiacgen-locked { opacity: 0.7; pointer-events: none; }
.kiacgen-lock-overlay {
	position: absolute;
	inset: 0;
	background: rgba(248,249,252,0.85);
	backdrop-filter: blur(3px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kg-text);
}
.kiacgen-lock-overlay a {
	background: linear-gradient(90deg, #FF6B35, #FFB703);
	color: #fff;
	padding: 6px 16px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
}

/* ============================================================
   COLOR PICKERS
   ============================================================ */
.kiacgen-colors-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 600px) { .kiacgen-colors-grid { grid-template-columns: 1fr 1fr; } }
.kiacgen-color-wrap { display: flex; align-items: center; gap: 6px; }
.kiacgen-color-input {
	width: 38px; height: 38px;
	border: none; padding: 2px;
	border-radius: 8px;
	cursor: pointer;
	background: none;
	flex-shrink: 0;
}
.kiacgen-hex-input { font-size: 12px !important; padding: 8px 8px !important; font-family: monospace !important; }

/* ============================================================
   ANIMASI GRID – WARNA CERAH per card
   ============================================================ */
.kiacgen-anim-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
}
.kiacgen-anim-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 6px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	color: #444;
	background: #F0F4FF;
	border: 2px solid transparent;
	transition: all 0.2s;
	position: relative;
}
.kiacgen-anim-btn:hover:not(:disabled):not(.kiacgen-anim-locked) {
	background: #E0EAFF;
	border-color: var(--kg-primary);
	color: var(--kg-primary);
}
.kiacgen-anim-btn.active {
	background: linear-gradient(135deg, #FF6B35, #FFB703);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 12px rgba(255,107,53,0.35);
}
.kiacgen-anim-emoji { font-size: 20px; }
.kiacgen-anim-locked { opacity: 0.5; cursor: not-allowed; }
.kiacgen-anim-lock {
	position: absolute;
	top: 4px; right: 4px;
	font-size: 9px;
}
.kiacgen-upgrade-hint {
	font-size: 12.5px;
	color: var(--kg-muted);
	margin-top: 8px;
	padding: 10px 12px;
	background: #FFF8F5;
	border-radius: 8px;
	border-left: 3px solid var(--kg-primary);
}
.kiacgen-upgrade-hint a { color: var(--kg-primary); font-weight: 700; }

/* ============================================================
   PREVIEW CARD – BRIGHT GRADIENT
   ============================================================ */
.kiacgen-preview-card {
	background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
	border-radius: var(--kg-radius);
	padding: 20px;
	box-shadow: var(--kg-shadow-lg);
}
.kiacgen-preview-card__label {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.7);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 14px;
}
.kiacgen-preview-stage {
	min-height: 130px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: background 0.3s;
	padding: 20px;
	background: #ffffff;
}
/* Preview button styles – diatur via JS inline */
#kg-preview-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.25s ease;
	line-height: 1.3;
}
.kg-preview-subtext {
	font-size: 12px;
	color: #888;
	font-style: italic;
	text-align: center;
}
.kiacgen-preview-bg-toggle {
	display: flex;
	gap: 6px;
	margin-top: 12px;
}
.kg-bg-toggle {
	flex: 1;
	padding: 5px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.85);
	border: 1px solid rgba(255,255,255,0.2);
	transition: background 0.2s;
}
.kg-bg-toggle.active, .kg-bg-toggle:hover {
	background: rgba(255,255,255,0.3);
	color: #fff;
}

/* ============================================================
   GENERATE BUTTON
   ============================================================ */
.kiacgen-generate-btn {
	width: 100%;
	padding: 15px;
	background: linear-gradient(90deg, #FF6B35 0%, #FFB703 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	border-radius: 12px;
	border: none;
	box-shadow: 0 6px 20px rgba(255,107,53,0.4);
	transition: transform 0.15s, box-shadow 0.15s;
	letter-spacing: 0.01em;
}
.kiacgen-generate-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(255,107,53,0.5);
}
.kiacgen-generate-btn:active { transform: translateY(0); }

/* ============================================================
   OUTPUT CODE BOX
   ============================================================ */
.kiacgen-output {
	background: var(--kg-surface);
	border: 1px solid var(--kg-border);
	border-radius: var(--kg-radius);
	overflow: hidden;
	box-shadow: var(--kg-shadow);
}
.kiacgen-output__tabs {
	display: flex;
	background: #F0F4FF;
	border-bottom: 1px solid var(--kg-border);
}
.kiacgen-tab {
	flex: 1;
	padding: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--kg-muted);
	background: none;
	border-bottom: 2px solid transparent;
	transition: all 0.2s;
}
.kiacgen-tab.active {
	color: var(--kg-primary);
	border-bottom-color: var(--kg-primary);
	background: #fff;
}
.kiacgen-output__box { padding: 16px; position: relative; }
.kiacgen-output__actions {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
.kiacgen-copy-btn {
	flex: 1;
	padding: 9px;
	background: linear-gradient(90deg, #2DC653, #52D98A);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 8px;
	transition: opacity 0.2s;
}
.kiacgen-copy-btn:hover { opacity: 0.88; }
.kiacgen-download-btn {
	padding: 9px 14px;
	background: linear-gradient(90deg, #0077B6, #00B4D8);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	border-radius: 8px;
	transition: opacity 0.2s;
}
.kiacgen-download-btn:hover { opacity: 0.88; }
.kiacgen-code {
	background: #1A1A2E;
	color: #E2E8F0;
	padding: 14px;
	border-radius: 8px;
	font-size: 11.5px;
	line-height: 1.6;
	max-height: 320px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-all;
	font-family: 'Fira Code', 'Courier New', monospace;
}
.kiacgen-output__info {
	padding: 10px 16px;
	background: #F0FFF4;
	border-top: 1px solid #C6F6D5;
	font-size: 12px;
	color: #276749;
	font-weight: 500;
}

/* ============================================================
   UPGRADE CARD – BRIGHT GRADIENT
   ============================================================ */
.kiacgen-upgrade-card {
	background: linear-gradient(135deg, #FFF8F5 0%, #FFF3E0 100%);
	border: 2px solid #FFE0CC;
	border-radius: var(--kg-radius);
	padding: 24px 20px;
	text-align: center;
}
.kiacgen-upgrade-card__icon { font-size: 36px; margin-bottom: 10px; }
.kiacgen-upgrade-card h3 {
	font-size: 16px;
	font-weight: 800;
	color: var(--kg-text);
	margin-bottom: 14px;
}
.kiacgen-upgrade-card ul {
	list-style: none;
	text-align: left;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.kiacgen-upgrade-card li {
	font-size: 13px;
	color: #444;
	font-weight: 500;
}
.kiacgen-upgrade-card__btn {
	display: block;
	background: linear-gradient(90deg, #FF6B35, #FFB703);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	padding: 12px;
	border-radius: 10px;
	transition: opacity 0.2s, transform 0.15s;
}
.kiacgen-upgrade-card__btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ============================================================
   ANIMASI CSS untuk preview
   ============================================================ */
@keyframes kg-pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes kg-bounce   { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-10px)} }
@keyframes kg-shake    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
@keyframes kg-wobble   { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg)} 50%{transform:rotate(4deg)} 80%{transform:rotate(-2deg)} }
@keyframes kg-tada     { 0%{transform:scale(1)} 20%{transform:scale(0.9) rotate(-3deg)} 50%,80%{transform:scale(1.1) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes kg-heartbeat{ 0%,100%{transform:scale(1)} 14%{transform:scale(1.12)} 28%{transform:scale(1)} 42%{transform:scale(1.08)} }
@keyframes kg-flash    { 0%,100%{opacity:1} 50%{opacity:0.25} }
@keyframes kg-swing    { 0%,100%{transform:rotate(0)} 20%{transform:rotate(8deg)} 60%{transform:rotate(-5deg)} }
@keyframes kg-rubber   { 0%,100%{transform:scale3d(1,1,1)} 30%{transform:scale3d(1.22,.78,1)} 50%{transform:scale3d(.95,1.12,1)} 75%{transform:scale3d(1.04,.96,1)} }
@keyframes kg-glow     { 0%,100%{box-shadow:0 0 8px rgba(255,255,255,.3)} 50%{box-shadow:0 0 28px rgba(255,255,255,.7)} }
@keyframes kg-slideup  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

.kg-anim-pulse      { animation: kg-pulse 2s ease-in-out infinite; }
.kg-anim-bounce     { animation: kg-bounce 1.6s ease infinite; }
.kg-anim-shake      { animation: kg-shake 0.9s ease-in-out infinite; }
.kg-anim-wobble     { animation: kg-wobble 1.5s ease-in-out infinite; }
.kg-anim-tada       { animation: kg-tada 1.8s ease infinite; }
.kg-anim-heartbeat  { animation: kg-heartbeat 1.3s ease-in-out infinite; }
.kg-anim-flash      { animation: kg-flash 1.5s linear infinite; }
.kg-anim-swing      { animation: kg-swing 1.5s ease-in-out infinite; }
.kg-anim-rubber_band{ animation: kg-rubber 1.6s ease infinite; }
.kg-anim-glow       { animation: kg-glow 2s ease-in-out infinite; }
.kg-anim-slide_up   { animation: kg-slideup 0.7s ease both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
	.kiacgen-hero { padding: 32px 20px; }
	.kiacgen-two-col { grid-template-columns: 1fr; }
	.kiacgen-colors-grid { grid-template-columns: 1fr 1fr; }
	.kiacgen-anim-grid { grid-template-columns: repeat(3, 1fr); }
	.kiacgen-panel--output { position: static; }
}