/*
Theme Name: Sugla
Description: Konya ilceleri ve Seydisehir mahalleleri icin gol-vadi izgarasi.
Text Domain: sugla
*/

/* Duzen: uc sutunlu izgara. Kart beyaz, ust kosesi kemer gibi yuvarlatilmis
   3:4 kadraj, kadrajin ust ortasinda ince bakir kilit tasi. Kadrajin altinda
   bakir alt cizgili mahalle adi, baslik, kisa ozet, en altta hilal noktali
   ritim notu ile tarih. Kapaksiz kayit kadraj yerine slate dokulu bant ve
   buyuk bas harf aliyor. Bolge blogu «gol ve vadi cetveli»: ilceler kalin,
   Seydisehir mahalleleri girintili. */

:root {
	--sug-mur: #26333f;
	--sug-zemin: #eef1f3;
	--sug-yuzey: #ffffff;
	--sug-slate: #47617a;
	--sug-slate-koyu: #33495d;
	--sug-bakir: #b06a3b;
	--sug-soluk: #7a8894;
	--sug-cizgi: #d8dfe4;
	--sug-en: 1080px;
}

* { box-sizing: border-box; }

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

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

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

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

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

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

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

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

/* ---- akis (izgara) ---- */

.sug-akis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.sug-kart {
	min-width: 0;
	background: var(--sug-yuzey);
	border: 1px solid var(--sug-cizgi);
	border-radius: 16px 16px 4px 4px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.sug-kadraj {
	display: block;
	position: relative;
	overflow: hidden;
	background: #dde4e9;
	border-radius: 15px 15px 0 0;
}
/* bakir kilit tasi — kadrajin ust ortasi */
.sug-kadraj::after {
	content: "";
	position: absolute; top: 0; left: 50%; transform: translateX(-50%);
	width: 26px; height: 8px;
	background: var(--sug-bakir);
	border-radius: 0 0 6px 6px;
}
.sug-kadraj img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.sug-kadraj-bos {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 3 / 4;
	font-size: 62px; font-weight: 700; color: rgba(71, 97, 122, .5);
	background:
		repeating-linear-gradient(135deg, #e2e8ec 0 12px, #dbe2e7 12px 24px),
		radial-gradient(circle at 50% 118%, rgba(176,106,59,.16), transparent 62%);
}
.sug-ic { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.sug-saha-adi {
	margin: 0; align-self: flex-start;
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
	border-bottom: 2px solid var(--sug-bakir); padding-bottom: 2px;
}
.sug-saha-adi a { color: var(--sug-bakir); }
.sug-ic h2 { margin: 0; font-size: 16.5px; line-height: 1.3; font-weight: 700; }
.sug-ic h2 a { color: var(--sug-mur); }
.sug-ic h2 a:hover { color: var(--sug-slate); }
.sug-oz { margin: 0; font-size: 13.5px; color: #556472; overflow-wrap: anywhere; }
.sug-kunye {
	margin: auto 0 0; padding-top: 8px;
	border-top: 1px dotted var(--sug-cizgi);
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	font-size: 11.5px; color: var(--sug-soluk);
}
.sug-ritim-uc {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--sug-bakir); font-weight: 700;
}
/* hilal noktasi */
.sug-ritim-uc::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	background: var(--sug-bakir);
	box-shadow: inset 3px -2px 0 0 var(--sug-yuzey);
	flex: 0 0 auto;
}
.sug-kunye time { font-variant-numeric: tabular-nums; }

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

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

/* ---- ritim taban (etiketler) ---- */

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

/* ---- gol ve vadi cetveli (bolge blogu) ---- */

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

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

.sug-taban { background: var(--sug-mur); color: #c4d1db; border-top: 3px solid var(--sug-bakir); }
.sug-taban-ic { max-width: var(--sug-en); margin: 0 auto; padding: 26px 20px; font-size: 14px; }
.sug-taban-ic p { margin: 0 0 10px; }
.sug-taban a { color: #ddb08a; }
.sug-uyari { color: #93a3ae; font-size: 13px; }
.sug-taban small { color: #7d8b96; }

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

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

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

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

@media (max-width: 900px) { .sug-akis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.sug-akis { grid-template-columns: 1fr; gap: 16px; }
	.sug-govde > h1 { font-size: 22px; }
	.sug-saha-listesi > div { grid-template-columns: 1fr auto; }
	.sug-saha-listesi span { grid-column: 2; order: 0; justify-self: end; }
}