/*
Theme Name: Saramene
Description: Samsun ilceleri ve Bafra mahalleleri icin delta seridi.
Text Domain: saramene
*/

/* Duzen: iki sutunlu izgara, her kart YATAY. Solda 4:5 kadraj, sagda metin:
   ustte altin mahalle sekmesi, baslik, kisa ozet, en altta catal noktali
   mutfak notu ile tarih. Kapaksiz kayit kadraj yerine yesil dokulu bir bant
   ve buyuk bas harf aliyor. Bolge blogu «delta cetveli»: ilceler kalin,
   Bafra mahalleleri girintili. */

:root {
	--srm-mur: #1c2b28;
	--srm-zemin: #eef2ef;
	--srm-yuzey: #ffffff;
	--srm-yesil: #2f6b5e;
	--srm-yesil-koyu: #204a41;
	--srm-altin: #bf9531;
	--srm-soluk: #78857e;
	--srm-cizgi: #d5ddd7;
	--srm-en: 1080px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--srm-zemin);
	color: var(--srm-mur);
	font: 15.5px/1.6 "Georgia", "Segoe UI", -apple-system, system-ui, Arial, serif;
}

a { color: var(--srm-yesil); text-decoration: none; }
a:hover { color: var(--srm-yesil-koyu); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.srm-atla { position: absolute; left: -999em; }
.srm-atla:focus { position: static; display: inline-block; padding: 8px 14px; background: var(--srm-yesil); color: #fff; }

/* ---- bas ---- */

.srm-bas { background: var(--srm-mur); color: #e7efeb; border-bottom: 3px solid var(--srm-altin); }
.srm-bas-ic { max-width: var(--srm-en); margin: 0 auto; padding: 18px 20px; }
.srm-marka { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .01em; }
.srm-marka a { color: #fff; }
.srm-marka a:hover { color: var(--srm-altin); text-decoration: none; }
.srm-slogan { margin: 3px 0 0; color: #9db6ad; font-size: 13.5px; }

/* saha gezinme */
.srm-sahalar { background: var(--srm-yuzey); border-bottom: 1px solid var(--srm-cizgi); }
.srm-sahalar-ic {
	max-width: var(--srm-en); margin: 0 auto; padding: 10px 20px;
	display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.srm-sahalar-ic a { font-size: 14px; color: var(--srm-mur); }
.srm-sahalar-ic a:hover { color: var(--srm-yesil); }
.srm-sahalar-ic a.srm-durur { color: var(--srm-altin); text-decoration: underline; }

/* ---- govde ---- */

.srm-govde { max-width: var(--srm-en); margin: 0 auto; padding: 24px 20px 48px; }
.srm-govde > h1 { font-size: 25px; line-height: 1.25; margin: 4px 0 12px; font-weight: 700; }
.srm-giris { max-width: 760px; margin: 0 0 22px; color: #3d4a45; }
.srm-giris p { margin: 0; }
.srm-bos { color: var(--srm-soluk); font-style: italic; }

/* ---- akis (yatay kartlar, iki sutun) ---- */

.srm-akis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.srm-kart {
	min-width: 0;
	background: var(--srm-yuzey);
	border: 1px solid var(--srm-cizgi);
	border-left: 4px solid var(--srm-yesil);
	display: flex;
	flex-direction: row;
	overflow: hidden;
}
.srm-kadraj {
	display: block; position: relative; overflow: hidden;
	flex: 0 0 42%; background: #dce4df;
}
.srm-kadraj img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.srm-kadraj-bos {
	display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 4 / 5;
	font-size: 54px; font-weight: 700; color: rgba(47,107,94,.5);
	background:
		repeating-linear-gradient(115deg, #dde6e0 0 11px, #d6e0da 11px 22px),
		radial-gradient(circle at 50% 118%, rgba(191,149,49,.16), transparent 62%);
}
.srm-ic { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.srm-saha-adi {
	margin: 0; align-self: flex-start;
	background: var(--srm-altin); color: #322400;
	padding: 2px 9px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.srm-saha-adi a { color: #322400; }
.srm-saha-adi a:hover { text-decoration: none; color: #4a3600; }
.srm-ic h2 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; }
.srm-ic h2 a { color: var(--srm-mur); }
.srm-ic h2 a:hover { color: var(--srm-yesil); }
.srm-oz { margin: 0; font-size: 13px; color: #4f5b55; overflow-wrap: anywhere; }
.srm-kunye {
	margin: auto 0 0; padding-top: 8px;
	border-top: 1px dotted var(--srm-cizgi);
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	font-size: 11.5px; color: var(--srm-soluk);
}
.srm-mutfak-uc {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--srm-yesil); font-weight: 700;
}
.srm-mutfak-uc::before {
	content: ""; width: 9px; height: 9px;
	background: var(--srm-altin);
	clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
	flex: 0 0 auto;
}
.srm-kunye time { font-variant-numeric: tabular-nums; }

/* ---- sayfalar ---- */

.srm-sayfalar { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.srm-sayfalar a, .srm-sayfalar span {
	display: inline-block; padding: 6px 12px;
	border: 1px solid var(--srm-cizgi); background: var(--srm-yuzey); font-size: 14px;
}
.srm-sayfalar .current { background: var(--srm-yesil); color: #fff; border-color: var(--srm-yesil); }

/* ---- mutfak taban (etiketler) ---- */

.srm-kalip-taban { background: var(--srm-yuzey); border-top: 1px solid var(--srm-cizgi); margin-top: 42px; }
.srm-kalip-taban h2 { max-width: var(--srm-en); margin: 0 auto; padding: 20px 20px 0; font-size: 16px; font-weight: 700; }
.srm-kalip-taban > div {
	max-width: var(--srm-en); margin: 0 auto; padding: 10px 20px 22px;
	display: flex; flex-wrap: wrap; gap: 8px 14px;
}
.srm-kalip-taban a { font-size: 14px; }
.srm-kalip-taban i { color: var(--srm-soluk); font-style: normal; font-variant-numeric: tabular-nums; }

/* ---- delta cetveli (bolge blogu) ---- */

.srm-saha-listesi {
	margin: 44px 0 0; padding-top: 24px;
	border-top: 3px double var(--srm-yesil);
}
.srm-saha-listesi > h2 { margin: 0 0 14px; font-size: 18px; font-weight: 700; }
.srm-saha-listesi > div {
	display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
	align-items: baseline; padding: 6px 0;
	border-bottom: 1px dotted var(--srm-cizgi);
}
.srm-saha-listesi .srm-ust { border-bottom-color: var(--srm-yesil); }
.srm-saha-listesi .srm-ust a { font-weight: 700; font-size: 16px; color: var(--srm-mur); }
.srm-saha-listesi .srm-alt { padding-left: 22px; }
.srm-saha-listesi .srm-alt a { color: var(--srm-yesil); }
.srm-saha-listesi span {
	grid-column: 2; justify-self: start; order: 2;
	font-size: 12px; color: var(--srm-altin); font-variant-numeric: tabular-nums;
}
.srm-saha-listesi p {
	grid-column: 1 / -1; order: 3; margin: 0 0 2px;
	font-size: 12.5px; color: var(--srm-soluk);
}

/* ---- taban ---- */

.srm-taban { background: var(--srm-mur); color: #c2d0ca; border-top: 3px solid var(--srm-altin); }
.srm-taban-ic { max-width: var(--srm-en); margin: 0 auto; padding: 26px 20px; font-size: 14px; }
.srm-taban-ic p { margin: 0 0 10px; }
.srm-taban a { color: #e0c479; }
.srm-uyari { color: #93a39c; font-size: 13px; }
.srm-taban small { color: #7c8b84; }

/* ---- tekil ---- */

.srm-tekil-ust {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	color: var(--srm-soluk); font-size: 13px; margin: 0 0 16px;
}
.srm-saha-rozet { background: var(--srm-yesil); color: #fff !important; padding: 3px 10px; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.srm-saha-rozet:hover { background: var(--srm-yesil-koyu); text-decoration: none; }
.srm-kapak { margin: 0 0 18px; border: 1px solid var(--srm-cizgi); background: var(--srm-yuzey); padding: 6px; }
.srm-kapak img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center top; }
.srm-metin { max-width: 720px; font-size: 16px; }
.srm-metin p { margin: 0 0 1em; }
.srm-ekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 22px 0; }
.srm-ekler img { border: 1px solid var(--srm-cizgi); aspect-ratio: 1 / 1; object-fit: cover; }
.srm-kaliplar { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.srm-kaliplar a { border: 1px solid var(--srm-altin); padding: 3px 10px; font-size: 13px; }
.srm-komsu { margin: 30px 0 0; border-top: 1px solid var(--srm-cizgi); padding-top: 16px; }
.srm-komsu h2 { font-size: 16px; margin: 0 0 8px; }
.srm-komsu ul { margin: 0; padding-left: 18px; }
.srm-komsu li { margin: 0 0 4px; }

/* ---- tekil / sayfa sarmalayici ---- */
.srm-tekil h1 { font-size: 25px; line-height: 1.25; }
.srm-tekil .srm-komsu li { list-style: disc; }
.srm-sayfa h1 { font-size: 24px; }
.srm-sayfa .srm-metin { max-width: 720px; }

/* ---- telefon ---- */

@media (max-width: 720px) {
	.srm-akis { grid-template-columns: 1fr; gap: 16px; }
	.srm-govde > h1 { font-size: 22px; }
	.srm-saha-listesi > div { grid-template-columns: 1fr auto; }
	.srm-saha-listesi span { grid-column: 2; order: 0; justify-self: end; }
}
@media (max-width: 420px) {
	.srm-kart { flex-direction: column; }
	.srm-kadraj { flex-basis: auto; }
	.srm-kadraj img, .srm-kadraj-bos { aspect-ratio: 16 / 10; }
}