/*
 * Temel sıfırlama, tipografi ve sayfa iskeleti (üst menü, alt bilgi, gezinme yolu).
 * Kaynak: docs/mockups/yeni/d-kategori.html, d-anasayfa.html.
 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.7;
	/* kısa sayfalarda alt bilgi ekranın dibinde kalsın */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}
body > main { flex: 1 0 auto; }
a { color: inherit; }
button, select { font: inherit; color: inherit; cursor: pointer; }
button { background: none; border: 0; padding: 0; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
svg.i {
	width: 18px; height: 18px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.gecis-baglantisi {
	position: absolute; left: 1rem; top: -3rem; z-index: 100;
	background: var(--green-deep); color: #fff; padding: .6rem 1rem; border-radius: 8px;
	text-decoration: none; transition: top .15s;
}
.gecis-baglantisi:focus { top: 1rem; }

/* ============ Üst menü ============ */
.site-header {
	position: sticky; top: 0; z-index: 20;
	background: var(--ust-zemin);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
body.admin-bar .site-header { top: 32px; }
.site-header .bar {
	max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem;
	height: var(--header-h); display: flex; align-items: center; gap: 1.5rem;
}
.logo {
	display: flex; align-items: center; gap: .55rem;
	font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1;
	color: var(--baslik); text-decoration: none;
}
.logo .mark { width: 2.4rem; height: 2.4rem; flex: none; display: block; }
.site-header .search {
	flex: 1; max-width: 40rem; margin: 0 auto;
	display: flex; align-items: center; gap: .55rem;
	background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
	padding: .55rem .9rem; color: var(--muted);
}
.site-header .search input {
	border: 0; outline: 0; background: transparent; font: inherit; font-size: 1rem;
	width: 100%; min-width: 0; color: var(--ink);
}
.site-header .search:focus-within { border-color: var(--gold); background: var(--card); }
.nav-kap { margin-left: auto; }
.nav { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav a {
	display: block; white-space: nowrap; text-decoration: none; font-size: .9rem; font-weight: 500;
	color: var(--ink-2); padding: .5rem .75rem; border-radius: 8px;
}
.nav a:hover { background: var(--gold-tint); color: var(--baslik); }
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav a[aria-current] { background: var(--gold-tint); color: var(--baslik); font-weight: 600; }
.icon-btn {
	display: none; width: 2.75rem; height: 2.75rem; border-radius: 10px;
	place-items: center; margin-left: auto;
}
.icon-btn:hover { background: var(--gold-tint); }
.ara-btn { display: grid; margin-left: .25rem; color: var(--ink-2); }
.ara-btn[aria-expanded="true"] { background: var(--gold-tint); color: var(--baslik); }
.ara-btn + .icon-btn { margin-left: 0; }

/* Dualarım bağlantısı (kalp) + kayıt sayacı — her ekran genişliğinde görünür */
.dualarim-btn {
	position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
	border-radius: 10px; color: var(--ink-2); text-decoration: none;
}
.dualarim-btn:hover { background: var(--gold-tint); color: var(--baslik); }
.dualarim-btn .sayac {
	position: absolute; top: .2rem; right: .15rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
	border-radius: 999px; background: var(--green); color: #fff; font-size: .66rem; font-weight: 700;
	line-height: 1.1rem; text-align: center;
}
.dualarim-btn .sayac[hidden] { display: none; }

/* Arama şeridi (üst çubuğun altında açılır) */
.arama-seridi { display: none; border-top: 1px solid var(--line); background: var(--card); }
.arama-seridi.open { display: block; }
.arama-seridi .in { max-width: var(--wrap); margin: 0 auto; padding: .75rem 1.25rem; }
.drawer { display: none; border-top: 1px solid var(--line); padding: .75rem 1rem 1rem; background: var(--card); }
.drawer.open { display: block; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a {
	display: flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem;
	text-decoration: none; font-weight: 500; border-radius: 8px;
}
.drawer .current-menu-item > a { background: var(--gold-tint); color: var(--baslik); }

/* ============ Alt menüler ============ */
.nav > li { position: relative; display: flex; align-items: center; }
.alt-ac {
	display: inline-grid; place-items: center; width: 1.6rem; height: 2.25rem; margin-left: -.45rem;
	border-radius: 6px; color: var(--muted);
}
.alt-ac:hover { color: var(--baslik); }
.alt-ac::before {
	content: ""; width: .42rem; height: .42rem; margin-top: -.2rem;
	border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg);
	transition: transform .15s;
}
.acik > .alt-ac::before { transform: rotate(-135deg); margin-top: .2rem; }
.nav .sub-menu {
	position: absolute; top: calc(100% + .35rem); left: 0; z-index: 30; min-width: 14rem;
	list-style: none; margin: 0; padding: .4rem; background: var(--card);
	border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(12, 46, 41, .12);
	opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s;
}
.nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.5rem; height: .5rem; } /* fare geçişinde kapanmasın */
.nav > li.acik > .sub-menu,
.nav > li:hover > .sub-menu,
.nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .sub-menu a { display: block; padding: .55rem .75rem; border-radius: 8px; font-size: .88rem; white-space: nowrap; }
.nav .sub-menu li:last-child a[href$="/durumlar/"],
.nav .sub-menu li:last-child a[href$="/sureler/"] { color: var(--vurgu); font-weight: 600; }

.drawer li { position: relative; }
.drawer .alt-ac { position: absolute; right: 0; top: 0; width: 2.75rem; height: 2.75rem; margin: 0; }
.drawer .sub-menu { display: none; list-style: none; margin: 0 0 .4rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--gold-tint); }
.drawer .acik > .sub-menu { display: block; }
.drawer .sub-menu a { font-weight: 400; color: var(--ink-2); }

/* ============ Sayfa iskeleti ============ */
/* Not: WordPress <body>'ye "page" sınıfı ekler; bu yüzden içerik kabı .page değil .sayfa. */
.sayfa { max-width: var(--wrap-read); margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.crumbs ol {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; list-style: none; margin: 0; padding: 0;
	font-size: .84rem; color: var(--muted); /* baseline: bağlantıların iç boşluğu son öğeyi kaydırmasın */
}
.crumbs li + li::before { content: "›"; margin-right: .4rem; color: var(--gold); }
.crumbs a { display: inline-block; padding: .2rem 0; text-decoration: none; } /* dokunma alanı ≥24px */
.crumbs a:hover { color: var(--vurgu); }
.kicker {
	display: block; margin: 1.4rem 0 .5rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--gold-text); text-decoration: none;
}
a.kicker { padding: .15rem 0; } /* dokunma alanı ≥24px */
a.kicker:hover { text-decoration: underline; }
h1 {
	font-family: var(--display); font-weight: 600;
	font-size: clamp(2.3rem, 6vw, 3.2rem); line-height: 1.05;
	color: var(--baslik); margin: 0 0 1rem;
}
h2 {
	font-family: var(--display); font-weight: 600; font-size: 1.85rem; line-height: 1.15;
	color: var(--baslik); margin: 0 0 1rem;
}
.note { margin: .5rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }

/* ============ Alt bilgi (4 sütun) ============ */
.site-footer { background: var(--green-deep); color: #D9D3C3; margin-top: 3rem; }
.site-footer .in {
	max-width: var(--wrap); margin: 0 auto; padding: 3rem 1.25rem 2rem;
	display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1fr; gap: 2rem 2.5rem;
}
.site-footer .logo { color: #F4EEDF; }
.site-footer .logo-img { display: block; max-height: 2.6rem; width: auto; }
.fcol-marka p { margin: .9rem 0 0; font-size: .9rem; line-height: 1.65; color: #B7C6C0; max-width: 22rem; }
.site-footer .kaynak { list-style: none; margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; color: #A9BDB6; }
.site-footer .kaynak li + li { margin-top: .2rem; }
.site-footer .kaynak b { color: #D9D3C3; font-weight: 600; }
.site-footer h2 {
	margin: .35rem 0 .8rem; font-family: var(--sans); font-size: .72rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright);
}
.fcol ul { list-style: none; margin: 0; padding: 0; }
.fcol li a {
	display: inline-flex; align-items: center; min-height: 2.25rem;
	text-decoration: none; font-size: .9rem; color: #D9D3C3;
}
.fcol li a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold-bright); text-underline-offset: 3px; }
.site-footer .legal {
	max-width: var(--wrap); margin: 0 auto;
	padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, .08);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
	font-size: .8rem; color: #8FA19A;
}
.yukari { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; text-decoration: none; color: #B7C6C0; font-weight: 600; }
.yukari:hover { color: #fff; }

/* "Uygulamayı yükle" (mobil menü) — tarayıcı yükleme teklif edince görünür */
.yukle-btn {
	display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 2.75rem; margin-top: .6rem;
	border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--baslik);
	font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.yukle-btn:hover { border-color: var(--gold); }
.yukle-btn[hidden] { display: none; }

/* "Çerez tercihleri" (alt bilgi) — yalnızca Analytics açıkken, betik yüklenince görünür */
.cerez-tercih {
	margin-right: auto; min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .8rem; color: #B7C6C0; text-decoration: underline; text-underline-offset: 3px;
}
.cerez-tercih:hover { color: #fff; }
.cerez-tercih[hidden] { display: none; }

/* Çerez onay bandı: karar verilene kadar altta; "Reddet" ve "Kabul et" eşit görünürlükte */
.cerez-bandi {
	position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70;
	transform: translateX(-50%); width: min(44rem, calc(100vw - 2rem));
	display: flex; align-items: center; gap: .75rem 1.25rem; padding: 1rem 1.15rem;
	background: var(--card); color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: 0 10px 40px rgba(12, 46, 41, .22); font-size: .88rem; line-height: 1.55;
}
.cerez-bandi[hidden] { display: none; }
.cerez-bandi p { margin: 0; flex: 1; }
.cerez-bandi a { color: var(--vurgu); text-underline-offset: 3px; }
.cerez-dugmeler { display: flex; gap: .5rem; flex: none; }
.cerez-dugmeler .tbtn { min-width: 6.5rem; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600; background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.cerez-dugmeler .tbtn:hover { background: var(--green); border-color: var(--green); }
@media (max-width: 640px) {
	.cerez-bandi { flex-direction: column; align-items: stretch; bottom: calc(.5rem + env(safe-area-inset-bottom)); width: calc(100vw - 1rem); }
	.cerez-dugmeler .tbtn { flex: 1; }
}

/* ============ Uygulama yükleme şeridi (Android → Play, iPhone → Ana ekrana ekle; uygulama.js gösterir) ============ */
.yukle-seridi {
	position: fixed; left: 50%; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 65;
	transform: translateX(-50%); width: min(30rem, calc(100vw - 1rem));
	display: flex; align-items: center; gap: .75rem; padding: .7rem .6rem .7rem .75rem;
	background: var(--card); color: var(--ink-2); border: 1px solid var(--line); border-radius: 16px;
	box-shadow: 0 10px 34px rgba(12, 46, 41, .22); font-size: .85rem; line-height: 1.4;
}
.yukle-seridi[hidden], .yukle-seridi [hidden] { display: none; }
.ys-simge { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; }
.ys-metin { flex: 1; min-width: 0; margin: 0; }
.ys-metin b { display: block; color: var(--baslik); font-size: .92rem; }
.ys-metin small { display: block; font-size: .8rem; color: var(--ink-2); }
.ys-paylas { display: inline-flex; vertical-align: -.2em; color: var(--vurgu); }
.ys-paylas .i { width: 1.05rem; height: 1.05rem; }
.ys-yukle { flex: none; min-height: 2.5rem; padding: 0 1.1rem; font-weight: 700; font-size: .88rem; text-decoration: none; }
.ys-kapat {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
	margin: -.25rem -.15rem -.25rem 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.ys-kapat:hover { background: var(--hover); color: var(--ink); }
.ys-kapat .i { width: 1.15rem; height: 1.15rem; }
@media (prefers-reduced-motion: no-preference) {
	.yukle-seridi:not([hidden]) { animation: ys-gel .3s ease-out; }
	@keyframes ys-gel { from { opacity: 0; transform: translate(-50%, 1rem); } }
}

/* ============ Duyarlı ============ */
@media (max-width: 960px) {
	.site-footer .in { grid-template-columns: 1fr 1fr; }
	.fcol-marka { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
	.nav-kap { display: none; }
	.ara-btn { margin-left: auto; }
	.icon-btn { display: grid; }
}
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
@media (max-width: 640px) {
	.sayfa { padding: 1.25rem 1rem 2rem; }
	.site-footer .in { padding: 2.5rem 1rem 1.5rem; gap: 1.75rem 1.5rem; }
	.fcol li a { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* ============ Menüde CTA butonu (Görünüm → Menüler'de CSS sınıfı "cta" verilen öğe) ============ */
.nav > li.cta { margin-left: .5rem; }
.nav > li.cta > a {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 1rem;
	background: var(--green-deep); color: #fff; font-weight: 600; border-radius: 10px;
}
.nav > li.cta > a::before,
.drawer li.cta > a::before {
	content: ""; width: 14px; height: 14px; flex: none; background: var(--gold-soft);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14.6 7.4 20.5 8.2 16.2 12.3 17.3 18.2 12 15.4 6.7 18.2 7.8 12.3 3.5 8.2 9.4 7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14.6 7.4 20.5 8.2 16.2 12.3 17.3 18.2 12 15.4 6.7 18.2 7.8 12.3 3.5 8.2 9.4 7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav > li.cta > a:hover { background: var(--green); color: #fff; }
.drawer li.cta > a {
	gap: .5rem; margin-top: .5rem; justify-content: center;
	background: var(--green-deep); color: #fff; font-weight: 600;
}
/* Orta boy ekranlarda menü sığsın */
@media (max-width: 1200px) and (min-width: 1081px) {
	.site-header .bar { gap: 1rem; }
	.nav a { padding: .5rem .55rem; }
}

/* Masaüstünde menü tam ortada: logo | menü | arama simgesi (logo ve simge genişliği farklı olsa da). */
@media (min-width: 1081px) {
	.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; }
	.site-header .logo { justify-self: start; }
	.nav-kap { margin-left: 0; justify-self: center; }
	.sag { justify-self: end; display: flex; align-items: center; gap: .5rem; }
	.ara-btn { margin-left: 0; border-radius: 999px; }
	.ara-btn span { display: none; }
}

/* "Günün duası" düğmesi (sade, çerçeveli) */
.sag { display: flex; align-items: center; margin-left: auto; }
.sag .ara-btn { margin-left: 0; }
.gunun-btn {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: 0 1rem 0 .85rem;
	border: 1px solid var(--line); border-radius: 999px; background: var(--card);
	font-size: .9rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.gunun-btn::before {
	content: ""; width: 14px; height: 14px; flex: none; background: var(--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14.6 7.4 20.5 8.2 16.2 12.3 17.3 18.2 12 15.4 6.7 18.2 7.8 12.3 3.5 8.2 9.4 7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 14.6 7.4 20.5 8.2 16.2 12.3 17.3 18.2 12 15.4 6.7 18.2 7.8 12.3 3.5 8.2 9.4 7.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gunun-btn:hover { border-color: var(--gold); color: var(--baslik); }
.cekmece-gunun { display: none; }
@media (max-width: 1080px) {
	.sag .gunun-btn { display: none; }
	.cekmece-gunun { display: flex; justify-content: center; margin-top: .6rem; }
	.sag .ara-btn { margin-left: auto; }
}
.ara-btn span { display: none; } /* ad yalnızca ekran okuyucular için (aria-label) */

/* İnternet yok şeridi (js/uygulama.js): üst çubuğun hemen altında, içeriği itmeden */
.baglanti-serit {
	position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 45;
	padding: .45rem 1rem; text-align: center; font-size: .82rem; font-weight: 600; line-height: 1.35;
	background: #3E4A46; color: #F4EEDF; box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.baglanti-serit[hidden] { display: none; }
.baglanti-serit.geri { background: var(--green); }
body.admin-bar .baglanti-serit { top: calc(var(--header-h) + 32px); }

/* Görünüm düğmesi (alt bilgi): Otomatik → Açık → Koyu */
.tema-dugme {
	min-height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .8rem; color: #B7C6C0; text-decoration: underline; text-underline-offset: 3px;
}
.tema-dugme:hover { color: #fff; }
.tema-dugme[hidden] { display: none; }

/* Üst menüde ay / güneş (görünüm): açık görünümde ay, koyu görünümde güneş */
.tema-ikon {
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 10px;
	background: none; color: var(--ink-2); cursor: pointer;
}
.tema-ikon:hover { background: var(--gold-tint); color: var(--baslik); }
.tema-ikon[hidden] { display: none; }
.tema-ikon > span { display: grid; }
.tema-ikon .gunes-i { display: none; }
:root[data-tema="koyu"] .tema-ikon .ay-i { display: none; }
:root[data-tema="koyu"] .tema-ikon .gunes-i { display: grid; }
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="acik"]) .tema-ikon .ay-i { display: none; }
	:root:not([data-tema="acik"]) .tema-ikon .gunes-i { display: grid; }
}