/* ============================================================
   COP31 FİKİR MARATONU — KABUK
   Sayfa iskeleti, adım göstergesi, bilgilendirme kolonu,
   paneller, butonlar, popup ve bildirimler.
   Renk/tipografi temeli site genelinden (page/style.css) gelir.
   ============================================================ */

:root {
	color-scheme: dark;

	/* Zemin, anasayfadaki --bg-deep ile birebir aynıdır. Yüzey basamakları
	   bu zeminden anasayfanın mavisine (#0099ff) doğru türetilir; böylece
	   anasayfa ile COP31 arasında geçerken renk sıçraması olmaz. */
	--ide-bg-base: #000b18;
	--ide-bg-deep: #030f1f;
	--ide-surface: #06162d;
	--ide-surface-2: #091e3d;
	--ide-surface-3: #0c2549;
	--ide-surface-4: #0f2c55;
	--ide-line: rgba(255, 255, 255, 0.11);
	--ide-line-strong: rgba(255, 255, 255, 0.22);

	--ide-text: #f2f6fb;
	--ide-text-soft: #c6d4e4;
	--ide-text-dim: #93a6bd;

	--ide-accent: #ffa233;
	--ide-accent-deep: #f7941d;
	--ide-accent-soft: rgba(255, 162, 51, 0.13);
	--ide-accent-line: rgba(255, 162, 51, 0.42);

	--ide-ok: #3ddc97;
	--ide-err: #ff7a7a;

	--ide-r-sm: 10px;
	--ide-r-md: 14px;
	--ide-r-lg: 20px;
	--ide-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ide-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- ARKA PLAN ----------
   Anasayfadaki ambient katmanın (.orb-1/2/3) aynısı: düz #000b18 zemin
   üzerinde iki mavi ve bir zümrüt küre. Anasayfadaki gibi animasyonlu
   blur(60px) katmanlar kullanılmaz — 70vw'lik blur katmanları + sticky
   backdrop-filter scroll sırasında sürekli yeniden boyama tetikliyordu.
   Kürelerin konumu, boyutu ve rengi korunup statik gradyana çevrildi;
   kompozisyon maliyeti sıfıra yakın. */
.ide-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		/* orb-1: 70vw, sol üst */
		radial-gradient(70vw 70vw at 25% 30%, rgba(0, 153, 255, 0.22), transparent 62%),
		/* orb-2: 60vw, sağ alt */
		radial-gradient(60vw 60vw at 80% 62%, rgba(0, 153, 255, 0.17), transparent 62%),
		/* orb-3: 50vw, orta alt */
		radial-gradient(50vw 50vw at 65% 72%, rgba(6, 78, 59, 0.26), transparent 64%),
		var(--ide-bg-base);
}

/* Navbar: anasayfadaki yumuşak gradyanla aynı başlar. Scroll'da okunurluk
   için aynı renk ailesinden opak zemine geçer (blur yerine düz renk —
   scroll performansı). */
.modern-nav {
	background: linear-gradient(to bottom, rgba(0, 11, 24, 0.6) 30%, transparent);
}

.modern-nav.scrolled {
	background: rgba(0, 11, 24, 0.94);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ---------- HERO ---------- */
.ide-hero {
	padding-bottom: 8px;
}

.ide-hero-sub {
	max-width: 620px;
	color: var(--ide-text-soft);
	font-size: 1rem;
	line-height: 1.65;
	animation: ide-rise 0.7s var(--ide-ease) 0.25s both;
}

/* ---------- ADIM GÖSTERGESİ ---------- */
.ide-stepper-wrap {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 18px 40px 6px;
}

.ide-stepper {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 20px 20px 16px;
	background: rgba(6, 22, 45, 0.9);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-lg);
}

/* Bağlayıcı çizgi: her adımın kendi sütununda, önceki dairenin sağ
   kenarından bu dairenin sol kenarına kadar. Dairelerin içinden geçmez. */
.ide-step::before,
.ide-step::after {
	content: "";
	position: absolute;
	top: 18px;
	left: calc(-50% + 26px);
	right: calc(50% + 26px);
	height: 2px;
	border-radius: 2px;
}

.ide-step::before {
	background: rgba(255, 255, 255, 0.13);
}

.ide-step::after {
	background: linear-gradient(90deg, var(--ide-accent-deep), var(--ide-accent));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--ide-ease);
}

.ide-step:first-child::before,
.ide-step:first-child::after {
	display: none;
}

.ide-step.is-done::after,
.ide-step.is-current::after {
	transform: scaleX(1);
}

.ide-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 0 6px;
	background: transparent;
	border: 0;
	color: var(--ide-text-dim);
	text-align: center;
	cursor: pointer;
	transition: color 0.3s var(--ide-ease-soft);
	font-family: inherit;
}

.ide-step:disabled {
	cursor: default;
	opacity: 0.5;
}

