/*
 * Ortak bileşenler: dua listesi, Arapça metin/panel, düğmeler, etiketler,
 * açılır SSS, alttan çıkan ses çubuğu, bildirim.
 * Kaynak: docs/mockups/yeni/d-karisim.html, d-kategori.html, d-anasayfa.html.
 */

/* ============ Bölüm başlığı + sağda bağlantı ============ */
.bh { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.75rem 0 1rem; }
.bh h2 { margin: 0; }
.bh a { font-size: .88rem; font-weight: 600; color: var(--vurgu); text-decoration: none; white-space: nowrap; }
.bh a:hover { text-decoration: underline; }

/* ============ Dua listesi (tek görsel dil: gölgeli beyaz kutu + çizgili satırlar) ============ */
.cards {
	list-style: none; margin: 0; padding: 0;
	background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
}
.cards li + li { border-top: 1px solid var(--line); }
.cards li[hidden] { display: none; }
.card {
	display: grid; grid-template-columns: 1fr auto; align-items: start; align-content: start;
	gap: .35rem 1rem; height: 100%; text-decoration: none; padding: 1.1rem 1.25rem;
	transition: background .15s;
}
.card:hover { background: var(--hover); }
.card .t { display: block; font-weight: 700; font-size: 1rem; line-height: 1.35; color: var(--baslik); }
.card .m {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
	font-size: .88rem; color: var(--ink-2); margin: .15rem 0 0;
}
.card .r {
	grid-row: 2; justify-self: start; margin-top: .35rem;
	font-size: .74rem; font-weight: 600; color: var(--gold-text); background: var(--gold-tint);
	padding: .15rem .6rem; border-radius: 10px;  /* uzun etiket iki satıra kırılırsa da düzgün dursun */
}
.card > svg { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--muted); }
.card:hover > svg { color: var(--gold-text); }
.card .one {
	display: inline-block; vertical-align: .1em; margin-left: .45rem; font-style: normal;
	font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #fff; background: var(--green); padding: .1rem .45rem; border-radius: 999px;
}
/* Okunan ayet işareti (dua cümlesi olmayan kayıtlar) */
.card .ayet {
	display: inline-block; vertical-align: .1em; margin-left: .45rem; font-style: normal;
	font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--gold-text); border: 1px solid var(--gold-soft); padding: 0 .45rem; border-radius: 999px;
}

/* ============ Arapça metin ============ */
.ar { font-family: var(--arabic); direction: rtl; margin: 0; text-wrap: balance; }
.ar .son { white-space: nowrap; }          /* son kelime + ayet numarası birlikte kırılır */
.ayah { color: var(--gold-bright); font-size: .62em; opacity: .85; white-space: nowrap; }

