/*
Theme Name: Soli
Description: Mersin mahalle defteri icin ozel tema.
Version: 1.0.0
Text Domain: soli
*/

:root {
	--sol-murekkep: #33291f;
	--sol-bej: #f2e8dc;
	--sol-yuzey: #fbf6ef;
	--sol-gul: #c76b8a;
	--sol-koyugul: #a04d69;
	--sol-kum: #e3d3c0;
	--sol-soluk: #857567;
	--sol-en: 1060px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sol-bej);
	color: var(--sol-murekkep);
	font-family: "Avenir Next", Corbel, "Lucida Grande", "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

h1, h2, h3 {
	font-family: inherit;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.24;
	margin: 0 0 12px;
}

a { color: var(--sol-koyugul); }
a:hover { color: var(--sol-murekkep); }

img { max-width: 100%; height: auto; display: block; }

.sol-atla { position: absolute; left: -9999px; }
.sol-atla:focus { left: 12px; top: 12px; z-index: 9; background: var(--sol-murekkep); color: #fff; padding: 9px 15px; }

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

/* Ust gezinme yok: mahalleler ana sayfada kendi baslikli seritleriyle duruyor. */
.sol-bas { background: var(--sol-yuzey); border-bottom: 2px solid var(--sol-kum); }
.sol-bas-ic { max-width: var(--sol-en); margin: 0 auto; padding: 24px 20px 18px; }
.sol-marka {
	margin: 0;
	font-size: clamp(23px, 3.4vw, 31px);
	font-weight: 600;
	letter-spacing: -0.015em;
}
.sol-marka a { color: var(--sol-murekkep); text-decoration: none; }
.sol-marka a::after { content: "."; color: var(--sol-gul); }
.sol-slogan { margin: 3px 0 0; font-size: 13px; color: var(--sol-soluk); }

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

.sol-govde { max-width: var(--sol-en); margin: 0 auto; padding: 26px 20px 12px; }
.sol-govde > h1 { font-size: clamp(22px, 3.4vw, 30px); }
.sol-giris { color: #5a4d40; margin: 0 0 26px; max-width: 68ch; font-size: 15px; }
.sol-giris p { margin: 0 0 10px; }

/* --------------------------------------------------------------- vitrin */

/* Kaynaktaki 20×6 koordinat duzeni korunur: bos hucreler DOM'dan dusurulmez. */
.sol-vitrin { margin: 0 0 34px; }
.sol-vitrin-bas {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0 8px;
	margin-bottom: 10px;
	border-top: 2px solid var(--sol-gul);
	border-bottom: 1px solid var(--sol-kum);
}
.sol-vitrin-bas h2 { margin: 0; font-size: 19px; }
.sol-vitrin-bas p { margin: 0; color: var(--sol-soluk); font-size: 12px; white-space: nowrap; }

.sol-vitrin-izgara {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}
.sol-vitrin-kart {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 5px;
	background: var(--sol-yuzey);
	border: 1px solid var(--sol-kum);
	border-radius: 4px;
}
.sol-vitrin-gorsel { display: block; color: inherit; text-decoration: none; }
.sol-vitrin-gorsel img,
.sol-vitrin-fotoyok,
.sol-vitrin-bos-ic {
	display: flex;
	width: 100%;
	aspect-ratio: 17 / 23;
	border-radius: 3px;
}
.sol-vitrin-gorsel img { object-fit: cover; object-position: center 15%; }
.sol-vitrin-fotoyok,
.sol-vitrin-bos-ic {
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background:
		repeating-linear-gradient(135deg, rgba(199,107,138,.09) 0 12px, rgba(251,246,239,.72) 12px 24px),
		var(--sol-bej);
	color: var(--sol-koyugul);
	border: 1px dashed var(--sol-gul);
	text-align: center;
}
.sol-vitrin-bos-ic span { font-weight: 700; font-size: clamp(15px, 2vw, 21px); }
.sol-vitrin-bos-ic small { margin-top: 2px; color: var(--sol-soluk); font-size: 11px; }
.sol-vitrin-kart h3 {
	margin: 7px 0 3px;
	min-height: 2.7em;
	font-size: 12.5px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.sol-vitrin-kart h3 a { color: var(--sol-murekkep); text-decoration: none; }
.sol-vitrin-kart h3 a:hover { color: var(--sol-koyugul); }
.sol-vitrin-tel {
	display: block;
	margin-top: auto;
	color: var(--sol-koyugul);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
}
.sol-vitrin-bos { opacity: .78; }
.sol-vitrin-bos h3, .sol-vitrin-bos .sol-vitrin-tel { color: var(--sol-soluk); }

@media (max-width: 800px) {
	.sol-vitrin-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.sol-vitrin-bas { align-items: flex-start; }
	.sol-vitrin-bas p { white-space: normal; text-align: right; }
	.sol-vitrin-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}

/* ------------------------------------------------------- mahalle seritleri */

/* Her mahalle kendi basligi altinda YANA kayan bir sirada. JS yok, sadece
   CSS scroll-snap. Dikey izgara, kart duvari, tablo — hicbiri kullanilmiyor. */
.sol-muhit-blok { margin: 0 0 30px; }

.sol-blok-bas {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 7px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--sol-kum);
}
.sol-blok-bas h2 { margin: 0; font-size: 18px; }
.sol-blok-bas h2 a { color: var(--sol-murekkep); text-decoration: none; }
.sol-blok-bas h2 a:hover { color: var(--sol-koyugul); }
.sol-hepsi { font-size: 12.5px; color: var(--sol-soluk); text-decoration: none; white-space: nowrap; }
.sol-hepsi:hover { color: var(--sol-gul); }

.sol-serit {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
	scrollbar-width: thin;
}

.sol-kart { flex: 0 0 168px; scroll-snap-align: start; }
.sol-kart a { text-decoration: none; color: inherit; display: block; }
.sol-kart-img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 15%;
	border-radius: 4px;
	border: 1px solid var(--sol-kum);
}
.sol-kart-bos { display: block; aspect-ratio: 3 / 4; background: var(--sol-kum); border-radius: 4px; }
.sol-kart h3 {
	margin: 7px 0 3px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sol-murekkep);
}
.sol-kart a:hover h3 { color: var(--sol-koyugul); }
.sol-kart-oz { margin: 0; font-size: 12px; color: var(--sol-soluk); }