.ide-step:not(:disabled):hover {
	color: var(--ide-text);
}

.ide-step:not(:disabled):hover .ide-step-dot {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.34);
}

.ide-step-dot {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ide-surface-2);
	border: 2px solid rgba(255, 255, 255, 0.16);
	font-weight: 800;
	font-size: 13.5px;
	transition: border-color 0.35s var(--ide-ease), background 0.35s var(--ide-ease),
		box-shadow 0.35s var(--ide-ease), transform 0.35s var(--ide-ease);
}

.ide-step-check {
	position: absolute;
	opacity: 0;
	transform: scale(0.4);
	color: #06121f;
	transition: opacity 0.3s var(--ide-ease), transform 0.4s var(--ide-ease);
}

.ide-step.is-current .ide-step-dot {
	border-color: var(--ide-accent);
	color: var(--ide-accent);
	background: rgba(255, 162, 51, 0.12);
	box-shadow: 0 0 0 5px rgba(255, 162, 51, 0.12), 0 0 22px rgba(255, 162, 51, 0.35);
	transform: scale(1.06);
}

.ide-step.is-done .ide-step-dot {
	background: linear-gradient(140deg, var(--ide-accent), var(--ide-accent-deep));
	border-color: transparent;
}

.ide-step.is-done .ide-step-num {
	opacity: 0;
	transform: scale(0.4);
}

.ide-step.is-done .ide-step-check {
	opacity: 1;
	transform: scale(1);
}

.ide-step-num {
	transition: opacity 0.25s var(--ide-ease), transform 0.3s var(--ide-ease);
}

.ide-step-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.1px;
	line-height: 1.3;
}

.ide-step-label em {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-step.is-current .ide-step-label {
	color: var(--ide-text);
}

.ide-step.is-current .ide-step-label em {
	color: var(--ide-accent);
}

/* ---------- KABUK ----------
   Ölçüler site genelindeki .content-grid ile birebir aynı:
   max-width 1440, yatay padding 40, 280px kenar sütunu, 80px boşluk. */
.ide-shell {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px 40px 110px;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

/* ---------- SOL KOLON ---------- */
.ide-aside {
	position: sticky;
	top: 118px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ide-aside-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ide-aside-kicker {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ide-accent);
}

.ide-aside-title {
	font-size: 1.32rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--ide-text);
}

.ide-aside-lead {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--ide-text-dim);
}

/* Bilgilendirme kutuları (popup açar) */
.ide-cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ide-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 15px 16px;
	background: var(--ide-surface);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	animation: ide-rise 0.6s var(--ide-ease) both;
	animation-delay: var(--d, 0ms);
	transition: border-color 0.3s var(--ide-ease-soft), background 0.3s var(--ide-ease-soft),
		transform 0.4s var(--ide-ease), box-shadow 0.4s var(--ide-ease);
}

.ide-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--ide-accent), var(--ide-accent-deep));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s var(--ide-ease);
}

.ide-card:hover,
.ide-card:focus-visible {
	background: var(--ide-surface-2);
	border-color: var(--ide-accent-line);
	transform: translateX(4px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
	outline: none;
}

.ide-card:hover::before,
.ide-card:focus-visible::before {
	transform: scaleY(1);
}

.ide-card:active {
	transform: translateX(4px) scale(0.985);
}

.ide-card-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--ide-accent-soft);
	border: 1px solid rgba(255, 162, 51, 0.22);
	color: var(--ide-accent);
	transition: transform 0.45s var(--ide-ease);
}

.ide-card-icon svg {
	width: 18px;
	height: 18px;
}

.ide-card:hover .ide-card-icon {
	transform: rotate(-6deg) scale(1.06);
}

.ide-card-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.ide-card-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ide-text);
}

.ide-card-sum {
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--ide-text-dim);
}

.ide-card-arrow {
	flex: 0 0 auto;
	color: var(--ide-text-dim);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.3s var(--ide-ease), transform 0.4s var(--ide-ease), color 0.3s;
}

.ide-card:hover .ide-card-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--ide-accent);
}

/* Adım içi bilgilendirme paragrafları */
.ide-notes {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-left: 16px;
	border-left: 1px solid var(--ide-line);
}

.ide-note-block {
	position: relative;
	animation: ide-rise 0.6s var(--ide-ease) both;
	animation-delay: var(--d, 0ms);
}

.ide-note-block::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ide-accent);
	box-shadow: 0 0 0 4px rgba(255, 162, 51, 0.13);
}

.ide-note-block h3 {
	font-size: 0.88rem;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: var(--ide-text);
	margin-bottom: 6px;
}

.ide-note-block p {
	font-size: 0.83rem;
	line-height: 1.7;
	color: var(--ide-text-dim);
}

.ide-note-block strong {
	color: var(--ide-text-soft);
	font-weight: 700;
}

