/* ============================================
   Menu Modernizasyonu FAZ 2 - scroll-reveal animasyonu
   + urun kartlarinda hover glow/gradyan.

   DIKKAT: Tum renkler --theme-primary / --theme-accent
   CSS degiskenlerinden geliyor - bu degiskenler HER
   temanin HER paletinde (maroon/red/navy/green/dark/
   beyaz vb.) zaten tanimli, o yuzden bu dosya hangi
   restoran hangi paleti secerse secsin OTOMATIK uyumlu
   calisir, tek bir renk burada SABIT yazilmadi.

   3 temanin de urun karti siniflari (qm-/cm-/ff-
   product-card) burada TEK yerden, ayni mantikla ele
   aliniyor - kod tekrari yok.
   ============================================ */

.qm-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.qm-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.qm-product-card,
.cm-product-card,
.ff-product-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
}
.qm-product-card:hover,
.cm-product-card:hover,
.ff-product-card:hover {
	transform: translateY(-5px);
	/* Eski tarayicilar (color-mix() desteklemeyen) icin sade bir
	   yedek golge - destekleyenler bir alt satirdaki palet-uyumlu
	   versiyonu kullanir (CSS gecersiz degeri sessizce yok sayar). */
	box-shadow: 0 14px 28px -12px rgba(0,0,0,0.28);
	box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--theme-primary, #333) 45%, transparent);
}

/* Ince, paletle uyumlu bir gradyan cerceve - varsayilanda
   gorunmez (opacity:0), sadece hover'da beliriyor. Gercek
   bir border yerine ::after ile yapiliyor ki kartin kendi
   border-radius'unu/ic padding'ini hic etkilemesin. */
.qm-product-card::after,
.cm-product-card::after,
.ff-product-card::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, var(--theme-primary, #333), var(--theme-accent, #999));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.qm-product-card:hover::after,
.cm-product-card:hover::after,
.ff-product-card:hover::after {
	opacity: 1;
}

/* Bolum basliklarinda hafif bir "canlanma" - sayfa ilk
   acildiginda degil, kullanici o bolume kaydirdikca. */
.qm-section-title.qm-reveal,
.cm-section-title.qm-reveal,
.ff-section-title.qm-reveal {
	transform: translateY(10px);
}

/* ERISILEBILIRLIK (roadmap'te acikca istendi): kullanicinin
   isletim sisteminde "hareketi azalt" tercihi acik olabilir
   (bulanti/migren gibi sebeplerle) - boyle bir tercih
   algilanirsa TUM animasyonlar/geciler DEVRE DISI kalir,
   icerik direkt nihai (gorunur) halinde belirir. */
@media (prefers-reduced-motion: reduce) {
	.qm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.qm-product-card,
	.cm-product-card,
	.ff-product-card {
		transition: none;
	}
	.qm-product-card:hover,
	.cm-product-card:hover,
	.ff-product-card:hover {
		transform: none;
	}
}

/* ---- "Powered by QRSofram" markalama (kullanici talebi, ONAYLANDI) ----
   3 temanin (cafe-modern/restaurant-classic/fast-food) TUMU bu dosyayi
   yukledigi icin stil TEK yerden tanimlaniyor - her tema kendi renk
   paletini (--ink/--ink-soft benzeri degiskenleri) tema CSS'lerinde
   tanimliyor, burada JENERIK/tema-bagimsiz sabit renkler kullanildi ki
   HANGI temada olursa olsun okunakli kalsin. */
.qm-powered-by {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	max-width: 220px; margin: 32px auto 24px; padding: 10px 18px;
	border-radius: 999px; background: rgba(0,0,0,0.04);
	text-decoration: none; transition: background 0.15s ease, transform 0.15s ease;
}
.qm-powered-by:hover { background: rgba(0,0,0,0.08); transform: translateY(-1px); }
.qm-powered-by-label { font-size: 11px; color: #8a8a8a; }
.qm-powered-by-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.qm-powered-by-name { font-size: 13px; font-weight: 700; color: #333; }