/* GifGif Studio — ortak tema (logo renkleri: mavi #1e8bff -> turuncu #f7931e) */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Inter:wght@400;500;600&display=swap");

:root, :root[data-theme] {
  color-scheme: dark;
  --blue: #1e8bff; --blue-deep: #5aaeff; --orange: #f7931e; --orange-deep: #ff8a4c;
  --brand: linear-gradient(115deg, #1ac8ff 0%, #1e8bff 35%, #f7931e 70%, #ef5a2c 100%);
  --bg: #0a0f1f; --surface: #10172b; --text: #f2f5fc; --muted: #a4aec8; --border: rgba(255,255,255,.10);
  --accent: #5aaeff; --accent-deep: #7cc0ff; --shadow: 0 20px 40px -24px rgba(0,0,0,.9);
  --warn-bg: #2a1d0e; --warn-border: #8a5a22;
}
body { background: radial-gradient(900px 500px at 0% 0%, rgba(30,139,255,.18), transparent 60%), radial-gradient(800px 500px at 100% 30%, rgba(247,147,30,.12), transparent 60%), var(--bg) !important; }

html, body { background: var(--bg); color: var(--text); }
body { font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.65; }
h1, h2, h3, .tagline { font-family: "Nunito", "Inter", sans-serif; letter-spacing: -.01em; }
a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--orange-deep); }

/* ust bant: logodaki mavi-turuncu gecis */
.bant {
  background: rgba(10,15,31,.7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5;
  color: #fff;
  padding: 18px 20px;
}
.bant .ic { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.bant img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.18); background: #fff; }
.bant .ad { font-family: "Nunito", sans-serif; font-weight: 900; font-size: 1.25rem; color: #fff; text-decoration: none; }
.bant .alt { font-size: .88rem; opacity: .92; margin: 0; }
.bant a { color: #fff; }

/* eski sayfalardaki gradyan kare logonun yerine gercek logo */
.logo { background: url("/img/kuko.png") center / cover no-repeat !important; border-radius: 22% !important; box-shadow: var(--shadow); }
.card .icon { background: url("/img/logo-64.png") center / cover no-repeat; border-radius: 50%; }

h2 { color: var(--text); }
h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 10px; vertical-align: middle; background: var(--brand);
}
.card, .meta, .summary { box-shadow: var(--shadow); }
code { background: color-mix(in srgb, var(--accent) 10%, transparent); padding: 1px 6px; border-radius: 6px; }
footer { color: var(--muted); }