/* ============================================================================
   Mesleki Eğitim Merkezi — SIKÇA SORULAN SORULAR
   Kaynak tasarım: dc-mem/"Sikca Sorulan Sorular.dc.html"

   PORT KURALI (ana sayfa portuyla aynı)
   - Statik görsel/yerleşim stilleri şablonda INLINE durur.
   - Bu dosya YALNIZCA responsive / hover / durum / JS'e bağlı olanı taşır.
   - Kırılım tasarımın Component script'iyle birebir:
       cols : <900 → 1  |  ≥900 → repeat(2,minmax(0,1fr))

   ÖZGÜLLÜK NOTU (hello-elementor + Elementor Kit bu dosyadan SONRA yüklenir)
   - Tema `button{white-space:nowrap}` uzun soruyu tek satıra sıkıştırıp
     kutudan taşırıyordu → `white-space:normal` (0,2,0) ile geri alınır.
   - Tema `button:hover/:focus{background:#c36}` (0,2,0) → akordeon butonunun
     hover/focus'u AÇIKÇA (0,3,0) yeniden yazılır, yoksa pembeleşir.
   ========================================================================== */


/* === 1. KATEGORİ ÇİPLERİ =================================================
   Çipler gerçek <a> bağlantısıdır (JS'siz filtre) → seçili durum ARIA'da
   `aria-current="page"` ile işaretlenir. hover.css'teki `.mem-chip`
   `[aria-pressed]` varyantı buton içindir; burada karşılığını veriyoruz.
   ========================================================================== */
.mem-app .mem-faq-chip { text-decoration: none; }

.mem-app .mem-faq-chip[aria-current="page"] {
	background: var(--mem-blue);
	border-color: var(--mem-blue);
	color: #fff;
}
.mem-app .mem-faq-chip[aria-current="page"]:hover,
.mem-app .mem-faq-chip[aria-current="page"]:focus {
	background: var(--mem-blue-dark);
	border-color: var(--mem-blue-dark);
	color: #fff;
}
/* Dar ekranda uzun etiket kırpılmasın (çip satırı sarmalı). */
@media (max-width: 420px) {
	.mem-app .mem-faq-chip { white-space: normal; height: auto; min-height: 42px; padding-block: 8px; }
}


/* === 2. YOL GÖSTERGESİ =================================================== */
.mem-app .mem-faq-crumbs a { color: var(--mem-blue); }
.mem-app .mem-faq-crumbs a:hover,
.mem-app .mem-faq-crumbs a:focus { color: var(--mem-blue-dark); text-decoration: underline; }


/* === 3. IZGARA =========================================================== */
.mem-app .mem-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 24px;
	align-items: start;
}
/* Izgara öğesi kendi min-content'inden taşmasın. */
.mem-app .mem-faq-grid > * { min-width: 0; }

@media (min-width: 900px) {
	.mem-app .mem-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* === 4. SORU KUTUSU ======================================================
   TÜM ÖĞELER KAPALI başlar (JS kapatır). Hiçbir öğeye `is-open` verilmez —
   ızgarada açık başlayan öğe kutu yüksekliklerini şaşırtır.
   ========================================================================== */
.mem-app .mem-faq-item {
	border: 1px solid var(--mem-border);
	border-radius: 16px;
	background: var(--mem-surface);
	overflow: hidden;
}
/* Filtre dışı kalan soru — sunucu da JS de `hidden` niteliğini kullanır. */
.mem-app .mem-faq-item[hidden] { display: none !important; }

.mem-app .mem-faq-btn {
	width: 100%;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	color: var(--mem-text);
	/* Tema `button{white-space:nowrap}` mobilde uzun soruyu kırpıyordu. */
	white-space: normal;
	transition: background-color var(--mem-dur-fast) var(--mem-ease);
}
.mem-app .mem-faq-btn:hover,
.mem-app .mem-faq-btn:focus {
	background-color: var(--mem-surface-alt);
	color: var(--mem-text);
	border-color: transparent;
}

/* İşaret: kapalıyken "+", açıkken "−" (U+2212) — metni core/accordion.js yazar. */
.mem-app .mem-faq-sign {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: var(--mem-r-pill);
	background: var(--mem-tint);
	color: var(--mem-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
}

.mem-app .mem-faq-panel {
	padding: 0 20px 20px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mem-text-muted);
}
/* Panel gizleme YALNIZCA `hidden` ile olur (inline display kullanılmaz);
   base.css §7.9 zırhı bunu `!important` ile garanti eder. */
.mem-app .mem-faq-panel[hidden] { display: none; }


/* === 5. BOŞ DURUM ======================================================== */
.mem-app .mem-faq-empty {
	margin: 0;
	padding: 26px 22px;
	border: 1px dashed var(--mem-border);
	border-radius: 16px;
	background: var(--mem-surface-alt);
	font-size: 15px;
	line-height: 1.65;
	color: var(--mem-text-muted);
}
.mem-app .mem-faq-empty[hidden] { display: none; }


/* === 6. HAREKET AZALTMA ================================================== */
@media (prefers-reduced-motion: reduce) {
	.mem-app .mem-faq-btn { transition: none; }
}