/* ============================================================
   Kalite Belgelerimiz — Kart Grid + Hover + Lightbox
   Marka renkleri: mor #5E1155, teal #0F7B6C, amber #F5A524
   ============================================================ */

.ay-belge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    margin: 24px 0;
}

.ay-belge-karti {
    flex: 0 1 250px;
    max-width: 250px;
    background: #ffffff;
    border: 1px solid #EADCE6;
    border-radius: 16px;
    padding: 20px 20px 18px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(94, 17, 85, 0.06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: default;
    box-sizing: border-box;
}

.ay-belge-karti[tabindex] {
    cursor: pointer;
}

.ay-belge-karti:hover,
.ay-belge-karti:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(94, 17, 85, 0.16);
    border-color: #D9BFE0;
    outline: none;
}

.ay-belge-ikon {
    width: 68px;
    height: 68px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F9F4F8, #F3E9F1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform .25s ease;
}
.ay-belge-karti:hover .ay-belge-ikon {
    transform: scale(1.08);
}
.ay-belge-ikon img {
    max-width: 68%;
    max-height: 68%;
    object-fit: contain;
}

.ay-belge-baslik {
    margin: 0 0 5px;
    font-size: 1.0em;
    font-weight: 800;
    color: #5E1155;
    line-height: 1.35;
}

.ay-belge-aciklama {
    margin: 0;
    font-size: 0.906em;
    color: #6B5A65;
    line-height: 1.55;
}

.ay-belge-buyut-ipucu {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.75em;
    font-weight: 700;
    color: #0F7B6C;
    background: #F3FAF8;
    border: 1px solid #CFE9E4;
    border-radius: 40px;
    padding: 5px 12px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
.ay-belge-karti:hover .ay-belge-buyut-ipucu,
.ay-belge-karti:focus-visible .ay-belge-buyut-ipucu {
    opacity: 1;
    transform: translateY(0);
}

/* --- Lightbox --- */
.ay-belge-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 15, 26, 0.88);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}
.ay-belge-lightbox.ay-acik {
    display: flex;
}
.ay-belge-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ay-belge-lightbox-kapat {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s ease, transform .3s ease, border-color .25s ease;
}
.ay-belge-lightbox-kapat:hover,
.ay-belge-lightbox-kapat:focus-visible {
    background: #5E1155;
    border-color: #5E1155;
    transform: rotate(90deg) scale(1.12);
    outline: none;
}

@media (max-width: 480px) {
    .ay-belge-grid { gap: 14px; }
    .ay-belge-karti { flex-basis: calc(50% - 7px); max-width: calc(50% - 7px); }
    .ay-belge-karti { padding: 22px 14px 18px; }
}

/* ==========================================================
 * KAYAN BAR — [akilliyem_kalite_bar]
 * Author: Adem YÜCEYURT
 * ======================================================== */
