/*
Theme Name: Çanakkale Bildir
Theme URI: https://canakkale.bel.tr
Author: Çanakkale Bildir
Author URI: https://canakkale.bel.tr
Description: Vatandaşların giriş şifresi gerektirmeden foto + konum ile altyapı/çevre sorunu bildirebildiği, herkese açık şeffaflık haritası ve belediye için basit bir yönetim ekranı sunan WordPress teması. CİMER veya 444 17 17 çağrı merkezinin yerine geçmez; "hızlı, görsel, mobil-öncelikli, şifresiz" boşluğu doldurur.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cb
*/

/* ==========================================================================
   Çanakkale Bildir — Tema Stilleri
   Tasarım dili: Boğaz (Dardanelles) lacivert + fener/sinyal sarısı.
   İmza öğe: dalga motifi (.cb-dalga) — bölümleri ayıran şerit.
   ========================================================================== */

:root{
	--cb-lacivert: #0E3A53;
	--cb-lacivert-koyu: #082739;
	--cb-sinyal: #E8A93B;
	--cb-sinyal-koyu: #C98A1E;
	--cb-travertin: #EDE6D6;
	--cb-kagit: #FBFAF7;
	--cb-cozuldu: #3F8A5C;
	--cb-inceleniyor: #2C6E8E;
	--cb-bekliyor: #E8A93B;
	--cb-reddedildi: #9A9A9A;
	--cb-metin: #1C2B33;
	--cb-metin-soluk: #5C6B72;
	--cb-cizgi: #DCD4C2;
	--cb-radius: 14px;
	--cb-font-baslik: "Space Grotesk", "Trebuchet MS", sans-serif;
	--cb-font-govde: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cb-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

*{ box-sizing: border-box; }

html, body{
	margin: 0;
	padding: 0;
	font-family: var(--cb-font-govde);
	color: var(--cb-metin);
	background: var(--cb-kagit);
	-webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display:block; }
a{ color: var(--cb-lacivert); text-decoration: none; }
a:hover{ text-decoration: underline; }

.cb-kapsayici{
	max-width: 720px;
	margin: 0 auto;
	padding: 0 18px;
}

/* ---------- Üst bar ---------- */
.cb-ust-bar{
	background: var(--cb-lacivert);
	color: #fff;
	position: relative;
}
.cb-ust-bar-ic{
	max-width: 720px;
	margin: 0 auto;
	padding: 16px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 10px;
}
.cb-logo{
	font-family: var(--cb-font-baslik);
	font-weight: 700;
	font-size: 17px;
	color: #fff;
	display:flex;
	align-items:center;
	gap: 6px;
}
.cb-logo span.cb-logo-ikon{ font-size: 18px; }
.cb-nav{ display:flex; gap: 16px; }
.cb-nav a{
	color: #fff;
	opacity: .9;
	font-size: 14px;
	font-weight: 600;
}
.cb-nav a:hover{ opacity: 1; text-decoration: underline; }

/* Dalga motifi — boğaz kentine gönderme, jenerik düz çizgi yerine */
.cb-dalga{
	display:block;
	width: 100%;
	height: 14px;
	line-height: 0;
	overflow: hidden;
}
.cb-dalga-tren{
	display: flex;
	width: 200%;
	height: 14px;
	animation: cb-dalga-kaydir 10s linear infinite;
	will-change: transform;
}
.cb-dalga-tren svg{ width: 100%; height: 14px; display:block; flex-shrink: 0; }

@keyframes cb-dalga-kaydir{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}

/* ---------- Hero (front-page) ---------- */
.cb-hero{
	background: var(--cb-lacivert);
	color: #fff;
	padding: 48px 18px 64px;
	text-align: center;
}
.cb-hero-ic{ max-width: 560px; margin: 0 auto; }
.cb-hero h1{
	font-family: var(--cb-font-baslik);
	font-size: clamp(26px, 6vw, 38px);
	line-height: 1.15;
	margin: 0 0 14px;
}
.cb-hero p{
	font-size: 16px;
	opacity: .85;
	margin: 0 0 28px;
	line-height: 1.5;
}
.cb-hero-cta{
	display:flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content:center;
}
.cb-buton-birincil, .cb-buton-ikincil-hero{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	font-family: var(--cb-font-baslik);
	font-weight: 700;
	font-size: 15px;
	padding: 13px 24px;
	border-radius: 999px;
	cursor: pointer;
	border: none;
}
.cb-buton-birincil{
	background: var(--cb-sinyal);
	color: var(--cb-lacivert-koyu);
}
.cb-buton-birincil:hover{ background: var(--cb-sinyal-koyu); text-decoration:none; }
.cb-buton-ikincil-hero{
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255,255,255,.5);
}
.cb-buton-ikincil-hero:hover{ background: rgba(255,255,255,.1); text-decoration:none; }

