/* ==========================================================================
   Kabrim teması — efektler
   Geliştirici: Zohi (zohi.tr)

   Bu dosya yalnızca efekt seviyesi "Hafif" veya "Belirgin" iken yüklenir.
   Seviye gövde sınıfıyla belirlenir: .kbr-efekt-hafif / .kbr-efekt-belirgin
   ========================================================================== */

/* Giriş animasyonları ----------------------------------------------------- */

/* Temel görünürlük animasyonu main.css'te; burada yönlü ve daha yumuşak
   bir eğri ile yeniden tanımlanıyor. */
.kbr-giris-efekti .kbr-goster {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.kbr-giris-efekti .kbr-goster.kbr-gorunur { opacity: 1; transform: none; }

/* İkili düzenlerde yazı ve görsel karşılıklı gelsin */
.kbr-giris-efekti .kbr-ikili-yazi { transform: translateX(-24px); }
.kbr-giris-efekti .kbr-ikili-gorsel { transform: translateX(24px); }
.kbr-giris-efekti .kbr-ikili-ters .kbr-ikili-yazi { transform: translateX(24px); }
.kbr-giris-efekti .kbr-ikili-ters .kbr-ikili-gorsel { transform: translateX(-24px); }
.kbr-giris-efekti .kbr-ikili-yazi.kbr-gorunur,
.kbr-giris-efekti .kbr-ikili-gorsel.kbr-gorunur { transform: none; }

/* Bölüm başlıklarının altındaki altın çizgi soldan çizilsin */
.kbr-efekt-hafif .kbr-etiket::before,
.kbr-efekt-belirgin .kbr-etiket::before {
	width: 0;
	transition: width .6s ease .15s;
}
.kbr-efekt-hafif .kbr-gorunur .kbr-etiket::before,
.kbr-efekt-belirgin .kbr-gorunur .kbr-etiket::before,
.kbr-efekt-hafif .kbr-bolum-basligi .kbr-etiket::before,
.kbr-efekt-belirgin .kbr-bolum-basligi .kbr-etiket::before { width: 24px; }

/* Liste maddeleri sırayla belirsin */
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li {
	animation: kbr-madde .5s cubic-bezier(.22, .61, .36, 1) backwards;
}
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(1) { animation-delay: .05s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(2) { animation-delay: .11s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(3) { animation-delay: .17s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(4) { animation-delay: .23s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(5) { animation-delay: .29s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(6) { animation-delay: .35s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(7) { animation-delay: .41s; }
.kbr-efekt-belirgin .kbr-gorunur .kbr-liste li:nth-child(8) { animation-delay: .47s; }

@keyframes kbr-madde {
	from { opacity: 0; transform: translateX(-10px); }
	to { opacity: 1; transform: none; }
}

/* Liste noktası nefes alsın */
.kbr-efekt-belirgin .kbr-liste li::before { transition: box-shadow .3s ease, transform .3s ease; }
.kbr-efekt-belirgin .kbr-liste li:hover::before {
	transform: scale(1.25);
	box-shadow: 0 0 0 6px rgba(var(--kbr-altin-rgb), .22);
}

/* Giriş bölümü ------------------------------------------------------------ */

/* Başlık kelimeleri sırayla yukarı doğru açılır */
.kbr-efekt-hafif .kbr-hero-baslik .kbr-kelime,
.kbr-efekt-belirgin .kbr-hero-baslik .kbr-kelime {
	display: inline-block;
	animation: kbr-kelime .8s cubic-bezier(.22, .61, .36, 1) backwards;
}

@keyframes kbr-kelime {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

/* Görselde yavaş yakınlaşma */
.kbr-kenburns .kbr-hero-gorsel { overflow: hidden; border-radius: var(--kbr-radius); }
.kbr-kenburns .kbr-hero-gorsel .kbr-hero-img {
	animation: kbr-kenburns 22s ease-in-out infinite alternate;
	transform-origin: 60% 45%;
}

@keyframes kbr-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.08); }
}

/* Görsel üzerindeki fiyat kartı gecikmeli girsin ve hafifçe süzülsün */
.kbr-efekt-hafif .kbr-hero-kart,
.kbr-efekt-belirgin .kbr-hero-kart {
	animation: kbr-kart-gir .8s cubic-bezier(.22, .61, .36, 1) .7s backwards;
}
.kbr-efekt-belirgin .kbr-hero-kart { animation: kbr-kart-gir .8s cubic-bezier(.22, .61, .36, 1) .7s backwards, kbr-suzul 6s ease-in-out 1.5s infinite; }

@keyframes kbr-kart-gir {
	from { opacity: 0; transform: translateY(20px) scale(.96); }
	to { opacity: 1; transform: none; }
}

@keyframes kbr-suzul {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* Giriş zemininde çok yavaş renk geçişi */
.kbr-efekt-belirgin .kbr-hero::before {
	content: "";
	position: absolute; inset: -20% -10% auto -10%; height: 70%;
	background: radial-gradient(60% 60% at 30% 20%, rgba(var(--kbr-altin-rgb), .14) 0%, rgba(255, 255, 255, 0) 70%);
	animation: kbr-isik 14s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes kbr-isik {
	from { transform: translate3d(-4%, 0, 0); opacity: .7; }
	to { transform: translate3d(6%, 4%, 0); opacity: 1; }
}

/* Yaprak/çiçek katmanı — giriş bölümünün üstünde süzülür */
.kbr-yapraklar {
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 1;
}
.kbr-hero-ic,
.kbr-hero .kbr-kap { position: relative; z-index: 2; }

/* Parallax — JS değişkeni ile sürülür */
.kbr-efekt-belirgin .kbr-hero-gorsel { transform: translate3d(0, var(--kbr-parallax, 0px), 0); }

/* Kartlar ----------------------------------------------------------------- */

.kbr-kart-efekti .kbr-hizmet-kart,
.kbr-kart-efekti .kbr-paket,
.kbr-kart-efekti .kbr-susleme-kart,
.kbr-kart-efekti .kbr-deger {
	transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.kbr-kart-efekti .kbr-susleme-kart:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(var(--kbr-koyu-rgb), .16); }
.kbr-kart-efekti .kbr-deger:hover { transform: translateX(4px); }
.kbr-kart-efekti .kbr-hizmet-kart:hover { transform: translateY(-6px); }

/* Kart görselinde yumuşak yakınlaşma */
.kbr-kart-efekti .kbr-hizmet-gorsel,
.kbr-kart-efekti .kbr-susleme-gorsel { overflow: hidden; }
.kbr-kart-efekti .kbr-hizmet-gorsel img,
.kbr-kart-efekti .kbr-susleme-gorsel img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.kbr-kart-efekti .kbr-hizmet-kart:hover .kbr-hizmet-gorsel img,
.kbr-kart-efekti .kbr-susleme-kart:hover .kbr-susleme-gorsel img { transform: scale(1.06); }

/* Paket kartında altın kenar aşağıdan yukarı dolar */
.kbr-kart-efekti .kbr-paket::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--kbr-altin);
	transform: scaleX(0); transform-origin: left;
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.kbr-kart-efekti .kbr-paket:hover::after { transform: scaleX(1); }
.kbr-kart-efekti .kbr-paket:hover .kbr-paket-fiyat strong { transform: translateY(-2px); }
.kbr-kart-efekti .kbr-paket-fiyat strong { transition: transform .3s ease; }

/* İlçe etiketleri sırayla belirsin */
.kbr-efekt-belirgin .kbr-gorunur .kbr-bolge {
	animation: kbr-rozet .45s cubic-bezier(.22, .61, .36, 1) backwards;
}
.kbr-efekt-belirgin .kbr-gorunur .kbr-bolge:nth-child(n+1) { animation-delay: calc(var(--kbr-sira, 0) * 28ms); }

@keyframes kbr-rozet {
	from { opacity: 0; transform: translateY(8px) scale(.94); }
	to { opacity: 1; transform: none; }
}

/* Butonlar ---------------------------------------------------------------- */

/* Üzerine gelince soldan sağa geçen ışık */
.kbr-efekt-hafif .kbr-btn,
.kbr-efekt-belirgin .kbr-btn { position: relative; overflow: hidden; }
.kbr-efekt-hafif .kbr-btn::after,
.kbr-efekt-belirgin .kbr-btn::after {
	content: "";
	position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, 0) 100%);
	transform: skewX(-18deg);
	transition: left .55s ease;
	pointer-events: none;
}
.kbr-efekt-hafif .kbr-btn:hover::after,
.kbr-efekt-belirgin .kbr-btn:hover::after { left: 120%; }

/* WhatsApp butonu belli aralıklarla nabız atsın */
.kbr-efekt-belirgin .kbr-wa::before {
	content: "";
	position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid #25d366;
	animation: kbr-nabiz 2.8s ease-out infinite;
}

@keyframes kbr-nabiz {
	0% { transform: scale(1); opacity: .7; }
	70% { transform: scale(1.6); opacity: 0; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* Rakamlar ---------------------------------------------------------------- */

.kbr-rakamlar { background: linear-gradient(180deg, var(--kbr-koyu-2) 0%, var(--kbr-koyu) 100%); }
.kbr-rakam-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.kbr-rakam {
	text-align: center; padding: 8px 20px;
	border-right: 1px solid rgba(255, 255, 255, .12);
}
.kbr-rakam:last-child { border-right: 0; }
.kbr-rakam strong {
	display: block;
	/* Rakamlar gövde fontuyla: eski usul rakamların okunmama sorunu için */
	font-family: var(--kbr-rakam, var(--kbr-sans));
	font-size: clamp(38px, 4.4vw, 54px); font-weight: 700;
	letter-spacing: -.02em;
	color: var(--kbr-altin); line-height: 1; margin-bottom: 10px;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "lnum" 1, "tnum" 1;
}
.kbr-rakam strong i { font-style: normal; font-size: .6em; margin-left: 2px; }
.kbr-rakam-etiket { font-size: 15px; color: rgba(255, 255, 255, .72); }

/* Okuma ilerleme çizgisi -------------------------------------------------- */

.kbr-ilerleme {
	position: fixed; top: 0; left: 0; right: 0; height: 3px;
	z-index: 100; background: transparent; pointer-events: none;
}
.kbr-ilerleme span {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--kbr-altin), var(--kbr-yaprak));
	transition: width .1s linear;
}

/* Yukarı çık butonu ------------------------------------------------------- */

.kbr-yukari {
	position: fixed; right: 20px; bottom: 88px; z-index: 80;
	width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--kbr-koyu); color: #fff;
	border: 1px solid rgba(255, 255, 255, .18);
	cursor: pointer; padding: 0;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
	box-shadow: var(--kbr-golge-yumusak);
}
.kbr-yukari.kbr-gorunur { opacity: 1; visibility: visible; transform: none; }
.kbr-yukari:hover { background: var(--kbr-altin); color: #16212b; }

/* Sabit başlık ------------------------------------------------------------ */

.kbr-efekt-hafif .kbr-header-ic,
.kbr-efekt-belirgin .kbr-header-ic { transition: min-height .3s ease; }
.kbr-efekt-hafif .kbr-header.kbr-sabit .kbr-header-ic,
.kbr-efekt-belirgin .kbr-header.kbr-sabit .kbr-header-ic { min-height: 68px; }
.kbr-efekt-hafif .kbr-logo img,
.kbr-efekt-belirgin .kbr-logo img { transition: height .3s ease; }

/* Menüde altın alt çizgi soldan çıksın */
.kbr-efekt-hafif .kbr-menu-liste > li > a,
.kbr-efekt-belirgin .kbr-menu-liste > li > a { position: relative; }
.kbr-efekt-hafif .kbr-menu-liste > li > a::after,
.kbr-efekt-belirgin .kbr-menu-liste > li > a::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
	background: var(--kbr-altin);
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.kbr-efekt-hafif .kbr-menu-liste > li > a:hover::after,
.kbr-efekt-belirgin .kbr-menu-liste > li > a:hover::after,
.kbr-efekt-hafif .kbr-menu-liste .kbr-aktif > a::after,
.kbr-efekt-belirgin .kbr-menu-liste .kbr-aktif > a::after { transform: scaleX(1); }
.kbr-menu-liste .kbr-aktif > a { color: var(--kbr-altin); }

/* Tablet / mobil ---------------------------------------------------------- */

@media (max-width: 1024px) {
	.kbr-rakam-izgara { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
	.kbr-rakam:nth-child(2) { border-right: 0; }
	/* Mobil menüde alt çizgi gerekmez */
	.kbr-efekt-hafif .kbr-menu-liste > li > a::after,
	.kbr-efekt-belirgin .kbr-menu-liste > li > a::after { display: none; }
}

@media (max-width: 768px) {
	.kbr-rakam-izgara { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
	.kbr-rakam { padding: 0 12px; }
	.kbr-yukari { bottom: 124px; right: 16px; width: 42px; height: 42px; }
	/* Mobilde ağır efektler kapalı */
	.kbr-yapraklar { display: none; }
	.kbr-efekt-belirgin .kbr-hero-gorsel { transform: none; }
	.kbr-kenburns .kbr-hero-gorsel .kbr-hero-img { animation: none; }
}

/* Erişilebilirlik --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kbr-giris-efekti .kbr-goster,
	.kbr-giris-efekti .kbr-ikili-yazi,
	.kbr-giris-efekti .kbr-ikili-gorsel { opacity: 1 !important; transform: none !important; }
	.kbr-yapraklar { display: none; }
	.kbr-kenburns .kbr-hero-gorsel .kbr-hero-img,
	.kbr-efekt-belirgin .kbr-hero::before,
	.kbr-efekt-belirgin .kbr-hero-kart,
	.kbr-efekt-belirgin .kbr-wa::before { animation: none !important; }
	.kbr-efekt-belirgin .kbr-hero-gorsel { transform: none !important; }
}

/* ==========================================================================
   1.2.2 — dar ekranda yatay kayma

   İkili düzenlerde yazı ve görsel, görünür olmadan önce 24 piksel yana
   kaydırılmış hâlde bekliyor. Dar ekranda bu kayma sayfayı birkaç piksel
   yatay kaydırılabilir yapıyordu. Tablet ve telefonda giriş animasyonu
   yalnızca dikey çalışıyor; zaten tek sütuna indiği için yanlardan gelme
   efektinin görsel karşılığı da yok.
   ========================================================================== */

@media (max-width: 1024px) {
	.kbr-giris-efekti .kbr-ikili-yazi,
	.kbr-giris-efekti .kbr-ikili-gorsel,
	.kbr-giris-efekti .kbr-ikili-ters .kbr-ikili-yazi,
	.kbr-giris-efekti .kbr-ikili-ters .kbr-ikili-gorsel {
		transform: translateY(26px);
	}
	.kbr-giris-efekti .kbr-ikili-yazi.kbr-gorunur,
	.kbr-giris-efekti .kbr-ikili-gorsel.kbr-gorunur { transform: none; }

	/* Liste maddeleri de yandan değil, yalnızca soluk açılsın */
	@keyframes kbr-madde {
		from { opacity: 0; transform: translateY(6px); }
		to { opacity: 1; transform: none; }
	}
}