/* Sınıf Defteri — tam ekran uygulama stili */

:root {
	--sd-green: #4aa72e;
	--sd-green-d: #2f7d1c;
	--sd-ink: #2b2b2b;
	--sd-bar-bg: #ffffff;
	--sd-shadow: 0 6px 22px rgba(0,0,0,.14);
	--sd-radius: 16px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
}

body.sd-app {
	font-family: 'Nunito', system-ui, sans-serif;
	color: var(--sd-ink);
	background: #eef2f6;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;
}

body.sd-pseudo-fs {
	position: fixed;
	inset: 0;
}

/* ── Üst sekme çubuğu ───────────────────────────────── */
.sd-tabbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	background: var(--sd-bar-bg);
	box-shadow: 0 2px 10px rgba(0,0,0,.10);
	z-index: 30;
}

.sd-tabs {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	overflow-x: auto;
	overflow-y: visible;
	padding: 10px 4px;
	scrollbar-width: thin;
}
.sd-tabs::-webkit-scrollbar { height: 6px; }
.sd-tabs::-webkit-scrollbar-thumb { background: #cbd3db; border-radius: 6px; }

.sd-tab {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 3px solid var(--c, #888);
	border-radius: 999px;
	background: #fff;
	color: var(--sd-ink);
	font-family: 'Fredoka', sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease;
}
.sd-tab:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(0,0,0,.12); }
.sd-tab:active { transform: translateY(0); }

.sd-tab-check {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex: 0 0 auto;
}

.sd-tab-chalk {
	position: absolute;
	left: -7px;
	top: -8px;
	width: calc(100% + 14px);
	height: calc(100% + 16px);
	overflow: visible;
	opacity: 0;
	pointer-events: none;
}
.sd-tab-chalk path {
	fill: none;
	stroke: #1d1d1d;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 640;
	stroke-dashoffset: 640;
}
.sd-tab.is-active { font-weight: 600; }
.sd-tab.is-active .sd-tab-chalk { opacity: 1; }
.sd-tab.is-active .sd-tab-chalk path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .55s ease;
}