/* ---------- Adımlar (front-page açıklama) ---------- */
.cb-adimlar-bolum{ padding: 44px 18px; }
.cb-adimlar-bolum h2{
	font-family: var(--cb-font-baslik);
	text-align:center;
	color: var(--cb-lacivert-koyu);
	font-size: 22px;
	margin: 0 0 28px;
}
.cb-adimlar-izgara{
	display:grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 720px;
	margin: 0 auto;
}
@media (min-width: 640px){
	.cb-adimlar-izgara{ grid-template-columns: repeat(3, 1fr); }
}
.cb-adim-kart{
	background: #fff;
	border: 1px solid var(--cb-cizgi);
	border-radius: var(--cb-radius);
	padding: 20px 16px;
}
.cb-adim-kart .cb-adim-no{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 28px; height: 28px;
	border-radius: 999px;
	background: var(--cb-lacivert);
	color:#fff;
	font-family: var(--cb-font-mono);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 10px;
}
.cb-adim-kart h3{
	font-family: var(--cb-font-baslik);
	font-size: 16px;
	margin: 0 0 6px;
	color: var(--cb-lacivert-koyu);
}
.cb-adim-kart p{
	font-size: 13.5px;
	color: var(--cb-metin-soluk);
	margin: 0;
	line-height: 1.5;
}

/* ---------- Sayaç şeridi ---------- */
.cb-sayac-seridi{
	background: var(--cb-travertin);
	padding: 22px 18px;
	text-align:center;
}
.cb-sayac-seridi .cb-sayac-sayi{
	font-family: var(--cb-font-baslik);
	font-size: 30px;
	font-weight: 700;
	color: var(--cb-lacivert-koyu);
	display:block;
}
.cb-sayac-seridi .cb-sayac-etiket{
	font-size: 13px;
	color: var(--cb-metin-soluk);
}

/* ---------- Genel sayfa başlığı ---------- */
.cb-sayfa-baslik{
	padding: 28px 18px 8px;
	max-width: 720px;
	margin: 0 auto;
}
.cb-sayfa-baslik h1{
	font-family: var(--cb-font-baslik);
	color: var(--cb-lacivert-koyu);
	font-size: 24px;
	margin: 0 0 6px;
}
.cb-sayfa-baslik p{
	color: var(--cb-metin-soluk);
	font-size: 14px;
	margin: 0;
}

/* ---------- Sayfa içerik kapsayıcı ---------- */
.cb-sayfa-icerik{
	padding: 18px 18px 50px;
}

/* ---------- Footer ---------- */
.cb-footer{
	background: var(--cb-lacivert-koyu);
	color: rgba(255,255,255,.75);
	text-align:center;
	padding: 22px 18px;
	font-size: 13px;
	margin-top: 30px;
}
.cb-footer a{ color: #fff; }

/* Erişilebilirlik: klavye odağı */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
	outline: 3px solid var(--cb-sinyal);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
	*{ scroll-behavior: auto !important; }
	.cb-dalga-tren{ animation: none; transform: translateX(0); }
}

/* ==========================================================================
   Bildirim formu
   ========================================================================== */

.cb-form-sarmal, .cb-harita-sarmal{
	font-family: var(--cb-font-govde);
	color: var(--cb-metin);
	max-width: 560px;
	margin: 0 auto;
	box-sizing: border-box;
}
.cb-harita-sarmal{ max-width: 720px; }
.cb-form-sarmal *, .cb-harita-sarmal *{ box-sizing: border-box; }