/* ---------- SAĞ KOLON: PANELLER ---------- */
.ide-main {
	min-width: 0;
}

.ide-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ide-panel {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-lg);
	padding: 26px 28px 28px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.ide-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
}

.ide-kicker {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--ide-accent);
	margin-bottom: 7px;
}

.ide-panel-title {
	font-size: 1.18rem;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: var(--ide-text);
}

.ide-panel-text {
	margin-top: 7px;
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--ide-text-dim);
	max-width: 62ch;
}

.ide-count {
	flex: 0 0 auto;
	padding: 6px 13px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: var(--ide-text-soft);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ide-line);
	border-radius: 100px;
	font-variant-numeric: tabular-nums;
}

/* ---------- GİRİŞ EKRANI CTA ---------- */
.ide-cta-panel {
	position: relative;
	overflow: hidden;
}

.ide-cta-panel::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 162, 51, 0.16), transparent 68%);
	pointer-events: none;
}

.ide-stats {
	display: flex;
	gap: 12px;
	margin: 26px 0 4px;
	flex-wrap: wrap;
}

.ide-stat {
	flex: 1 1 120px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: var(--ide-surface);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	transition: border-color 0.3s, transform 0.4s var(--ide-ease);
}

.ide-stat:hover {
	border-color: var(--ide-accent-line);
	transform: translateY(-3px);
}

.ide-stat strong {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--ide-accent);
	letter-spacing: -0.5px;
}

.ide-stat span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-resume-note {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	padding: 12px 15px;
	font-size: 0.83rem;
	color: var(--ide-text-soft);
	background: rgba(61, 220, 151, 0.08);
	border: 1px solid rgba(61, 220, 151, 0.26);
	border-radius: var(--ide-r-md);
}

.ide-resume-note svg {
	flex: 0 0 auto;
	color: var(--ide-ok);
}

.ide-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}

/* ---------- BUTONLAR ---------- */
.ide-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.1px;
	border-radius: 100px;
	border: 1px solid transparent;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.28s var(--ide-ease), box-shadow 0.35s var(--ide-ease),
		background 0.28s var(--ide-ease-soft), border-color 0.28s var(--ide-ease-soft),
		color 0.28s var(--ide-ease-soft);
}

.ide-btn svg {
	transition: transform 0.35s var(--ide-ease);
}

.ide-btn:active {
	transform: scale(0.96);
}

.ide-btn:focus-visible {
	outline: 2px solid var(--ide-accent);
	outline-offset: 3px;
}

.ide-btn-lg {
	padding: 15px 28px;
	font-size: 0.95rem;
}

.ide-btn-primary {
	background: linear-gradient(135deg, var(--ide-accent) 0%, var(--ide-accent-deep) 100%);
	color: #06121f;
	box-shadow: 0 10px 26px rgba(247, 148, 29, 0.28);
}

.ide-btn-primary:hover {
	box-shadow: 0 16px 38px rgba(247, 148, 29, 0.42);
	transform: translateY(-2px);
}

.ide-btn-primary:hover svg {
	transform: translateX(4px);
}

.ide-btn-ghost {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--ide-line-strong);
	color: var(--ide-text-soft);
}

.ide-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: var(--ide-line-strong);
	color: var(--ide-text);
	transform: translateY(-2px);
}

.ide-btn-ghost:hover svg {
	transform: translateX(-4px);
}

/* ---------- FORM ALT ÇUBUĞU ---------- */
.ide-form-foot {
	position: sticky;
	bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: var(--ide-bg-deep);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-lg);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.ide-foot-left,
.ide-foot-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ide-autosave {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ide-text-dim);
}

.ide-autosave-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ide-ok);
	box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5);
}

.ide-autosave.is-flash {
	animation: ide-savepulse 1.1s var(--ide-ease-soft);
}

.ide-autosave.is-flash .ide-autosave-dot {
	animation: ide-dotpulse 1.1s var(--ide-ease-soft);
}

/* ---------- BOŞ ADIM ---------- */
.ide-empty {
	text-align: center;
	padding: 56px 36px;
}

.ide-empty-icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--ide-accent-soft);
	border: 1px solid rgba(255, 162, 51, 0.24);
	color: var(--ide-accent);
}

.ide-empty-icon svg {
	width: 26px;
	height: 26px;
}

.ide-empty .ide-panel-text {
	margin-inline: auto;
}

.ide-empty .ide-cta-actions {
	justify-content: center;
}

/* ---------- POPUP ---------- */
body.ide-modal-open {
	overflow: hidden;
}

.ide-modal {
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: grid;
	place-items: center;
	padding: 24px;
}

.ide-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 11, 24, 0.9);
	opacity: 0;
	transition: opacity 0.28s var(--ide-ease-soft);
}

.ide-modal.is-open .ide-modal-overlay {
	opacity: 1;
}

