package main

// Yerel kopru arayuzunun ortak gorunumu: renkler, bilesenler ve sayfa kabugu.
// Renkler CSS degiskenleri olarak tanimlanir; acik ve koyu tema sistem ayarina gore secilir,
// data-theme ile elle de zorlanabilir.

import "html"

const arayuzTemaCSS = `
:root{--bg:#f3f6fb;--yuzey:#ffffff;--yuzey2:#f7f9fc;--kenar:#e3e8f0;--metin:#0f172a;--soluk:#64748b;
--vurgu:#2185d0;--vurgu-koyu:#1a6fb3;--vurgu-acik:#e6f0fb;
--basari:#047857;--basari-acik:#e7f8f0;--tehlike:#b91c1c;--tehlike-acik:#fdecec;--uyari:#b45309;
--golge:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06);--yaricap:14px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--bg:#0b1120;--yuzey:#121a2c;--yuzey2:#18223a;--kenar:#243152;--metin:#e5ebf5;--soluk:#94a3b8;
--vurgu:#4ea8ea;--vurgu-koyu:#7bbcf0;--vurgu-acik:#15304d;
--basari:#34d399;--basari-acik:#0f2e25;--tehlike:#f87171;--tehlike-acik:#3a1717;--uyari:#fbbf24;
--golge:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
--bg:#0b1120;--yuzey:#121a2c;--yuzey2:#18223a;--kenar:#243152;--metin:#e5ebf5;--soluk:#94a3b8;
--vurgu:#4ea8ea;--vurgu-koyu:#7bbcf0;--vurgu-acik:#15304d;
--basari:#34d399;--basari-acik:#0f2e25;--tehlike:#f87171;--tehlike-acik:#3a1717;--uyari:#fbbf24;
--golge:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--metin);font:14px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.ust{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--yuzey);border-bottom:1px solid var(--kenar)}
.marka{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#2a92e6,#1a6fb3);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex:none;box-shadow:0 4px 12px rgba(33,133,208,.35)}
.marka-ad{font-weight:700;font-size:15px}
.marka-alt{font-size:12px;color:var(--soluk)}
.ust-link{font-size:13px;color:var(--vurgu);text-decoration:none;font-weight:600;padding:6px 10px;border-radius:8px}
.ust-link:hover{background:var(--vurgu-acik)}
.kapsayici{max-width:980px;margin:0 auto;padding:24px 20px 40px}
.geri{display:inline-block;margin-bottom:12px;color:var(--vurgu);text-decoration:none;font-size:13px;font-weight:600}
.sayfa-baslik{font-size:22px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.kart{background:var(--yuzey);border:1px solid var(--kenar);border-radius:var(--yaricap);box-shadow:var(--golge);padding:22px;margin-bottom:16px}
.kart-baslik{font-size:16px;font-weight:700;margin:0 0 4px}
.aciklama{color:var(--soluk);margin:0 0 16px;line-height:1.55}
.alt{font-size:12px;color:var(--soluk);margin-top:2px}
.rozet{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--yuzey2);color:var(--soluk);border:1px solid var(--kenar);white-space:nowrap}
.rozet::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.rozet.ok{color:var(--basari);background:var(--basari-acik);border-color:transparent}
.rozet.uyari{color:var(--uyari)}
.stat-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:18px}
.stat{background:var(--yuzey2);border:1px solid var(--kenar);border-radius:12px;padding:14px 16px}
.stat-etiket{font-size:12px;color:var(--soluk);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.stat-deger{font-size:16px;font-weight:700;margin-top:4px;word-break:break-word}
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.kare{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;border:1px solid var(--kenar);border-radius:var(--yaricap);background:var(--yuzey);color:var(--metin);text-decoration:none;text-align:center;box-shadow:var(--golge);transition:transform .15s,border-color .15s}
.kare:hover{transform:translateY(-2px);border-color:var(--vurgu)}
.kare.ekle{border-style:dashed;box-shadow:none;color:var(--vurgu);background:transparent}
.kare .ad{font-weight:600;word-break:break-all}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--vurgu-acik);color:var(--vurgu);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;flex:none}
.sekmeler{display:flex;gap:4px;border-bottom:1px solid var(--kenar);margin-bottom:16px;overflow-x:auto}
.sekmeler button{background:none;border:0;padding:10px 14px;font:inherit;font-weight:600;color:var(--soluk);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.sekmeler button:hover{color:var(--metin)}
.sekmeler button.acik{color:var(--vurgu);border-bottom-color:var(--vurgu)}
.sekme{display:none}
.sekme.acik{display:block}
.satir{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--kenar)}
.satir:last-child{border-bottom:0}
.satir .bilgi{flex:1;min-width:0}
.baslik{font-weight:600}
.satir-link{text-decoration:none;color:inherit;border-radius:10px;margin:0 -10px;padding:14px 10px}
.satir-link:hover{background:var(--yuzey2)}
.dugme{font:inherit;font-size:13px;font-weight:600;padding:8px 14px;border-radius:9px;border:1px solid var(--kenar);background:var(--yuzey);color:var(--metin);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s}
.dugme:hover{background:var(--yuzey2)}
.dugme.birincil{background:var(--vurgu);border-color:var(--vurgu);color:#fff}
.dugme.birincil:hover{background:var(--vurgu-koyu)}
.dugme.tehlike{color:var(--tehlike);border-color:var(--tehlike-acik);background:var(--tehlike-acik)}
.dugme.tehlike:hover{filter:brightness(.97)}
.dugmeler{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
input[type=text],input[type=password],input[type=number],input:not([type]){font:inherit;padding:8px 10px;border:1px solid var(--kenar);border-radius:9px;background:var(--yuzey2);color:var(--metin);outline:none}
input:focus{border-color:var(--vurgu);box-shadow:0 0 0 3px var(--vurgu-acik)}
.anahtar{position:relative;width:44px;height:24px;flex:none}
.anahtar input{opacity:0;width:0;height:0;position:absolute}
.anahtar span{position:absolute;inset:0;background:var(--kenar);border-radius:24px;transition:.2s;cursor:pointer}
.anahtar span:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.anahtar input:checked+span{background:var(--vurgu)}
.anahtar input:checked+span:before{transform:translateX(20px)}
.anahtar input:focus-visible+span{box-shadow:0 0 0 3px var(--vurgu-acik)}
.etiket{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--yuzey2);color:var(--soluk);border:1px solid var(--kenar);white-space:nowrap}
.etiket.yesil{background:var(--basari-acik);color:var(--basari);border-color:transparent}
.bos{color:var(--soluk);text-align:center;padding:22px;border:1px dashed var(--kenar);border-radius:12px}
.kutu{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:12px}
.bildirim{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--metin);color:var(--yuzey);padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:var(--golge);transition:.25s}
.bildirim.acik{opacity:1;transform:translateX(-50%) translateY(0)}
.hata{color:var(--tehlike);background:var(--tehlike-acik);padding:10px 12px;border-radius:9px;font-size:13px}
.not{font-size:12px;color:var(--soluk);margin-top:14px;text-align:center}
.ust-satir{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.hesap-bas{display:flex;align-items:center;gap:14px;min-width:0}
@media (max-width:600px){.ust{padding:10px 16px}.kapsayici{padding:18px 14px 32px}.sayfa-baslik{font-size:19px}.kart{padding:18px}.satir{flex-wrap:wrap}}
`

// sayfaKabugu: tum yerel sayfalarin ortak iskeleti (ust cubuk, icerik, bildirim, betik).
func sayfaKabugu(baslik, icerik, token, geri string) string {
	geriHTML := ""
	if geri != "" {
		geriHTML = `<a class="geri" href="` + html.EscapeString(geri) + `">&larr; Geri</a>`
	}
	return `<!doctype html><html lang="tr"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="csrf" content="` + html.EscapeString(token) + `">
<title>` + html.EscapeString(baslik) + ` · FikoYT Yerel Köprü</title>
<style>` + arayuzTemaCSS + `</style></head><body>
<header class="ust"><div class="marka"><div class="logo">F</div><div><div class="marka-ad">FikoYT Yerel Köprü</div><div class="marka-alt">Sürüm ` + html.EscapeString(surum) + `</div></div></div><a class="ust-link" href="/">Ana sayfa</a></header>
<main class="kapsayici">` + geriHTML + icerik + `</main>
<div id="bildirim" class="bildirim" role="status"></div>
<script>` + ayarlarBetik + `</script></body></html>`
}