/* Mahalle afişi. Ölçüler milimetre: kâğıt 210 × 297 mm, tek sayfa.
   Ekranda üstte araç çubuğu ve gri masa üstünde kâğıt; yazdırırken yalnızca kâğıt. */

:root {
    --ink: #111827;
    --ink-2: #374151;
    --muted: #6B7280;
    --navy: #1E2B4D;
    --yellow: #F5B000;
    --paper: #FFFFFF;
    --hue: #1E2B4D;
    --soft: #EEF1F6;
}
[data-cat="egitim"] { --hue: #2F6680; --soft: #DCEAF1; }
[data-cat="saglik"] { --hue: #9A6A00; --soft: #FFF0C2; }
[data-cat="ulasim"] { --hue: #3E5C6B; --soft: #E3ECEF; }
[data-cat="cevre"] { --hue: #6B7A2E; --soft: #EEF0D6; }
[data-cat="ekonomi"] { --hue: #A07400; --soft: #FCE9B0; }
[data-cat="seffaflik"] { --hue: #44506A; --soft: #E4E7EE; }
[data-cat="sehircilik"] { --hue: #2F7A86; --soft: #D9EEF0; }
[data-cat="kultur"] { --hue: #8C5A1E; --soft: #F6E5CC; }
[data-cat="tarim"] { --hue: #7A6A3A; --soft: #EFE8D4; }
[data-cat="teknoloji"] { --hue: #3D4456; --soft: #DDE1EA; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #D9DCE1; color: var(--ink); font-family: 'Figtree', system-ui, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
a { color: inherit; text-decoration: none; }
[class^="icon-"], [class*=" icon-"] { line-height: 1; }

/* ---------- Araç çubuğu (yalnızca ekranda) ---------- */
.tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px max(16px, env(safe-area-inset-left)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(17, 24, 39, .08); font-size: 14px; }
.tools__back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tools__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.tool-opt { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; background: #F1F3F4; font-weight: 600; cursor: pointer; user-select: none; }
.tool-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.tools__print { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--yellow); color: #202124; font: inherit; font-weight: 700; cursor: pointer; }
.tools__print:hover { background: #FFC21F; }

.stage { display: grid; place-items: start center; padding: 28px 16px 60px; }

/* ---------- Kâğıt ---------- */
.sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 210mm;
    height: 297mm;
    padding: 13mm 14mm 0;
    overflow: hidden;
    background: var(--paper);
    box-shadow: 0 30px 60px -30px rgba(17, 24, 39, .45), 0 0 0 1px rgba(17, 24, 39, .06);
}
/* Renkli modda üstte kategori renginde ince bir şerit ve köşede yumuşak bir ışık */
.is-color .sheet::before { content: ""; position: absolute; inset: 0 0 auto; height: 3.2mm; background: linear-gradient(90deg, var(--hue), var(--yellow)); }
.is-color .sheet::after { content: ""; position: absolute; right: -40mm; top: -40mm; width: 120mm; height: 120mm; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--hue) 16%, transparent) 0%, transparent 65%); pointer-events: none; }

.sheet__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 6mm; }
.brand { display: inline-flex; align-items: center; gap: 3mm; }
.brand .logo-mark { width: 11mm; height: 11mm; color: var(--navy); }
.logo-mark__dot { fill: currentColor; opacity: .3; }
.logo-mark__plus { fill: var(--yellow); }
.brand__name { font-size: 5.4mm; letter-spacing: -.03em; }
.brand__name b { font-weight: 800; }
.sheet__stamp { display: inline-flex; align-items: center; gap: 1.6mm; padding: 1.6mm 3.4mm; border: .5mm solid var(--ink); border-radius: 99mm; font-size: 3.2mm; font-weight: 800; letter-spacing: .12em; }

.sheet__kicker { position: relative; z-index: 1; margin-top: 11mm; color: var(--hue); font-size: 3.6mm; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sheet__title { position: relative; z-index: 1; margin: 2.5mm 0 0; font-size: 12.5mm; font-weight: 800; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }

.sheet__meta { display: flex; flex-wrap: wrap; gap: 2mm; margin-top: 5mm; }
.chip { display: inline-flex; align-items: center; gap: 1.5mm; padding: 1.4mm 3mm; border-radius: 99mm; background: #F1F3F4; color: var(--ink-2); font-size: 3.3mm; font-weight: 600; }
.chip i { font-size: 3.6mm; }
.chip--cat { background: var(--soft); color: var(--hue); font-weight: 800; }

.sheet__photo { flex: 1 1 0; min-height: 40mm; max-height: 82mm; margin: 6mm 0 0; overflow: hidden; border-radius: 5mm; background: #F1F3F4; }
.sheet__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
body:not(.has-photo) .sheet__photo { display: none; }

.sheet__body { margin: 6mm 0 0; color: var(--ink-2); font-size: 4.2mm; line-height: 1.5; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; }
/* Fotoğraf yoksa açıklama, boş kalan alanı dolduran büyük bir alıntı kutusuna dönüşür. */
body:not(.has-photo) .sheet__body { position: relative; flex: 1 1 auto; min-height: 0; margin: 7mm 0 7mm; padding: 13mm 10mm 9mm; border-radius: 6mm; background: var(--soft); color: var(--ink); font-size: 5.6mm; font-weight: 500; line-height: 1.45; -webkit-line-clamp: 9; line-clamp: 9; }
body:not(.has-photo) .sheet__body::before { content: "“"; position: absolute; left: 8mm; top: 1mm; color: var(--hue); font-size: 22mm; font-weight: 800; line-height: 1; }
body:not(.is-color):not(.has-photo) .sheet__body { background: #FFFFFF; box-shadow: inset 0 0 0 .4mm #D1D5DB; }
body:not(.is-color) .sheet__body::before { color: var(--ink); }
.sheet__label { display: inline-block; margin-right: 1.2mm; padding: .5mm 1.8mm; background: var(--ink); color: #FFFFFF; font-size: .62em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; vertical-align: .2em; }
.sheet__label--solution { margin-top: 2.5mm; background: var(--hue); }
body:not(.is-color) .sheet__label--solution { background: var(--ink); }

.sheet__act { display: grid; grid-template-columns: 52mm 1fr; align-items: center; gap: 7mm; margin-top: auto; padding: 6mm; border-radius: 6mm; background: var(--navy); color: #FFFFFF; }
.qr { width: 52mm; height: 52mm; padding: 2.2mm; border-radius: 3.5mm; background: #FFFFFF; }
.qr svg { display: block; width: 100%; height: 100%; }
.act__title { font-size: 6.4mm; font-weight: 800; line-height: 1.08; letter-spacing: -.02em; }
.act__title span { color: var(--yellow); }
.act__steps { display: grid; gap: 2.2mm; margin: 4.5mm 0 0; padding: 0; list-style: none; }
.act__steps li { display: flex; align-items: center; gap: 2.8mm; font-size: 3.3mm; line-height: 1.3; }
.act__steps b { display: grid; place-items: center; flex: none; width: 6.4mm; height: 6.4mm; border-radius: 50%; background: var(--yellow); color: #202124; font-size: 3.3mm; }
.act__steps strong { display: block; font-size: 3.6mm; }
.act__steps span { color: rgba(255, 255, 255, .82); }
.act__url { display: inline-flex; align-items: center; gap: 1.8mm; margin-top: 4.5mm; padding: 1.6mm 3.2mm; border-radius: 99mm; background: rgba(255, 255, 255, .12); font-size: 3.6mm; font-weight: 700; }

.sheet__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; margin: 5mm 0 0; }
.sheet__stats div { padding: 3mm 4mm; border-radius: 4mm; background: #F4F5F7; }
.sheet__stats dt { order: 2; color: var(--muted); font-size: 3mm; font-weight: 600; }
.sheet__stats dd { margin: 0; font-size: 7.2mm; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sheet__stats div { display: flex; flex-direction: column-reverse; }

.sheet__foot { display: flex; justify-content: space-between; gap: 6mm; margin-top: 4mm; padding-bottom: 5mm; color: var(--muted); font-size: 2.9mm; }

/* Kopar-al şeridi: afişin dibinde, kesik çizgiyle ayrılmış dikey sekmeler */
.strip { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); height: 33mm; margin: 0 -14mm; border-top: .45mm dashed #9CA3AF; }
body:not(.has-strip) .strip { display: none; }
body:not(.has-strip) .sheet__foot { padding-bottom: 9mm; }
.strip__cut { position: absolute; left: 6mm; top: -2.7mm; display: grid; place-items: center; width: 5mm; height: 5mm; background: var(--paper); color: #6B7280; font-size: 4mm; }
/* Her sekmede küçük karekod ve kısa adres: koparılan parça da okutulabilir. 17 mm, telefon kameraları için rahat bir boyut. */
.strip__tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8mm; min-width: 0; padding: 0 1mm; border-right: .3mm dashed #D1D5DB; text-align: center; }
.strip__tab:last-child { border-right: 0; }
.strip__qr { display: block; width: 17mm; height: 17mm; }
.strip__qr svg { display: block; width: 100%; height: 100%; }
.strip__tab b { font-size: 3.2mm; letter-spacing: -.01em; line-height: 1; }
.strip__tab small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 2.1mm; line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Mürekkep tasarrufu (renkli kapalı) ---------- */
body:not(.is-color) .sheet__act { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 .5mm var(--ink); }
body:not(.is-color) .act__title span { color: var(--ink); }
body:not(.is-color) .act__steps b { background: var(--ink); color: #FFFFFF; }
body:not(.is-color) .act__steps span { color: var(--ink-2); }
body:not(.is-color) .act__url { background: #F1F3F4; }
body:not(.is-color) .sheet__kicker, body:not(.is-color) .chip--cat { color: var(--ink); }
body:not(.is-color) .chip--cat { background: #F1F3F4; }
body:not(.is-color) .sheet__photo img { filter: grayscale(1); }
body:not(.is-color) .logo-mark__plus { fill: var(--ink); }

/* ---------- Ekran: kâğıt ekrana sığsın ---------- */
@media screen and (max-width: 860px) { .sheet { zoom: .62; } }
@media screen and (max-width: 560px) { .sheet { zoom: .42; } .tools__opts { margin-left: 0; } }

/* ---------- Yazdırma ---------- */
@page { size: A4 portrait; margin: 0; }
@media print {
    body { background: #FFFFFF; }
    .tools { display: none; }
    .stage { display: block; padding: 0; }
    .sheet { box-shadow: none; zoom: 1; }
}