.ide-modal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(720px, 100%);
	max-height: min(82vh, 760px);
	background: var(--ide-surface);
	border: 1px solid var(--ide-line-strong);
	border-radius: var(--ide-r-lg);
	box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: translateY(24px) scale(0.97);
	transition: opacity 0.3s var(--ide-ease), transform 0.42s var(--ide-ease);
}

.ide-modal.is-open .ide-modal-card {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.ide-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--ide-line);
}

.ide-modal-kicker {
	display: block;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--ide-accent);
	margin-bottom: 6px;
}

.ide-modal-title {
	font-size: 1.24rem;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: var(--ide-text);
}

.ide-modal-close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ide-line);
	border-radius: 10px;
	color: var(--ide-text-dim);
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.3s var(--ide-ease);
}

.ide-modal-close:hover {
	background: rgba(255, 122, 122, 0.14);
	border-color: rgba(255, 122, 122, 0.42);
	color: var(--ide-err);
	transform: rotate(90deg);
}

.ide-modal-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 24px;
	color: var(--ide-text-soft);
	font-size: 0.9rem;
	line-height: 1.75;
}

.ide-modal-body:focus {
	outline: none;
}

.ide-modal-body h3 {
	margin: 20px 0 8px;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--ide-text);
}

.ide-modal-body h3:first-child {
	margin-top: 0;
}

.ide-modal-body p {
	margin-bottom: 12px;
}

.ide-modal-body ul {
	margin: 0 0 14px;
	padding-left: 4px;
	list-style: none;
}

.ide-modal-body ul li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 7px;
}

.ide-modal-body ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ide-accent);
}

.ide-modal-body strong {
	color: var(--ide-text);
	font-weight: 700;
}

.ide-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 14px;
	font-size: 0.86rem;
}

.ide-table th,
.ide-table td {
	padding: 9px 12px;
	text-align: left;
	border-bottom: 1px solid var(--ide-line);
}

.ide-table th {
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-table td:last-child,
.ide-table th:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.ide-timeline {
	padding-left: 0 !important;
}

.ide-timeline li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0 10px 18px;
	border-bottom: 1px dashed var(--ide-line);
	margin-bottom: 0 !important;
}

.ide-timeline li em {
	font-style: normal;
	color: var(--ide-accent);
	font-weight: 700;
	white-space: nowrap;
}

.ide-note {
	font-size: 0.82rem;
	color: var(--ide-text-dim);
}

.ide-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 24px;
	border-top: 1px solid var(--ide-line);
}

.ide-modal-hint {
	font-size: 12px;
	color: var(--ide-text-dim);
}

.ide-modal-hint kbd {
	padding: 2px 6px;
	font-family: ui-monospace, monospace;
	font-size: 11px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--ide-line);
	border-radius: 5px;
}

.ide-modal-body::-webkit-scrollbar {
	width: 8px;
}

.ide-modal-body::-webkit-scrollbar-track {
	background: transparent;
}

.ide-modal-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 8px;
}

.ide-modal-body::-webkit-scrollbar-thumb:hover {
	background: var(--ide-accent-deep);
}

/* ---------- BİLDİRİM ---------- */
.ide-toast-wrap {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 9600;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.ide-toast {
	padding: 13px 18px;
	max-width: 340px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ide-text);
	background: var(--ide-surface-2);
	border: 1px solid var(--ide-line-strong);
	border-left: 3px solid var(--ide-accent);
	border-radius: var(--ide-r-md);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateX(28px);
	transition: opacity 0.3s var(--ide-ease), transform 0.4s var(--ide-ease);
}

.ide-toast.is-in {
	opacity: 1;
	transform: translateX(0);
}

.ide-toast.is-error {
	border-left-color: var(--ide-err);
}

.ide-toast.is-info {
	border-left-color: var(--ide-ok);
}

/* ---------- ADIM GEÇİŞİ ----------
   Gidiş yönüne göre içerik kayarak çıkar, yeni içerik karşı taraftan gelir.
   Sol kolon sticky olduğu için yalnızca opaklıkla değişir. */
.ide-out-fwd { animation: ide-exit-right var(--ide-t-out) var(--ide-ease-soft) both; }
.ide-out-back { animation: ide-exit-left var(--ide-t-out) var(--ide-ease-soft) both; }
.ide-in-fwd { animation: ide-enter-right var(--ide-t-in) var(--ide-ease) both; }
.ide-in-back { animation: ide-enter-left var(--ide-t-in) var(--ide-ease) both; }
.ide-fade-out { animation: ide-fade-out var(--ide-t-out) var(--ide-ease-soft) both; }
.ide-fade-in { animation: ide-fade-in var(--ide-t-in) var(--ide-ease) both; }

:root {
	--ide-t-out: 0.19s;
	--ide-t-in: 0.46s;
}

@keyframes ide-exit-left {
	to { opacity: 0; transform: translate3d(26px, 0, 0) scale(0.99); }
}

