/*
Theme Name: Issos
Description: Mersin ilceleri ve Mezitli mahalleleri icin kiyi izgarasi.
Text Domain: issos
*/

/* Duzen: uc sutunlu dikey kart izgarasi. Her kartta ustte 4:5 kadraj, kadrajin
   alt kenarinda ince bir su hatti, altinda mahalle adi, baslik, kisa ozet ve
   en altta ten notu ile tarih. Kapaksiz kayit kadraj yerine dalga desenli bir
   bant ve buyuk bas harf aliyor. Saha listesi iki kademe: ilceler kalin, Mezitli
   mahalleleri girintili — cetvel gibi. */

:root {
	--iss-murekkep: #1b2a3a;
	--iss-zemin: #edf1f2;
	--iss-yuzey: #fdfdfb;
	--iss-deniz: #2f7d92;
	--iss-deniz-koyu: #1f5769;
	--iss-kehribar: #cf8637;
	--iss-soluk: #6b7680;
	--iss-cizgi: #dbe2e3;
	--iss-en: 1040px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--iss-zemin);
	color: var(--iss-murekkep);
	font: 15.5px/1.6 "Segoe UI", "Helvetica Neue", -apple-system, system-ui, Arial, sans-serif;
}

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

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

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

.iss-bas { background: var(--iss-murekkep); color: #eef3f4; }
.iss-bas-ic { max-width: var(--iss-en); margin: 0 auto; padding: 18px 20px; }
.iss-marka { margin: 0; font-size: 25px; font-weight: 700; letter-spacing: .01em; }
.iss-marka a { color: #fff; }
.iss-marka a:hover { color: var(--iss-kehribar); text-decoration: none; }
.iss-slogan { margin: 2px 0 0; color: #9fb2b8; font-size: 13.5px; }

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

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

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

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

.iss-akis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.iss-kart {
	min-width: 0;
	background: var(--iss-yuzey);
	border: 1px solid var(--iss-cizgi);
	display: flex;
	flex-direction: column;
}
.iss-kadraj {
	display: block;
	position: relative;
	overflow: hidden;
	background: #dfe7e8;
	border-bottom: 3px solid var(--iss-deniz);
}
.iss-kadraj img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.iss-kadraj-bos {
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4 / 5;
	font-size: 60px; font-weight: 700; color: rgba(207, 134, 55, .55);
	background:
		repeating-linear-gradient(0deg, #e2eaeb 0 10px, #dbe4e5 10px 20px),
		radial-gradient(circle at 50% 120%, rgba(47,125,146,.15), transparent 60%);
}
.iss-ic { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.iss-saha-adi { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; }
.iss-saha-adi a { color: var(--iss-deniz-koyu); }
.iss-ic h2 { margin: 0; font-size: 16.5px; line-height: 1.3; font-weight: 600; }
.iss-ic h2 a { color: var(--iss-murekkep); }
.iss-ic h2 a:hover { color: var(--iss-deniz); }
.iss-oz { margin: 0; font-size: 13.5px; color: #52606c; overflow-wrap: anywhere; }
.iss-kunye {
	margin: auto 0 0; padding-top: 8px;
	border-top: 1px dotted var(--iss-cizgi);
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	font-size: 11.5px; color: var(--iss-soluk);
}
.iss-ten-uc {
	display: inline-flex; align-items: center; gap: 5px;
	color: var(--iss-kehribar); font-weight: 600;
}
.iss-ten-uc::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: var(--iss-kehribar); flex: 0 0 auto;
}
.iss-kunye time { font-variant-numeric: tabular-nums; }

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

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

/* ---- ten taban (etiketler) ---- */

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

/* ---- saha listesi (bolge blogu) ---- */

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

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

.iss-taban { background: var(--iss-murekkep); color: #c9d4d8; }
.iss-taban-ic { max-width: var(--iss-en); margin: 0 auto; padding: 26px 20px; font-size: 14px; }
.iss-taban-ic p { margin: 0 0 10px; }
.iss-taban a { color: #e7c19a; }
.iss-uyari { color: #93a2a9; font-size: 13px; }
.iss-taban small { color: #7e8d94; }

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

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


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

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

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