.cb-adim:not(:last-child){
	position: relative;
	padding-bottom: 28px;
	margin-bottom: 8px;
}
.cb-adim:not(:last-child)::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 6px;
	left: 0;
	right: 0;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q 15 0, 30 5 T 60 5 T 90 5 T 120 5' fill='none' stroke='%23DCD4C2' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 60px 10px;
	opacity: .9;
}

.cb-form{
	background: var(--cb-kagit);
	border: 1px solid var(--cb-cizgi);
	border-radius: var(--cb-radius);
	padding: 22px 20px 26px;
}

.cb-adim-no{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width: 26px; height: 26px;
	border-radius: 999px;
	background: var(--cb-lacivert);
	color: #fff;
	font-family: var(--cb-font-mono);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 8px;
}

.cb-baslik{
	display:block;
	font-family: var(--cb-font-baslik);
	font-size: 18px;
	font-weight: 600;
	color: var(--cb-lacivert-koyu);
	margin: 0 0 4px;
}

.cb-yardim{
	font-size: 13.5px;
	color: var(--cb-metin-soluk);
	margin: 0 0 12px;
}

.cb-foto-alani{
	display:flex;
	align-items:center;
	justify-content:center;
	width: 100%;
	min-height: 160px;
	border: 2px dashed var(--cb-cizgi);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .15s ease, background .15s ease;
}
.cb-foto-alani:hover{ border-color: var(--cb-sinyal); }
.cb-foto-placeholder{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap: 6px;
	color: var(--cb-metin-soluk);
	font-size: 14px;
}
.cb-foto-ikon{ font-size: 32px; }
.cb-foto-onizleme{
	width: 100%;
	height: 220px;
	object-fit: cover;
	display:block;
}

.cb-mini-harita{
	width: 100%;
	height: 180px;
	border-radius: 10px;
	margin-bottom: 10px;
	border: 1px solid var(--cb-cizgi);
}

