/* =========================================================
   Kadın Aktüel - İnteraktif Araçlar
   Marka rengi: #f88c00 (sitenin theme-color'ı ile aynı)
   Mobil öncelikli, framework yok, ~ hafif ve hızlı.
========================================================= */

:root{
	--ka-orange: #f88c00;
	--ka-orange-dark: #d9720a;
	--ka-orange-light: #fff3e0;
	--ka-pink: #ff6f91;
	--ka-text: #2b2b2b;
	--ka-muted: #6b6b6b;
	--ka-border: #f0d9b5;
	--ka-radius: 16px;
	--ka-shadow: 0 6px 18px rgba(248,140,0,0.12);
}

.ka-wrap *{ box-sizing: border-box; }

.ka-wrap{
	max-width: 900px;
	margin: 30px auto;
	padding: 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--ka-text);
}

.ka-wrap h1, .ka-wrap h2, .ka-wrap h3{
	color: var(--ka-orange-dark);
	line-height: 1.3;
}

/* ---------- GRID (ana araçlar sayfası) ---------- */
.ka-grid-intro{
	text-align:center;
	margin-bottom: 28px;
}
.ka-grid-intro h1{ font-size: 1.7rem; margin-bottom:8px; }
.ka-grid-intro p{ color: var(--ka-muted); font-size:1rem; }

.ka-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 640px){
	.ka-grid{ grid-template-columns: repeat(4, 1fr); }
}

.ka-box{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:#fff;
	border:2px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 20px 12px;
	text-decoration:none;
	color: var(--ka-text);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	box-shadow: var(--ka-shadow);
	min-height: 140px;
}
.ka-box:hover, .ka-box:focus{
	transform: translateY(-4px);
	border-color: var(--ka-orange);
	box-shadow: 0 10px 24px rgba(248,140,0,0.22);
	color: var(--ka-orange-dark);
}
.ka-box .ka-box-emoji{ font-size: 2.2rem; margin-bottom:8px; display:block; }
.ka-box .ka-box-title{ font-weight:700; font-size:.95rem; }
.ka-box .ka-box-sub{ font-size:.78rem; color: var(--ka-muted); margin-top:4px; }
.ka-box .ka-box-badge{
	display:inline-block; margin-top:8px; font-size:.68rem; font-weight:700;
	background: var(--ka-orange-light); color: var(--ka-orange-dark);
	padding: 3px 10px; border-radius: 999px;
}

/* ---------- ARAÇ KARTI (tekil araç sayfaları) ---------- */
.ka-card{
	background:#fff;
	border: 1px solid var(--ka-border);
	border-radius: var(--ka-radius);
	padding: 22px 18px;
	box-shadow: var(--ka-shadow);
	margin-bottom: 22px;
}
.ka-card h2{ margin-top:0; font-size:1.35rem; }
.ka-card p.ka-desc{ color: var(--ka-muted); margin-top:-6px; }

.ka-btn{
	display:inline-block;
	background: var(--ka-orange);
	color:#fff !important;
	border:none;
	border-radius: 999px;
	padding: 12px 28px;
	font-weight:700;
	font-size: 1rem;
	cursor:pointer;
	text-decoration:none;
	transition: background .15s ease, transform .1s ease;
}
.ka-btn:hover{ background: var(--ka-orange-dark); transform: translateY(-1px); }
.ka-btn:disabled{ opacity:.5; cursor:not-allowed; }
.ka-btn-outline{
	background:#fff; color: var(--ka-orange-dark) !important; border:2px solid var(--ka-orange);
}
.ka-btn-outline:hover{ background: var(--ka-orange-light); }
.ka-btn-block{ display:block; width:100%; text-align:center; }

.ka-field{ margin-bottom: 16px; }
.ka-field label{ display:block; font-weight:600; margin-bottom:6px; font-size:.92rem; }
.ka-field select, .ka-field input[type=date], .ka-field input[type=number], .ka-field input[type=text]{
	width:100%; padding: 12px 14px; border:1px solid #ddd; border-radius:10px; font-size:1rem; background:#fff;
}
.ka-field select:focus, .ka-field input:focus{ outline:none; border-color: var(--ka-orange); }

.ka-row{ display:flex; gap:12px; flex-wrap:wrap; }
.ka-row .ka-field{ flex:1 1 200px; }

/* ---------- QUIZ SORULARI ---------- */
.ka-quiz-progress{
	height:6px; background:#f1e3c8; border-radius:999px; margin-bottom:18px; overflow:hidden;
}
.ka-quiz-progress-bar{ height:100%; background: var(--ka-orange); width:0%; transition: width .25s ease; }

.ka-question{ display:none; }
.ka-question.active{ display:block; animation: kaFade .25s ease; }
@keyframes kaFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.ka-question h3{ font-size:1.1rem; margin-bottom:14px; }
.ka-options{ display:flex; flex-direction:column; gap:10px; }
.ka-option{
	display:block; width:100%; text-align:left; background:#fff8ef;
	border:2px solid var(--ka-border); border-radius:12px; padding:13px 16px;
	font-size:.98rem; cursor:pointer; transition: all .12s ease;
}
.ka-option:hover{ border-color: var(--ka-orange); background: var(--ka-orange-light); }
.ka-option.selected{ border-color: var(--ka-orange); background: var(--ka-orange); color:#fff; font-weight:600; }

.ka-nav-buttons{ display:flex; justify-content:space-between; margin-top:18px; }

/* ---------- SONUÇ EKRANI ---------- */
.ka-result{ display:none; text-align:center; }
.ka-result.active{ display:block; animation: kaFade .3s ease; }
.ka-result-emoji{ font-size:3.2rem; }
.ka-result-title{ font-size:1.4rem; color: var(--ka-orange-dark); font-weight:800; margin: 6px 0 10px; }
.ka-result-text{ font-size:1rem; color: var(--ka-text); line-height:1.6; text-align:left; background:#fff8ef; border-radius:12px; padding:16px; }

.ka-share-row{ display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.ka-share-btn{
	display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
	font-size:.85rem; font-weight:600; text-decoration:none; color:#fff;
}
.ka-share-wa{ background:#25D366; }
.ka-share-tw{ background:#111827; }
.ka-share-pin{ background:#E60023; }

/* ---------- E-POSTA FORMU (rapor al) ---------- */
.ka-email-box{
	margin-top:22px; padding-top:20px; border-top:2px dashed var(--ka-border);
}
.ka-email-box h4{ margin-bottom:4px; }
.ka-email-box p.ka-desc{ margin-top:0; margin-bottom:14px; }
.ka-email-form{ display:flex; gap:10px; flex-wrap:wrap; }
.ka-email-form input[type=email]{
	flex:1 1 220px; padding:12px 14px; border:1px solid #ddd; border-radius:10px; font-size:1rem;
}
.ka-kvkk{ display:flex; align-items:flex-start; gap:8px; margin:12px 0; font-size:.82rem; color: var(--ka-muted); }
.ka-kvkk input{ margin-top:3px; }
.ka-hp{ position:absolute; left:-9999px; top:-9999px; } /* honeypot -- botlara görünür, insana görünmez */

.ka-form-msg{ margin-top:10px; font-size:.9rem; font-weight:600; }
.ka-form-msg.ok{ color:#1a8a3d; }
.ka-form-msg.err{ color:#c0392b; }

.ka-disclaimer{ font-size:.78rem; color:#999; margin-top:16px; text-align:center; }

.ka-restart{ text-align:center; margin-top:14px; }