/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: forms.css
 * Description: Form Layout, Validation and Form States
 *
 * Depends:
 * tokens.css
 * spacing.css
 * typography.css
 * controls.css
 * buttons.css
 *
 * Version:
 * 2.0.0
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */


/* ==========================================================
   FORM
========================================================== */

.gm-form{

	display:flex;

	flex-direction:column;

	width:100%;

	gap:var(--gm-gap-lg);

}


/* ==========================================================
   FORM GROUP
========================================================== */

.gm-form-group{

	display:flex;

	flex-direction:column;

	min-width:0;

	gap:var(--gm-gap-xs);

}


/* ==========================================================
   FORM ROW
========================================================== */

.gm-form-row{

	display:grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap:var(--gm-gap-md);

}


/* ==========================================================
   FORM ROW VARIANTS
========================================================== */

.gm-form-row--single{

	grid-template-columns:1fr;

}

.gm-form-row--three{

	grid-template-columns:
		repeat(3,minmax(0,1fr));

}


/* ==========================================================
   LABEL
========================================================== */

.gm-form-label{

	display:inline-flex;

	align-items:center;

	gap:var(--gm-space-xs);

	margin:0;

	color:var(--gm-color-text);

	font-family:var(--gm-font-family);

	font-size:var(--gm-font-size-sm);

	font-weight:var(--gm-font-weight-medium);

	line-height:var(--gm-line-height-normal);

}


/* ==========================================================
   REQUIRED MARK
========================================================== */

.gm-form-required{

	color:var(--gm-color-primary);

}


/* ==========================================================
   OPTIONAL LABEL
========================================================== */

.gm-form-optional{

	color:var(--gm-color-text-light);

	font-size:var(--gm-font-size-xs);

	font-weight:var(--gm-font-weight-regular);

}


/* ==========================================================
   FIELD WRAPPER
========================================================== */

.gm-form-field{

	position:relative;

	width:100%;

	min-width:0;

}


/* ==========================================================
   TEXTAREA LAYOUT

   Görsel temel .gm-input tarafından controls.css'den gelir.
========================================================== */

.gm-form textarea.gm-input{

	height:auto;

	min-height:132px;

	padding:
		var(--gm-space-md)
		var(--gm-space-lg);

	line-height:var(--gm-line-height-normal);

	resize:vertical;

}


/* ==========================================================
   HELPER TEXT
========================================================== */

.gm-form-help{

	margin:0;

	color:var(--gm-color-text-light);

	font-family:var(--gm-font-family);

	font-size:var(--gm-font-size-xs);

	font-weight:var(--gm-font-weight-regular);

	line-height:var(--gm-line-height-normal);

}


/* ==========================================================
   ERROR MESSAGE
========================================================== */

.gm-form-error{

	display:none;

	margin:0;

	color:var(--gm-color-danger);

	font-family:var(--gm-font-family);

	font-size:var(--gm-font-size-xs);

	font-weight:var(--gm-font-weight-medium);

	line-height:var(--gm-line-height-normal);

}


/* ==========================================================
   ERROR STATE
========================================================== */

.gm-form-group.is-error .gm-input,
.gm-form-group.is-error .gm-select,
.gm-input[aria-invalid="true"],
.gm-select[aria-invalid="true"]{

	border-color:var(--gm-color-danger);

}

.gm-form-group.is-error .gm-form-error{

	display:block;

}


/* ==========================================================
   SUCCESS STATE
========================================================== */

.gm-form-group.is-success .gm-input,
.gm-form-group.is-success .gm-select{

	border-color:var(--gm-color-success);

}


/* ==========================================================
   DISABLED GROUP
========================================================== */

.gm-form-group.is-disabled{

	opacity:.58;

}

.gm-form-group.is-disabled
.gm-form-label{

	cursor:not-allowed;

}


/* ==========================================================
   CHOICE GROUP
========================================================== */

.gm-choice-group{

	display:flex;

	flex-wrap:wrap;

	align-items:center;

	gap:var(--gm-gap-sm);

}


/* ==========================================================
   CHOICE LABEL
========================================================== */

.gm-choice-label{

	display:inline-flex;

	align-items:center;

	gap:var(--gm-space-xs);

	margin:0;

	color:var(--gm-color-text);

	font-family:var(--gm-font-family);

	font-size:var(--gm-font-size-sm);

	font-weight:var(--gm-font-weight-regular);

	line-height:var(--gm-line-height-normal);

	cursor:pointer;

}


/* ==========================================================
   FORM SECTION
========================================================== */

.gm-form-section{

	display:flex;

	flex-direction:column;

	gap:var(--gm-gap-md);

}


/* ==========================================================
   FORM SECTION HEADER
========================================================== */

.gm-form-section-header{

	display:flex;

	flex-direction:column;

	gap:var(--gm-space-xs);

}


/* ==========================================================
   FORM DIVIDER
========================================================== */

.gm-form-divider{

	width:100%;

	height:1px;

	margin:
		var(--gm-space-md)
		0;

	border:0;

	background:var(--gm-color-border);

}


/* ==========================================================
   FORM ACTIONS
========================================================== */

.gm-form-actions{

	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:var(--gm-gap-sm);

	margin-top:var(--gm-space-xs);

}


/* ==========================================================
   STACKED ACTIONS
========================================================== */

.gm-form-actions--stacked{

	flex-direction:column;

	align-items:stretch;

}


/* ==========================================================
   ACTION ALIGNMENT
========================================================== */

.gm-form-actions--end{

	justify-content:flex-end;

}

.gm-form-actions--between{

	justify-content:space-between;

}


/* ==========================================================
   FORM MESSAGE
========================================================== */

.gm-form-message{

	padding:var(--gm-space-md);

	border:1px solid var(--gm-color-border);

	border-radius:var(--gm-radius-md);

	font-size:var(--gm-font-size-sm);

	line-height:var(--gm-line-height-normal);

}


/* ==========================================================
   SUCCESS MESSAGE
========================================================== */

.gm-form-message--success{

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-success) 30%,
			transparent
		);

	background:
		color-mix(
			in srgb,
			var(--gm-color-success) 7%,
			var(--gm-color-white)
		);

	color:var(--gm-color-success);

}


/* ==========================================================
   ERROR MESSAGE BLOCK
========================================================== */

.gm-form-message--error{

	border-color:
		color-mix(
			in srgb,
			var(--gm-color-danger) 30%,
			transparent
		);

	background:
		color-mix(
			in srgb,
			var(--gm-color-danger) 6%,
			var(--gm-color-white)
		);

	color:var(--gm-color-danger);

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:767px){

	.gm-form-row,
	.gm-form-row--three{

		grid-template-columns:1fr;

	}

	.gm-form{

		gap:var(--gm-gap-md);

	}

	.gm-form-actions{

		align-items:stretch;

	}

	.gm-form-actions > .gm-btn{

		width:100%;

	}

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

	.gm-form *{

		scroll-behavior:auto;

	}

}