/* ==========================================================================
   Kemer Doğa Evleri — çekirdek stiller
   Şablonlar orijinal satır-içi stilleri birebir korur; burada yalnızca
   satır-içi ile ifade edilemeyenler bulunur: değişkenler, reset, keyframe'ler,
   responsive yardımcılar ve :hover / pseudo sınıfları.
   ========================================================================== */

:root {
	--kde-bg: #FAF4EA;
	--kde-bg-alt: #F3EADC;
	--kde-ink: #38291C;
	--kde-terra: #BC5B33;
	--kde-terra-d: #9C4826;
	--kde-gold: #E5A868;
	--kde-gold-soft: #EBB08A;
	--kde-warm-dark: #241812;
	--kde-warm-dark2: #2A1D12;
	--kde-cream: #F7EEDD;
	--kde-muted: #7E6A57;
	--kde-muted2: #8A7462;
	--kde-wa: #25D366;
	--kde-wa-ink: #06341B;
}

/* --- reset & base (orijinal <style> bloklarından) --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #FAF4EA;
	color: #38291C;
	font-family: Jost, system-ui, sans-serif;
	line-height: 1.6;
	overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: #BC5B33; color: #FFF8EE; }
h1, h2, h3, h4 { font-family: Prata, Georgia, serif; font-weight: 400; line-height: 1.14; margin: 0; }

/* --- masaüstü / mobil nav geçişi --- */
.kde-desk { display: flex; }
.kde-burger { display: none; }
@media (max-width: 1040px) {
	.kde-desk { display: none !important; }
	.kde-burger { display: inline-flex !important; }
}

/* --- fixed parallax arka planlar (mobilde kapalı, orijinaldeki gibi) --- */
@media (min-width: 1000px) { .kde-fixed { background-attachment: fixed; } }

/* --- video/cabin ofset (orijinal .kde-off) --- */
@media (min-width: 960px) { .kde-off { transform: translateY(56px); } }

/* --- animasyonlar --- */
@keyframes kdeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kdeProg0 { from { width: 0; } to { width: 100%; } }
@keyframes kdeProg1 { from { width: 0; } to { width: 100%; } }
@keyframes kdeProg2 { from { width: 0; } to { width: 100%; } }
@keyframes kdeProg3 { from { width: 0; } to { width: 100%; } }
@keyframes kdeProg4 { from { width: 0; } to { width: 100%; } }
@keyframes kdeFloat { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes kdeDrift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-50px, 36px) scale(1.12); } }
@keyframes kdeDrift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(44px, -30px) scale(1.08); } }
@keyframes kdeKB { from { transform: scale(1); } to { transform: scale(1.09); } }

.kde-kb { animation: kdeKB 16s ease-in-out infinite alternate; }

/* --- marquee (üst şerit) --- */
.kde-marq {
	display: inline-flex;
	align-items: center;
	gap: clamp(26px, 4vw, 52px);
	white-space: nowrap;
	width: max-content;
	animation: kdeMarq 30s linear infinite;
}
@keyframes kdeMarq { to { transform: translateX(-50%); } }

/* --- kayan galeri şeridi --- */
.kde-strip {
	display: flex;
	align-items: center;
	gap: 18px;
	width: max-content;
	animation: kdeStrip 55s linear infinite;
}
.kde-strip:hover { animation-play-state: paused; }
@keyframes kdeStrip { to { transform: translateX(-50%); } }

/* --- galeri masonry düğmesi (galeri sayfası) --- */
.kde-ph {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	margin: 0 0 18px;
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 14px 30px -22px rgba(56, 41, 28, 0.45);
}
.kde-ph img { width: 100%; height: auto; display: block; transition: transform .7s ease, filter .4s ease; }
.kde-ph:hover img { transform: scale(1.04); filter: brightness(1.05); }

/* ==========================================================================
   :hover sınıfları — orijinal style-hover="" karşılıkları
   Elemanlar transition'ı satır-içinde taşır; burada yalnız :hover durumu.
   ========================================================================== */
.kde-hv-terra:hover { color: #BC5B33; }
.kde-hv-terra-d:hover { color: #9C4826; }
.kde-hv-gold:hover { color: #E5A868; }
.kde-hv-goldsoft:hover { color: #EBB08A; }
.kde-hv-cream:hover { color: #F7EEDD; }
.kde-hv-bright:hover { filter: brightness(1.06); }
.kde-hv-bright8:hover { filter: brightness(1.08); }
.kde-hv-out-gold:hover { border-color: #E5A868; color: #E5A868; }
.kde-hv-out-terra:hover { border-color: #BC5B33; color: #BC5B33; }
.kde-hv-out-goldsoft:hover { border-color: #EBB08A; color: #EBB08A; }
.kde-zoom6:hover { transform: scale(1.06); }
.kde-zoom4:hover { transform: scale(1.04); }
.kde-row-hv:hover { background: rgba(188, 91, 51, 0.05); }
.kde-row-hv-16:hover { background: rgba(188, 91, 51, 0.05); padding-left: 16px; }
.kde-row-hv-12:hover { background: rgba(188, 91, 51, 0.05); padding-left: 12px; }

/* reduced-motion saygısı */
@media (prefers-reduced-motion: reduce) {
	.kde-kb, .kde-marq, .kde-strip { animation: none !important; }
	html { scroll-behavior: auto; }
}