/* Koyu yeşil Arapça panel (dua kartının üstü, öne çıkan kartlar) */
.ar-panel {
	position: relative; color: #F4EEDF; text-align: center;
	background: radial-gradient(ellipse at 50% 30%, #15463E 0, var(--green-deep) 75%);
}
.ar-panel::after {
	content: ""; position: absolute; inset: 8px; pointer-events: none;
	border: 1px solid rgba(233, 221, 191, .22); border-radius: 10px;
}
.ar-panel .ar { position: relative; }

/* ============ Düğmeler ============ */
.tbtn {
	display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
	min-height: 2.75rem; padding: 0 1rem; border-radius: 10px;
	font-size: .88rem; font-weight: 600; color: var(--ink-2);
	background: var(--card); border: 1px solid var(--line); text-decoration: none;
}
.tbtn:hover { border-color: var(--gold); }
.tbtn.primary { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.tbtn.primary:hover { background: var(--green); }

/* ============ Büyük arama kutusu (anasayfa, arama, 404) ============ */
.big-search{display:flex;align-items:center;gap:.6rem;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.4rem .4rem .4rem 1rem;box-shadow:var(--shadow);max-width:38rem;margin:0 auto;color:var(--muted);text-align:left}
.big-search:focus-within{border-color:var(--gold)}
.big-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1rem;color:var(--ink);height:2.75rem}
.big-search button{height:2.75rem;padding:0 1.25rem;border-radius:10px;background:var(--green-deep);color:#fff;font-weight:600;font-size:.92rem}
.big-search button:hover{background:var(--green)}
.big-search button{display:inline-flex;align-items:center;justify-content:center}
.big-search button svg{display:none}
@media (max-width:640px){
  .big-search{padding:.2rem .2rem .2rem .8rem;border-radius:12px;gap:.5rem}
  .big-search input{height:2.6rem}
  .big-search button{width:2.6rem;height:2.6rem;padding:0;border-radius:9px}
  .big-search button span{display:none}
  .big-search button svg{display:block;width:18px;height:18px}
}

/* ============ Uzun metin (bu dua hakkında, sabit sayfalar, rehber yazıları) ============ */
.prose p { margin: 0 0 1rem; color: var(--ink-2); font-size: 1.03rem; line-height: 1.8; }
.prose h3, .prose h4 { font-family: var(--display); font-weight: 600; color: var(--baslik); margin: 1.6rem 0 .6rem; line-height: 1.2; }
.prose h3 { font-size: 1.45rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; color: var(--ink-2); line-height: 1.8; }
.prose blockquote { margin: 1.2rem 0; padding-left: 1rem; border-left: 3px solid var(--gold-soft); color: var(--vurgu); font-style: italic; }
.prose a { color: var(--vurgu); text-decoration-color: var(--gold-soft); text-underline-offset: 3px; }
/* Yazı içindeki [dua] kartı: .prose ul girintisini ve satır aralığını almasın */
.prose .cards { margin: 1.25rem 0 1.5rem; padding: 0; line-height: 1.5; }

/* ============ Yazı kartları (Rehber; fotoğrafsız) ============ */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.guide{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:1.6rem 1.5rem 1.25rem;border:1px solid transparent;transition:transform .15s,border-color .15s}
.guide:hover{transform:translateY(-2px);border-color:var(--gold-soft)}
.guide .c{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text)}
.guide .t{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.18;color:var(--baslik);margin:.4rem 0 .5rem}
.guide .d{font-size:.9rem;color:var(--ink-2);margin-bottom:1.25rem}
.guide .more{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);font-size:.86rem;font-weight:600;color:var(--vurgu)}
.guide:hover .more{color:var(--gold-text)}
@media (max-width:960px){.guides{grid-template-columns:1fr}}