.cb-buton-ikincil{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background: var(--cb-travertin);
	color: var(--cb-lacivert-koyu);
	border: 1px solid var(--cb-cizgi);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.cb-buton-ikincil:hover{ background: #e3dac4; }

.cb-kategori-izgara{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
@media (min-width: 420px){
	.cb-kategori-izgara{ grid-template-columns: repeat(3, 1fr); }
}
.cb-kategori-kart{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	padding: 12px 6px;
	border: 1.5px solid var(--cb-cizgi);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	font-size: 12.5px;
	text-align:center;
	font-weight: 500;
	color: var(--cb-metin);
	transition: all .12s ease;
}
.cb-kategori-kart .cb-kategori-ikon{ font-size: 22px; }
.cb-kategori-kart:hover{ border-color: var(--cb-sinyal); }
.cb-kategori-kart.cb-secili{
	border-color: var(--cb-lacivert);
	background: var(--cb-lacivert);
	color: #fff;
}

.cb-textarea{
	width: 100%;
	border: 1.5px solid var(--cb-cizgi);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: var(--cb-font-govde);
	font-size: 14.5px;
	resize: vertical;
}
.cb-textarea:focus{ outline: 2px solid var(--cb-sinyal); border-color: transparent; }

.cb-buton-gonder{
	width: 100%;
	background: var(--cb-sinyal);
	color: var(--cb-lacivert-koyu);
	border: none;
	border-radius: 999px;
	padding: 15px 20px;
	font-family: var(--cb-font-baslik);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 18px;
	transition: transform .08s ease, background .15s ease;
}
.cb-buton-gonder:hover{ background: var(--cb-sinyal-koyu); }
.cb-buton-gonder:active{ transform: scale(0.98); }
.cb-buton-gonder:disabled{ opacity: .6; cursor: not-allowed; transform:none; }

.cb-durum-mesaj{
	text-align:center;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	min-height: 1.2em;
}
.cb-durum-mesaj.cb-basarili{ color: var(--cb-cozuldu); }
.cb-durum-mesaj.cb-hata{ color: #B23A3A; }

/* ==========================================================================
   Harita / Liste sayfası
   ========================================================================== */

.cb-filtre-cubugu{
	display:flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 10px;
	margin-bottom: 12px;
	scrollbar-width: thin;
}
.cb-filtre-cip{
	flex: 0 0 auto;
	white-space: nowrap;
	background: #fff;
	border: 1.5px solid var(--cb-cizgi);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cb-metin);
	cursor: pointer;
}
.cb-filtre-cip.cb-aktif{
	background: var(--cb-lacivert);
	border-color: var(--cb-lacivert);
	color: #fff;
}

.cb-buyuk-harita{
	width: 100%;
	height: 380px;
	border-radius: var(--cb-radius);
	border: 1px solid var(--cb-cizgi);
	margin-bottom: 18px;
}

.cb-liste-baslik{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	margin-bottom: 10px;
}
.cb-liste-baslik h3{
	font-family: var(--cb-font-baslik);
	color: var(--cb-lacivert-koyu);
	margin: 0;
	font-size: 17px;
}
.cb-liste-sayac{
	font-family: var(--cb-font-mono);
	font-size: 12.5px;
	color: var(--cb-metin-soluk);
}

.cb-bildirim-listesi{ display:flex; flex-direction:column; gap: 10px; }

.cb-kart{
	display:flex;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--cb-cizgi);
	border-radius: 12px;
	padding: 12px;
	align-items: center;
}
.cb-kart-foto{
	width: 64px; height: 64px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--cb-travertin);
}
.cb-kart-govde{ flex: 1; min-width:0; }
.cb-kart-ust{
	display:flex;
	align-items:center;
	gap: 6px;
	font-size: 12px;
	color: var(--cb-metin-soluk);
	margin-bottom: 3px;
}
.cb-kart-baslik{
	font-weight: 600;
	font-size: 14.5px;
	margin: 0 0 2px;
	color: var(--cb-metin);
}
.cb-kart-aciklama{
	font-size: 13px;
	color: var(--cb-metin-soluk);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.cb-rozet{
	display:inline-flex;
	align-items:center;
	font-family: var(--cb-font-mono);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	color: #fff;
	white-space: nowrap;
}
.cb-kart-aksiyon{
	flex: 0 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap: 2px;
}
.cb-oy-buton{
	background: var(--cb-travertin);
	border: 1px solid var(--cb-cizgi);
	border-radius: 10px;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--cb-lacivert-koyu);
	display:flex;
	flex-direction:column;
	align-items:center;
	min-width: 52px;
}
.cb-oy-buton:hover{ background:#e3dac4; }
.cb-oy-buton.cb-oylandi{ background: var(--cb-lacivert); color:#fff; cursor:default; }
.cb-oy-buton small{ font-weight:500; font-size:10px; }

.cb-yukleniyor, .cb-bos{
	text-align:center;
	color: var(--cb-metin-soluk);
	padding: 24px 0;
	font-size: 14px;
}

.cb-popup{ font-family: var(--cb-font-govde); min-width: 180px; }
.cb-popup img{ width:100%; height:100px; object-fit:cover; border-radius:6px; margin-bottom:6px; }
.cb-popup h4{ margin: 0 0 4px; font-size: 13.5px; font-family: var(--cb-font-baslik); }
.cb-popup p{ margin: 0 0 6px; font-size: 12.5px; color: var(--cb-metin-soluk); }

/* ---------- Tekil bildirim sayfası ---------- */
.cb-tekil{
	max-width: 560px;
	margin: 0 auto;
	padding: 0 18px 40px;
}
.cb-tekil-foto{
	width: 100%;
	height: 280px;
	object-fit: cover;
	border-radius: var(--cb-radius);
	margin-bottom: 16px;
}
.cb-tekil-meta{
	display:flex;
	align-items:center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.cb-tekil h1{
	font-family: var(--cb-font-baslik);
	color: var(--cb-lacivert-koyu);
	font-size: 22px;
	margin: 0 0 10px;
}
.cb-tekil-harita{
	width: 100%;
	height: 220px;
	border-radius: 10px;
	margin: 14px 0;
	border: 1px solid var(--cb-cizgi);
}

@media (max-width: 480px){
	.cb-buyuk-harita{ height: 300px; }
	.cb-kart-foto{ width:52px; height:52px; }
	.cb-ust-bar-ic{ flex-direction: column; gap: 8px; text-align:center; }
}