.ay-kbar {
	--ay-kb-sure: 30s;
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	box-sizing: border-box;
	padding: var(--ay-kb-ic, 16px) 0;
	background: var(--ay-kb-zemin, #fff);
	border: 1px solid var(--ay-kb-kenar, #ede4eb);
	border-radius: var(--ay-kb-kose, 0);
	overflow: hidden;
}
.ay-kbar-etiket {
	flex: none;
	padding: 0 4px 0 20px;
	font-size: calc(var(--ay-kb-boyut, 14px) + 1px);
	font-weight: 800;
	color: var(--ay-kb-yazi, #3a2a36);
	white-space: nowrap;
}
.ay-kbar-pencere {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* 1.0.1 — SAĞDAN SOLA DİLLERDE BOŞ BAŞLAMA DÜZELTMESİ:
	   Şerit LTR olsa da pencere sayfanın yönünü (rtl) alıyordu; RTL bir
	   blokta içerik SAĞ kenara yaslandığı için şerit sağdan hizalanıyor,
	   kayma ise soldan hesaplandığından bar önce boş görünüyor, belgeler
	   kenardan girip çıkıyor ve aralarda boşluk kalıyordu. Pencere de
	   LTR kurulur; yalnızca metinler kendi dillerinde okunur (aşağıda). */
	direction: ltr;
}
.ay-kbar--solma .ay-kbar-pencere {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ay-kbar-serit {
	display: flex;
	flex-wrap: nowrap; 
	width: max-content;
	/* HAZIR OLANA KADAR ANİMASYON YOK (sadece "paused" değil!):
	   Önceki denemede yalnızca animation-play-state: paused kullanılmıştı;
	   ama "saga" (ters) yönde, duraklatılmış animasyon yine de o karede
	   dondurulmuş kalıyordu: reverse yönün başlangıç karesi CSS'te
	   translate3d(-50%,0,0), yani şerit kendi genişliğinin YARISI kadar
	   sola kaymış halde donuyordu. İçerik pencereyi tam doldurmuyorsa (az
	   sayıda belge varsa) bu, ekranda "tek kutu + koca boşluk" olarak
	   görünüyordu — ekran görüntüsünde görüldüğü gibi.
	   Çözüm: hazır olmadan önce animation'ı TAMAMEN kaldırıyoruz (yön
	   kuralları da devre dışı kalıyor, çünkü animation-name yok). Böylece
	   şerit, animasyonsuz DOĞAL/kaymamış haliyle -yani tüm belgeler baştan
	   itibaren sırayla ve dolu şekilde- görünür. JS gerçek hızı hesaplayıp
	   ay-kbar--hazir sınıfını ekleyince animasyon (doğru yönde) devreye
	   girer; artık akış zaten dolu bir kareden başladığı için hiçbir
	   boş/garip an olmaz. */
	animation: none;
	will-change: transform;
	/* RTL DÜZELTMESİ: Şerit, sayfa yönünden (dir="rtl") bağımsız olarak
	   hep soldan hizalı / LTR mantığıyla dizilsin. Aksi halde flex kutusu
	   Arapça gibi RTL sayfalarda sağdan hizalanıyor, ama animasyon yine de
	   fiziksel olarak sola kaydığı için sağ tarafta giderek büyüyen bir
	   boşluk oluşuyor ve bant kusursuz döngü yapamıyor. */
	direction: ltr;
}
.ay-kbar--hazir .ay-kbar-serit {
	animation: ay-kbar-kay var(--ay-kb-sure) linear infinite;
}
.ay-kbar--saga .ay-kbar-serit { animation-direction: reverse; }

/* OTOMATİK YÖN — DOM'a göre (PHP is_rtl() DEĞİL):
   ".ay-kbar--oto" sınıfı basıldığında yön, sunucunun tahmininden değil,
   tarayıcının o an sayfayı GERÇEKTEN hangi yönde gösterdiğinden okunur.
   ":dir(rtl)" öğenin devreye giren (inherited/otomatik dahil) etkin
   yönünü kontrol eder; bir çeviri eklentisi <html> veya üst bir kapsayıcıya
   yalnızca görsel olarak dir="rtl" eklese bile bu kural yakalar.
   Eski tarayıcılar için [dir="rtl"] ile de aynı sonucu yedekliyoruz. */
.ay-kbar--oto:dir(rtl) .ay-kbar-serit,
.ay-kbar--oto[dir="rtl"] .ay-kbar-serit,
[dir="rtl"] .ay-kbar--oto .ay-kbar-serit {
	animation-direction: reverse;
}

/* ASIL KARAR MEKANİZMASI: JS (kalite-belgeleri.js / ayGercektenRTLmi).
   Google Translate gibi araçlar dir="rtl" YAZMADIĞI için yukarıdaki salt
   CSS kuralı çoğu zaman eşleşmez; JS, <html> üzerindeki class/lang/computed
   direction sinyallerini kontrol edip bu sınıfı ekliyor/kaldırıyor. */
.ay-kbar--oto-ters .ay-kbar-serit {
	animation-direction: reverse;
}
.ay-kbar--durdur .ay-kbar-pencere:hover .ay-kbar-serit,
.ay-kbar-pencere:focus-within .ay-kbar-serit { animation-play-state: paused; }

@keyframes ay-kbar-kay { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-50%, 0, 0); } 
}

.ay-kbar-grup {
	display: flex;
	align-items: stretch; 
	flex-shrink: 0; 
	gap: var(--ay-kb-bosluk, 28px);
	margin: 0;
	padding: 0 calc(var(--ay-kb-bosluk, 28px) / 2);
	list-style: none;
}

/* KUTU İÇİ DİZİLİM DÜZELTİLDİ: Alt alta, ortalanmış ve metne sarılı genişlik */
.ay-kbar-kutu {
	display: flex;
	flex-direction: column; /* YENİ: Görseli üste, yazıyı alta alır */
	align-items: center; /* YENİ: İçerikleri yatayda ortalar */
	justify-content: center; /* YENİ: İçerikleri dikeyde ortalar */
	text-align: center; /* YENİ: Metinleri merkeze hizalar */
	gap: 12px;
	flex: none;
	margin: 0;
	padding: 18px 24px; /* YENİ: Alt alta dizilim için biraz daha geniş dolgu */
	box-sizing: border-box; 
	height: auto; 
	width: max-content; /* YENİ: Kutu genişliğini doğrudan içindeki yazıya/görsele göre sarar */
	min-width: 180px; /* Çok kısa metinlerde kutunun aşırı dar kalmasını önler */
	background: var(--ay-kb-kutu-zemin, #fff);
	border: 1px solid var(--ay-kb-kutu-kenar, #efe7ed);
	border-radius: var(--ay-kb-kutu-kose, 12px);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ay-kbar-kutu[data-belge-gorsel] { cursor: zoom-in; }
.ay-kbar-kutu[data-belge-gorsel]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(58, 42, 54, .10);
	border-color: color-mix(in srgb, var(--ay-kb-yazi, #3a2a36) 25%, transparent);
}
.ay-kbar-kutu:focus-visible { outline: 3px solid color-mix(in srgb, var(--ay-kb-yazi, #3a2a36) 45%, transparent); outline-offset: 2px; }

.ay-kbar-gorsel {
	display: block;
	width: auto;
	height: var(--ay-kb-gorsel, 56px);
	max-width: calc(var(--ay-kb-gorsel, 56px) * 2.2);
	object-fit: contain;
}

.ay-kbar-metin { 
	/* Metin, yazıldığı dile göre yön alır (Arapça/Farsça sağdan sola,
	   diğerleri soldan sağa) — şeridin LTR yerleşiminden bağımsız. */
	unicode-bidi: plaintext;
	display: flex; 
	flex-direction: column; 
	align-items: center; /* YENİ: Metin satırlarını da kendi içinde ortalar */
	gap: 4px; 
	max-width: 100%; /* YENİ: Eski 240px genişlik sınırını kaldırıp yazıyı serbest bıraktık */
	line-height: 1.35; 
}

.ay-kbar-baslik { 
	unicode-bidi: plaintext;
	font-size: var(--ay-kb-boyut, 14px); 
	font-weight: 700; 
	color: var(--ay-kb-yazi, #3a2a36); 
	white-space: nowrap; /* YENİ: Metnin alt satıra inmemesini ve kutuyu doğal şekilde genişletmesini sağlar */
}

.ay-kbar-aciklama { 
	unicode-bidi: plaintext;
	font-size: calc(var(--ay-kb-boyut, 14px) - 2px); 
	color: var(--ay-kb-aciklama, #7a6e76); 
	white-space: nowrap; /* Varsa açıklamayı da tek satırda tutar */
}

@media (max-width: 640px) {
	.ay-kbar-etiket { display: none; }
}

/* Hareketi azaltmayı seçen ziyaretçiler: kayma yok, elle kaydırılabilir şerit */
@media (prefers-reduced-motion: reduce) {
	.ay-kbar-serit { animation: none; }
	.ay-kbar-pencere { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.ay-kbar-grup[aria-hidden="true"] { display: none; }
}