@keyframes ide-exit-right {
	to { opacity: 0; transform: translate3d(-26px, 0, 0) scale(0.99); }
}

@keyframes ide-enter-right {
	from { opacity: 0; transform: translate3d(34px, 0, 0) scale(0.99); }
	to { opacity: 1; transform: none; }
}

@keyframes ide-enter-left {
	from { opacity: 0; transform: translate3d(-34px, 0, 0) scale(0.99); }
	to { opacity: 1; transform: none; }
}

@keyframes ide-fade-out {
	to { opacity: 0; }
}

@keyframes ide-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ---------- ANİMASYONLAR ---------- */
.ide-anim {
	animation: ide-rise 0.55s var(--ide-ease) both;
	animation-delay: var(--d, 0ms);
}

@keyframes ide-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ide-savepulse {
	0% { color: var(--ide-ok); }
	70% { color: var(--ide-ok); }
	100% { color: var(--ide-text-dim); }
}

@keyframes ide-dotpulse {
	0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); }
	70% { box-shadow: 0 0 0 8px rgba(61, 220, 151, 0); }
	100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

.ide-shake {
	animation: ide-shake 0.42s var(--ide-ease-soft);
}

@keyframes ide-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-4px); }
	80% { transform: translateX(2px); }
}

/* ---------- GİRİŞ EKRANI DÜZENİ ---------- */
.ide-landing {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

/* ---------- PROGRAM HAKKINDA ---------- */
.ide-intro {
	position: relative;
	overflow: hidden;
	padding: 32px 30px 30px;
}

.ide-intro::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(560px 260px at 100% 0%, rgba(0, 153, 255, 0.15), transparent 68%),
		radial-gradient(420px 220px at 0% 100%, rgba(255, 162, 51, 0.09), transparent 70%);
	pointer-events: none;
}

.ide-intro > * {
	position: relative;
	z-index: 1;
}

.ide-intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 210px;
	gap: 34px;
	align-items: start;
}

.ide-intro-title {
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.7px;
	color: var(--ide-text);
}

.ide-intro-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.ide-intro-tag {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.55;
	color: var(--ide-text-dim);
}

@media (max-width: 860px) {
	.ide-intro-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Adim 3 kenar sutununda dar varyant */
/* ---------- GERİ SAYIM ---------- */
.ide-countdown {
	margin-top: 26px;
	padding: 18px 20px;
	background: var(--ide-surface);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	position: relative;
	overflow: hidden;
}

.ide-countdown::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px 160px at 88% 0%, rgba(255, 162, 51, 0.12), transparent 70%);
	pointer-events: none;
}

.ide-countdown.is-before::before {
	background: radial-gradient(420px 160px at 88% 0%, rgba(0, 153, 255, 0.14), transparent 70%);
}

.ide-cd-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.ide-cd-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-cd-date {
	font-size: 0.86rem;
	font-weight: 800;
	color: var(--ide-accent);
	font-variant-numeric: tabular-nums;
}

.ide-cd-units {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.ide-cd-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 14px 6px 11px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-sm);
}

.ide-cd-val {
	display: block;
	font-size: 1.85rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--ide-text);
	font-variant-numeric: tabular-nums;
	/* Rakam değişiminde alttan yukarı kayma */
	transform-origin: center bottom;
}

.ide-cd-val.is-tick {
	animation: ide-cd-tick 0.42s var(--ide-ease);
}

@keyframes ide-cd-tick {
	0% {
		opacity: 0;
		transform: translateY(9px) scale(0.92);
		color: var(--ide-accent);
	}

	60% {
		color: var(--ide-accent);
	}

	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.ide-cd-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-countdown.is-closed {
	border-color: rgba(255, 122, 122, 0.34);
	background: rgba(255, 122, 122, 0.07);
}

.ide-cd-closed {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.ide-cd-closed strong {
	font-size: 1rem;
	font-weight: 800;
	color: var(--ide-err);
}

.ide-cd-closed span {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--ide-text-dim);
}

.ide-intro-p {
	margin-top: 14px;
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--ide-text-soft);
	max-width: 68ch;
}

/* ---------- BASVURU NUMARASI KOPYALAMA ---------- */
.ide-ref-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ide-copy {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--ide-text-soft);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ide-line-strong);
	border-radius: 100px;
	cursor: pointer;
	transition: color 0.24s, background 0.24s, border-color 0.24s, transform 0.28s var(--ide-ease);
}

.ide-copy:hover {
	color: var(--ide-accent);
	border-color: var(--ide-accent-line);
	background: var(--ide-accent-soft);
}

.ide-copy:active {
	transform: scale(0.94);
}

.ide-copy-ok {
	position: absolute;
	left: 15px;
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.22s var(--ide-ease), transform 0.34s var(--ide-ease);
}