.sd-close-btn {
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(circle at 35% 28%, #ff8a7a 0%, #e8483a 52%, #c5281b 100%);
	border: 3px solid #f0e9e9;
	box-shadow: 0 3px 7px rgba(0,0,0,.26), inset 0 2px 4px rgba(255,255,255,.35);
	text-decoration: none;
	transition: transform .12s ease;
}
.sd-close-btn:hover { transform: scale(1.08); }

/* sağ üst grup: zoom + tam ekran + kapat */
.sd-topright { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.sd-fs-btn { color: #445; }
.sd-fs-btn.is-active {
	background: #e7f3ff;
	border-color: #2f8fd6;
	color: #1c6fb3;
}
.sd-zoom-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 2px solid #e2e6ea;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,.12);
	transition: transform .12s ease, background .12s ease;
}
.sd-zoom-btn:hover { background: #f0f4f8; transform: scale(1.06); }
.sd-zoom-btn:active { transform: scale(.95); }
.sd-zoom-btn:disabled { opacity: .38; cursor: default; transform: none; }
.sd-zoom-label {
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #5a6570;
	min-width: 46px;
	text-align: center;
	user-select: none;
}

/* açılır menü (Güzel Yazı altındaki Yazı Stiller) */
.sd-tab-wrap { position: relative; flex: 0 0 auto; }
.sd-tab-caret { margin-left: 1px; font-size: 12px; opacity: .7; }
.sd-tab-menu {
	position: fixed;
	display: none;
	flex-direction: column;
	gap: 2px;
	min-width: 190px;
	padding: 6px;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(0,0,0,.18);
	z-index: 60;
}
.sd-tab-wrap.is-open .sd-tab-menu { display: flex; }
.sd-tab-menu-item {
	text-align: left;
	border: none;
	background: transparent;
	padding: 10px 13px;
	border-radius: 9px;
	font-family: 'Fredoka', sans-serif;
	font-size: 15px;
	color: #2b2b2b;
	cursor: pointer;
	white-space: nowrap;
}
.sd-tab-menu-item:hover { background: #f0f4f8; }
.sd-tab-menu-item.is-active { background: #e7f7f4; color: #1a8d7e; font-weight: 600; }

/* ── Sahne ──────────────────────────────────────────── */
.sd-stage {
	position: relative;
	flex: 1 1 auto;
	background: #e9edf1;
	overflow: auto;
}
.sd-page {
	position: relative;
	width: 100%;
	height: 100%;
	background: #fff;
}
.sd-bg-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.sd-bg-layer svg { display: block; width: 100%; height: 100%; }

.sd-draw {
	position: absolute;
	top: 0;
	left: 0;
	touch-action: none;
	cursor: crosshair;
}

/* ── Klavye ile yazılan metin kutusu ────────────────── */
.sd-text-input {
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 2px dashed rgba(47,143,214,.9);
	outline-offset: 2px;
	background: rgba(231,243,255,.55);
	border-radius: 3px;
	box-sizing: content-box;
	resize: none;
	overflow: hidden;
	white-space: pre;
	font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
	font-weight: 600;
	caret-color: currentColor;
	z-index: 25;
	min-width: 8px;
}
.sd-text-input::placeholder { color: rgba(0,0,0,.35); }

/* ── Kalem kiti ─────────────────────────────────────── */
.sd-penkit {
	position: fixed;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: rgba(255,255,255,.97);
	border-radius: 18px;
	box-shadow: var(--sd-shadow);
	border: 1px solid rgba(0,0,0,.06);
	width: max-content;
	max-width: calc(100vw - 16px);
	backdrop-filter: blur(4px);
}
.sd-penkit--default {
	bottom: max(16px, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
}

.sd-pk-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }

/* küçültme / açma */
.sd-pk-mini {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 6px 10px;
	border: none;
	background: transparent;
	color: #2f8fd6;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 14px;
	cursor: pointer;
}
.sd-pk-mini .sd-pk-ic { display: inline-flex; }
.sd-penkit--collapsed { padding: 4px 6px; }
.sd-penkit--collapsed .sd-pk-bar,
.sd-penkit--collapsed .sd-pk-handle { display: none; }
.sd-penkit--collapsed .sd-pk-mini { display: inline-flex; }

.sd-pk-group { display: flex; align-items: center; gap: 4px; }
.sd-pk-sep { width: 1px; align-self: stretch; background: #e2e6ea; margin: 2px 4px; }

.sd-pk-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 40px;
	border: none;
	background: transparent;
	color: #9aa3ac;
	cursor: grab;
	border-radius: 8px;
	touch-action: none;
}
.sd-pk-handle:active { cursor: grabbing; background: #eef1f4; }

.sd-pk-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 50px;
	padding: 5px 6px;
	border: 2px solid transparent;
	border-radius: 12px;
	background: #f4f6f8;
	color: #44505b;
	cursor: pointer;
	font-family: 'Nunito', sans-serif;
	transition: background .12s, border-color .12s, color .12s;
}
.sd-pk-btn:hover { background: #e9edf1; }
.sd-pk-btn.is-active {
	background: #e7f3ff;
	border-color: #2f8fd6;
	color: #1c6fb3;
}
.sd-pk-btn:disabled { opacity: .38; cursor: default; }
.sd-pk-ic { display: inline-flex; }
.sd-pk-lb { font-size: 11px; font-weight: 700; }
.sd-pk-danger.is-active, .sd-pk-danger:hover { background: #ffe9e6; color: #d23b2e; border-color: #f3b4ac; }

/* renk örnekleri */
.sd-pk-colors { gap: 6px; }
.sd-pk-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #cfd6dd;
	cursor: pointer;
	padding: 0;
	position: relative;
}
.sd-pk-swatch.is-active {
	box-shadow: 0 0 0 3px #2f8fd6;
	transform: scale(1.08);
}
.sd-pk-custom {
	overflow: hidden;
	background:
		conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.sd-pk-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; border: none; }

/* kalınlık */
.sd-pk-sizes { gap: 5px; }
.sd-pk-size {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 2px solid transparent;
	background: #f4f6f8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.sd-pk-size.is-active { border-color: #2f8fd6; background: #e7f3ff; }
.sd-pk-dot { display: inline-block; border-radius: 50%; background: #44505b; }
.sd-pk-slider { width: 88px; accent-color: #2f8fd6; cursor: pointer; }

/* sayfalar */
.sd-pk-pagelabel {
	min-width: 38px;
	text-align: center;
	font-weight: 800;
	font-size: 14px;
	color: #44505b;
}

/* ── Duyarlı: tablet / akıllı tahta ─────────────────── */
@media (max-width: 820px) {
	.sd-tab { font-size: 14px; padding: 8px 12px; }
	.sd-pk-btn { min-width: 42px; }
	.sd-pk-lb { display: none; }
	.sd-pk-slider { width: 60px; }
}

/* ── Duyarlı: telefon (mobil) ───────────────────────── */
@media (max-width: 600px) {
	/* Üst çubuk: çentik güvenli alanı + daha sıkı düzen */
	.sd-tabbar {
		gap: 6px;
		padding: 6px 8px;
		padding-top: max(6px, env(safe-area-inset-top));
		padding-left: max(8px, env(safe-area-inset-left));
		padding-right: max(8px, env(safe-area-inset-right));
	}
	.sd-tabs { gap: 8px; padding: 6px 2px; }
	.sd-tab { font-size: 13px; padding: 7px 11px; border-width: 2px; }
	.sd-tab-check { width: 17px; height: 17px; }

	/* Sağ üst: zoom etiketi gizli, butonlar küçülür */
	.sd-topright { gap: 5px; }
	.sd-zoom-label { display: none; }
	.sd-zoom-btn { width: 38px; height: 38px; }
	.sd-close-btn { width: 42px; height: 42px; border-width: 2px; }

	/* Kalem kiti: tek satır, yatay kaydırılabilir şerit */
	.sd-penkit {
		gap: 4px;
		padding: 6px;
		max-width: calc(100vw - 10px);
		border-radius: 16px;
	}
	.sd-penkit--default {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		bottom: max(8px, env(safe-area-inset-bottom));
	}
	.sd-pk-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		flex: 1 1 auto;
		min-width: 0;
		gap: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		scroll-snap-type: none;
	}
	.sd-pk-bar::-webkit-scrollbar { height: 4px; }
	.sd-pk-bar::-webkit-scrollbar-thumb { background: #cbd3db; border-radius: 4px; }
	.sd-pk-group { flex: 0 0 auto; }
	.sd-pk-sep { margin: 2px 2px; }
	.sd-pk-btn { min-width: 40px; padding: 6px 5px; }
	.sd-pk-size { width: 32px; height: 32px; }
	.sd-pk-swatch { width: 26px; height: 26px; }
	.sd-pk-slider { width: 56px; }
	.sd-pk-handle { width: 22px; }
	/* Açma düğmesi (kapalıyken) kolay dokunulur olsun */
	.sd-pk-mini { padding: 9px 18px 9px 12px; font-size: 15px; }
}

/* Çok dar ekranlarda yazı stilleri menüsü taşmasın */
@media (max-width: 380px) {
	.sd-tab-menu { min-width: 160px; }
}