/* ============ Etiket bağlantıları ("Diğer durumlar" vb.) ============ */
.others { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.others a {
	display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.05rem;
	text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px;
	font-size: .88rem; font-weight: 500; color: var(--ink-2);
}
.others a:hover { border-color: var(--gold); }
.others a.all { border-color: transparent; background: none; color: var(--vurgu); font-weight: 600; padding: 0 .5rem; }
.others a.all:hover { text-decoration: underline; }

/* ============ Açılır SSS ============ */
.faq { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 3.75rem; padding: .9rem 1.25rem; font-weight: 600; font-size: .98rem;
	color: var(--baslik); cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ""; width: .6rem; height: .6rem; flex: none;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .cevap { padding: 0 1.25rem 1.1rem; color: var(--ink-2); font-size: .95rem; }
.faq .cevap p { margin: 0 0 .6rem; }

/* ============ Alttan çıkan ses çubuğu ============ */
.audio {
	position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 30;
	width: min(40rem, calc(100% - 2rem));
	display: flex; align-items: center; gap: .9rem;
	background: var(--green-deep); color: #fff; border-radius: 16px;
	padding: .55rem 1rem .55rem .55rem; box-shadow: 0 10px 30px rgba(12, 46, 41, .3);
	transform: translate(-50%, calc(100% + 2rem)); visibility: hidden;
	transition: transform .25s ease, visibility .25s;
}
.audio.open { transform: translate(-50%, 0); visibility: visible; }
body.audio-open .site-footer { padding-bottom: 5.5rem; }
.audio .play {
	width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--gold); color: #fff;
	display: grid; place-items: center; flex: none;
}
.audio .play svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.audio .meta { min-width: 0; flex: none; max-width: 14rem; }
.audio .meta b { display: block; font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio .meta small { display: block; font-size: .74rem; color: #A9BDB6; }
.audio .track { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); position: relative; min-width: 3rem; cursor: pointer; }
.audio .track i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold-soft); border-radius: 4px; }
.audio .time { font-size: .76rem; color: #A9BDB6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.audio .rep, .audio .close { width: 2.75rem; height: 2.75rem; border-radius: 10px; display: grid; place-items: center; color: #A9BDB6; flex: none; }
.audio .rep[aria-pressed="true"] { color: #E9DDBF; background: rgba(233, 221, 191, .12); }
.audio .close:hover { color: #fff; }

/* ============ Bildirim (kopyalandı vb.) ============ */
.toast {
	position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); z-index: 60;
	transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
	background: var(--green-deep); color: #fff; padding: .55rem 1rem; border-radius: 10px; font-size: .88rem;
	transition: .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
	.card { padding: .95rem 1.1rem; gap: .35rem .75rem; }
	.audio .meta, .audio .time { display: none; }
}

/* Arama kutularında belirgin klavye odağı (girdi kendi çerçevesini kapatıyor) */
.search:focus-within, .big-search:focus-within { box-shadow: 0 0 0 2px var(--gold); }

/* ============ Dualarım: kişisel not (Dualarım satırları ve dua sayfası) ============ */
.dua-not { display: grid; gap: .4rem; }
.dua-not-metin {
	margin: 0; padding: .55rem .8rem; border-left: 3px solid var(--gold-soft); border-radius: 0 8px 8px 0;
	background: var(--gold-tint); color: var(--ink); font-size: .9rem; line-height: 1.5; font-style: italic;
	white-space: pre-line; overflow-wrap: anywhere;
}
.dua-not-ac {
	justify-self: start; padding: .3rem .1rem; border: 0; background: none; cursor: pointer;
	color: var(--vurgu); font: inherit; font-size: .85rem; font-weight: 600;
	text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px;
}
.dua-not-ac:hover { text-decoration-color: currentColor; }
.dua-not-etiket { font-size: .82rem; font-weight: 700; color: var(--muted); }
.dua-not-kutu {
	width: 100%; box-sizing: border-box; min-height: 4.5rem; padding: .6rem .8rem; resize: vertical;
	border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem;
}
.dua-not-kutu:focus { outline: 2px solid var(--vurgu); outline-offset: 1px; border-color: transparent; }
.dua-not-alt { display: flex; align-items: center; gap: .75rem; }
.dua-not-sayac { margin-right: auto; font-size: .78rem; color: var(--muted); }
.dua-not-sil { border: 0; background: none; cursor: pointer; color: var(--hata); font: inherit; font-size: .85rem; font-weight: 600; }
.dua-not-bitti { min-height: 2.3rem; padding: 0 1rem; }

/* Dualarım satırı: not, kartın altında tam genişlikte */
.kd-dualarim .dualarim-liste li { flex-wrap: wrap; }
.kd-dualarim .dualarim-liste .dua-not { flex: 1 0 100%; padding: 0 1.25rem .9rem; background: var(--card); }
.kd-dualarim .dualarim-liste .dua-not:not(.dolu) { padding-top: 0; }

/* Dua sayfası: araç düğmelerinin altında */
.dua .dua-notum { padding: .9rem 2rem 1.1rem; background: var(--arac-zemin); border-top: 1px solid var(--line); }
.dua .dua-notum[hidden] { display: none; }
@media (max-width: 640px) {
	.dua .dua-notum { padding: .8rem 1.1rem 1rem; }
	.kd-dualarim .dualarim-liste .dua-not { padding: 0 1rem .8rem; }
}