.ide-copy-i {
	transition: opacity 0.22s var(--ide-ease), transform 0.3s var(--ide-ease);
}

.ide-copy.is-copied {
	color: var(--ide-ok);
	border-color: rgba(61, 220, 151, 0.45);
	background: rgba(61, 220, 151, 0.12);
}

.ide-copy.is-copied .ide-copy-i {
	opacity: 0;
	transform: scale(0.4);
}

.ide-copy.is-copied .ide-copy-ok {
	opacity: 1;
	transform: scale(1);
}

/* ---------- BİLGİ KUTUSU ---------- */
.ide-callout {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 20px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid var(--ide-line);
	border-left: 3px solid var(--ide-accent);
	border-radius: var(--ide-r-sm);
}

.ide-callout svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ide-accent);
}

.ide-callout strong {
	display: block;
	font-size: 0.87rem;
	font-weight: 700;
	color: var(--ide-text);
	margin-bottom: 3px;
}

.ide-callout p {
	font-size: 0.83rem;
	line-height: 1.65;
	color: var(--ide-text-dim);
}

/* Callout içindeki vurgular (örn. iletilen e-posta adresi) */
.ide-callout p strong {
	color: var(--ide-text-soft);
	font-weight: 700;
}

.ide-callout.is-info {
	border-left-color: var(--ide-ok);
	background: rgba(61, 220, 151, 0.07);
}

.ide-callout.is-info svg {
	color: var(--ide-ok);
}

.ide-callout.is-error {
	border-left-color: var(--ide-err);
	background: rgba(255, 122, 122, 0.07);
}

.ide-callout.is-error svg {
	color: var(--ide-err);
}

/* ---------- TEMA KARTLARI (tanıtım) ---------- */
.ide-theme-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.ide-theme-chip {
	position: relative;
	padding: 16px 16px 16px 18px;
	background: rgba(255, 255, 255, 0.028);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	transition: border-color 0.3s var(--ide-ease-soft), background 0.3s var(--ide-ease-soft),
		transform 0.4s var(--ide-ease);
}

.ide-theme-chip:hover {
	border-color: var(--ide-accent-line);
	background: rgba(255, 255, 255, 0.05);
	transform: translateY(-3px);
}

.ide-theme-chip-no {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-bottom: 9px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 800;
	color: var(--ide-accent);
	background: var(--ide-accent-soft);
	border: 1px solid rgba(255, 162, 51, 0.24);
}

.ide-theme-chip h4 {
	font-size: 0.87rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ide-text);
	margin-bottom: 6px;
}

.ide-theme-chip p {
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--ide-text-dim);
}

/* ---------- SÜREÇ VE TAKVİM ---------- */
.ide-phases {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin-bottom: 26px;
}

.ide-phases li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ide-phase-no {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 13px;
	font-weight: 800;
	color: #06121f;
	background: linear-gradient(140deg, var(--ide-accent), var(--ide-accent-deep));
}

.ide-phases h4 {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--ide-text);
	margin-bottom: 4px;
}

.ide-phases p {
	font-size: 0.83rem;
	line-height: 1.65;
	color: var(--ide-text-dim);
}

.ide-schedule {
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	overflow: hidden;
}

.ide-schedule-row {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr 1.6fr;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ide-line);
	transition: background 0.25s var(--ide-ease-soft);
}

.ide-schedule-row:last-child {
	border-bottom: 0;
}

.ide-schedule-row:hover {
	background: rgba(255, 255, 255, 0.035);
}

.ide-schedule-row.is-key {
	background: var(--ide-accent-soft);
}

.ide-schedule-phase {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--ide-text);
}

.ide-schedule-date {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ide-accent);
	font-variant-numeric: tabular-nums;
}

.ide-schedule-desc {
	font-size: 0.79rem;
	line-height: 1.55;
	color: var(--ide-text-dim);
}

/* ---------- ÖDÜLLER ---------- */
.ide-awards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ide-award {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.028);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	transition: border-color 0.3s, transform 0.35s var(--ide-ease);
}

.ide-award:hover {
	border-color: var(--ide-accent-line);
	transform: translateX(3px);
}

.ide-award-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	color: var(--ide-text-dim);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ide-line);
}

.ide-award-mark svg {
	width: 16px;
	height: 16px;
}

.ide-award.is-rank-1 .ide-award-mark {
	color: #06121f;
	background: linear-gradient(140deg, #ffd479, #f0a500);
	border-color: transparent;
}

.ide-award.is-rank-2 .ide-award-mark {
	color: #06121f;
	background: linear-gradient(140deg, #e4ecf5, #adbccc);
	border-color: transparent;
}

.ide-award.is-rank-3 .ide-award-mark {
	color: #06121f;
	background: linear-gradient(140deg, #e3a978, #b97a45);
	border-color: transparent;
}

.ide-award strong {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--ide-text);
	margin-bottom: 3px;
}

.ide-award p {
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--ide-text-dim);
}

.ide-award-note {
	margin-top: 14px;
	text-align: center;
}

/* ---------- BAŞVURU ÖZETİ ---------- */
.ide-summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ide-sum-block {
	padding: 15px 17px;
	background: rgba(255, 255, 255, 0.028);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
}

.ide-sum-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 11px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ide-line);
}