/* -------------------------------------------------------- arsiv duz liste */

.sol-liste { border-top: 1px solid var(--sol-kum); }
.sol-satir {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 15px 0;
	border-bottom: 1px solid var(--sol-kum);
	align-items: start;
}
@media (max-width: 560px) { .sol-satir { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; } }
.sol-satir-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 15%; border-radius: 4px; }
.sol-satir h2 { font-size: 16.5px; margin: 0 0 5px; line-height: 1.3; }
.sol-satir h2 a { color: var(--sol-murekkep); text-decoration: none; }
.sol-satir h2 a:hover { color: var(--sol-koyugul); }
.sol-oz { margin: 0 0 6px; font-size: 14px; color: #5c5045; }
.sol-kunye { margin: 0; font-size: 12px; color: var(--sol-soluk); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sol-mh { background: var(--sol-gul); color: #fff; padding: 2px 9px; border-radius: 3px; text-decoration: none; font-weight: 600; }
.sol-mh:hover { background: var(--sol-koyugul); color: #fff; }
.sol-gr { color: var(--sol-soluk); text-decoration: none; border-bottom: 1px dotted var(--sol-kum); }
.sol-gr:hover { color: var(--sol-gul); }

.sol-sayfalar { display: flex; flex-wrap: wrap; gap: 5px; margin: 22px 0 0; font-size: 13.5px; }
.sol-sayfalar a, .sol-sayfalar span {
	padding: 6px 13px;
	border: 1px solid var(--sol-kum);
	border-radius: 3px;
	background: var(--sol-yuzey);
	text-decoration: none;
	color: var(--sol-murekkep);
}
.sol-sayfalar .current { background: var(--sol-gul); color: #fff; border-color: var(--sol-gul); }

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

.sol-tekil h1 { font-size: clamp(21px, 3.2vw, 29px); margin-bottom: 18px; }
.sol-vitrin-geri { margin: 0 0 8px; font-size: 12.5px; }
.sol-vitrin-geri a { color: var(--sol-soluk); text-decoration: none; }
.sol-vitrin-geri a:hover { color: var(--sol-koyugul); }
.sol-tekil-tel { font-weight: 700; text-decoration: none; }
.sol-vitrin-iletisim { display: grid; gap: 8px; }
.sol-whatsapp {
	display: inline-block;
	justify-self: start;
	padding: 7px 12px;
	border-radius: 4px;
	background: #238b57;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.sol-whatsapp:hover { background: #176f43; color: #fff; }

.sol-iletisim-karti {
	max-width: 480px;
	margin-top: 22px;
	padding: 18px;
	background: var(--sol-yuzey);
	border: 1px solid var(--sol-kum);
	border-top: 3px solid var(--sol-gul);
	border-radius: 4px;
}
.sol-iletisim-karti h2 { margin: 0 0 12px; font-size: 18px; }
.sol-iletisim-numara { display: grid; gap: 2px; margin: 0 0 14px; }
.sol-iletisim-numara span { color: var(--sol-soluk); font-size: 12px; }
.sol-iletisim-numara a { color: var(--sol-murekkep); font-size: 18px; font-weight: 700; text-decoration: none; }

/* Metin solda, bilgi kutusu sagda — kunye satiri degil, kutu. */
.sol-ikili { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 30px; align-items: start; }
@media (max-width: 800px) { .sol-ikili { grid-template-columns: 1fr; gap: 20px; } }

.sol-metin { max-width: 66ch; }
.sol-metin p { margin: 0 0 16px; }

.sol-kutu {
	background: var(--sol-yuzey);
	border: 1px solid var(--sol-kum);
	border-top: 3px solid var(--sol-gul);
	border-radius: 4px;
	padding: 14px 16px;
	font-size: 13.5px;
}
.sol-kutu dl { margin: 0; }
.sol-kutu dt {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--sol-soluk);
	margin: 0 0 2px;
}
.sol-kutu dd { margin: 0 0 12px; }
.sol-kutu dd:last-child { margin-bottom: 0; }

/* Fotograflar metnin altinda, cift sutun, tekler asagi kaymis. */
.sol-kaydirmali { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; align-items: start; }
@media (max-width: 560px) { .sol-kaydirmali { grid-template-columns: 1fr; } }
.sol-yan { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 14%; border-radius: 4px; }
.sol-kayik { margin-top: 28px; }
@media (max-width: 560px) { .sol-kayik { margin-top: 0; } }

.sol-komsu { margin: 30px 0 0; border-top: 1px solid var(--sol-kum); padding-top: 14px; }
.sol-komsu h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sol-soluk); margin: 0 0 8px; }
.sol-komsu ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.sol-komsu li { padding: 4px 0 4px 14px; position: relative; }
.sol-komsu li::before { content: "—"; position: absolute; left: 0; color: var(--sol-kum); }

.sol-duz .sol-metin { max-width: 66ch; }

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

.sol-gorunum-taban { max-width: var(--sol-en); margin: 32px auto 0; padding: 20px; border-top: 2px solid var(--sol-kum); }
.sol-gorunum-taban h2 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sol-soluk); margin: 0 0 10px; }
.sol-gorunum-taban div { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-gorunum-taban a {
	padding: 5px 12px;
	border: 1px solid var(--sol-kum);
	border-radius: 3px;
	background: var(--sol-yuzey);
	font-size: 13px;
	text-decoration: none;
	color: var(--sol-murekkep);
}
.sol-gorunum-taban a:hover { border-color: var(--sol-gul); color: var(--sol-koyugul); }
.sol-gorunum-taban i { font-style: normal; color: var(--sol-soluk); font-size: 11px; }

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

.sol-taban { background: var(--sol-yuzey); border-top: 2px solid var(--sol-kum); margin-top: 20px; }
.sol-taban-ic { max-width: var(--sol-en); margin: 0 auto; padding: 22px 20px 30px; font-size: 13.5px; color: #5c5045; }
.sol-taban p { margin: 0 0 9px; max-width: 76ch; }
.sol-taban-nav { margin: 0 0 9px; }
.sol-taban-nav a { color: var(--sol-koyugul); font-weight: 600; text-decoration: none; }
.sol-uyari { color: var(--sol-soluk); font-size: 12.5px; }
.sol-taban small { display: block; margin-top: 10px; color: var(--sol-soluk); font-size: 12px; }

.sol-yok { padding: 28px 0 40px; color: var(--sol-soluk); }