.ide-sum-head h4 {
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ide-accent);
}

.ide-sum-edit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ide-text-dim);
	background: transparent;
	border: 1px solid var(--ide-line);
	border-radius: 100px;
	cursor: pointer;
	transition: color 0.22s, border-color 0.22s, background 0.22s;
}

.ide-sum-edit:hover {
	color: var(--ide-accent);
	border-color: var(--ide-accent-line);
	background: var(--ide-accent-soft);
}

.ide-sum-list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.ide-sum-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
}

.ide-sum-row dt {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-sum-row dd {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--ide-text);
	word-break: break-word;
}

.ide-sum-empty {
	color: var(--ide-err);
	font-style: italic;
}

/* ---------- TAAHHÜTNAME KUTUSU ---------- */
.ide-doc {
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 22px;
	background: var(--ide-bg-deep);
	border: 1px solid var(--ide-line-strong);
	border-radius: var(--ide-r-md);
	color: var(--ide-text-soft);
	font-size: 0.87rem;
	line-height: 1.78;
	scroll-behavior: smooth;
}

.ide-doc:focus-visible {
	outline: 2px solid var(--ide-accent);
	outline-offset: 2px;
}

.ide-doc h3 {
	margin: 18px 0 6px;
	font-size: 0.88rem;
	font-weight: 800;
	color: var(--ide-accent);
	letter-spacing: 0.2px;
}

.ide-doc h3:first-child {
	margin-top: 0;
}

.ide-doc p {
	margin-bottom: 10px;
}

.ide-doc-end {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px dashed var(--ide-line);
	text-align: center;
	font-size: 11.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-doc::-webkit-scrollbar {
	width: 9px;
}

.ide-doc::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04);
	border-radius: 9px;
}

.ide-doc::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 9px;
}

.ide-doc::-webkit-scrollbar-thumb:hover {
	background: var(--ide-accent-deep);
}

.ide-doc-status {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 12px;
	padding: 10px 14px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ide-text-dim);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-sm);
	transition: color 0.35s var(--ide-ease-soft), background 0.35s var(--ide-ease-soft),
		border-color 0.35s var(--ide-ease-soft);
}

.ide-doc-status svg {
	flex: 0 0 auto;
	opacity: 0.25;
	transform: scale(0.7);
	transition: opacity 0.35s var(--ide-ease), transform 0.45s var(--ide-ease);
}

.ide-doc-status.is-read {
	color: var(--ide-ok);
	background: rgba(61, 220, 151, 0.08);
	border-color: rgba(61, 220, 151, 0.28);
}

.ide-doc-status.is-read svg {
	opacity: 1;
	transform: scale(1);
}

/* ---------- GÖNDERİM SONUCU ---------- */
.ide-done {
	position: relative;
	text-align: center;
	padding: 56px 40px 44px;
	overflow: hidden;
}

/* Onay işaretinin arkasında yumuşak yeşil hale */
.ide-done::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(430px 210px at 50% -50px, rgba(61, 220, 151, 0.15), transparent 70%);
	pointer-events: none;
}

.ide-done > * {
	position: relative;
}

.ide-done-icon {
	display: grid;
	place-items: center;
	width: 74px;
	height: 74px;
	margin: 0 auto 24px;
	border-radius: 50%;
	color: #04131e;
	background: linear-gradient(140deg, #7bf0c0, var(--ide-ok) 55%, #1fb877);
	box-shadow:
		0 0 0 1px rgba(61, 220, 151, 0.35),
		0 0 0 9px rgba(61, 220, 151, 0.08),
		0 0 0 19px rgba(61, 220, 151, 0.04),
		0 14px 34px rgba(61, 220, 151, 0.26);
	animation: ide-pop 0.6s var(--ide-ease) both;
}

.ide-done-icon svg {
	width: 34px;
	height: 34px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.28));
}

@keyframes ide-pop {
	0% { opacity: 0; transform: scale(0.5); }
	62% { opacity: 1; transform: scale(1.07); }
	100% { opacity: 1; transform: scale(1); }
}

.ide-done .ide-panel-title {
	font-size: 1.42rem;
	letter-spacing: -0.6px;
}

.ide-done .ide-panel-text {
	margin-inline: auto;
	max-width: 52ch;
}

/* Numara kartı */
.ide-ref {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	margin-top: 26px;
	padding: 16px 34px 18px;
	background: linear-gradient(180deg, rgba(255, 162, 51, 0.16), rgba(255, 162, 51, 0.06));
	border: 1px solid var(--ide-accent-line);
	border-radius: var(--ide-r-md);
	box-shadow:
		0 14px 34px rgba(255, 162, 51, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	animation: ide-rise 0.6s var(--ide-ease) 0.12s both;
}

.ide-ref span {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-ref strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 2.5px;
	color: var(--ide-accent);
	text-shadow: 0 0 26px rgba(255, 162, 51, 0.35);
}

/* Bilgi kutuları ortalanmış panel içinde düzgün dursun */
.ide-done .ide-callout {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	animation: ide-rise 0.6s var(--ide-ease) 0.22s both;
}

.ide-done .ide-cta-actions {
	justify-content: center;
	margin-top: 26px;
}

/* Gönderim sırasında düğme durumu */
.ide-btn.is-loading {
	pointer-events: none;
	opacity: 0.75;
}

.ide-btn.is-loading svg {
	animation: ide-spin 0.8s linear infinite;
}

/* ---------- DUYARLI ---------- */
@media (max-width: 1100px) {
	.ide-shell {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 20px 24px 90px;
	}

	.ide-aside {
		position: static;
	}

	.ide-stepper-wrap {
		padding: 14px 24px 0;
	}
}

@media (max-width: 720px) {
	.ide-stepper {
		padding: 16px 10px 12px;
	}

	.ide-step-label {
		font-size: 11px;
	}

	.ide-step-label em {
		display: none;
	}

	.ide-step::before,
	.ide-step::after {
		left: calc(-50% + 24px);
		right: calc(50% + 24px);
	}

	.ide-sum-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.ide-cd-units {
		grid-template-columns: repeat(2, 1fr);
	}

	.ide-panel {
		padding: 20px 18px 22px;
	}

	.ide-form-foot {
		flex-direction: column;
		align-items: stretch;
		bottom: 8px;
	}

	.ide-foot-left,
	.ide-foot-right {
		justify-content: space-between;
	}

	.ide-toast-wrap {
		right: 12px;
		left: 12px;
		bottom: 12px;
	}

	.ide-done {
		padding: 42px 20px 36px;
	}

	.ide-done .ide-panel-title {
		font-size: 1.24rem;
	}

	.ide-ref {
		width: 100%;
		padding: 14px 18px 16px;
	}

	.ide-ref strong {
		font-size: 1.24rem;
		letter-spacing: 1.6px;
	}

	.ide-done .ide-cta-actions {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ide-anim,
	.ide-card,
	.ide-note-block,
	.ide-toast,
	.ide-modal-card,
	.ide-modal-overlay,
	.ide-cd-val,
	.ide-done-icon,
	.ide-ref,
	.ide-done .ide-callout,
	.ide-out-fwd,
	.ide-out-back,
	.ide-in-fwd,
	.ide-in-back,
	.ide-fade-out,
	.ide-fade-in {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------- HIZLI İŞLEMLER KARTLARI (SONUÇ SORGULAMA & REFERANS NO) ---------- */
.ide-quick-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 14px;
}

.ide-quick-link-card {
	padding: 20px 22px;
	background: var(--ide-surface-2);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	display: flex;
	gap: 16px;
	align-items: flex-start;
	text-decoration: none;
	transition: transform 0.2s var(--ide-ease-soft), border-color 0.2s, background-color 0.2s;
}

.ide-quick-link-card:hover {
	transform: translateY(-2px);
	border-color: var(--ide-accent-line);
	background: var(--ide-surface-3);
}

.ide-quick-link-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(255, 162, 51, 0.12);
	border: 1px solid var(--ide-accent-line);
	color: var(--ide-accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ide-quick-link-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ide-quick-link-content h4 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ide-text);
	margin: 0;
}

.ide-quick-link-content p {
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--ide-text-soft);
	margin: 0;
}

.ide-quick-link-action {
	margin-top: 8px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ide-accent);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ide-cta-secondary-links {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--ide-line);
	flex-wrap: wrap;
}

.ide-cta-sub-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ide-accent);
	text-decoration: none;
	transition: color 0.2s;
}

.ide-cta-sub-link:hover {
	color: #ffc477;
	text-decoration: underline;
}

.ide-cta-sub-divider {
	color: var(--ide-text-dim);
}

.ide-aside-quick-box {
	padding: 16px;
	background: rgba(9, 30, 54, 0.7);
	border: 1px solid var(--ide-line);
	border-radius: var(--ide-r-md);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ide-aside-quick-title {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--ide-text-dim);
}

.ide-aside-quick-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ide-aside-quick-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--ide-r-sm);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ide-text);
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ide-aside-quick-link:hover {
	background: rgba(255, 162, 51, 0.1);
	border-color: var(--ide-accent-line);
	color: var(--ide-accent);
}

.ide-aside-quick-link svg {
	color: var(--ide-accent);
	flex-shrink: 0;
}