/* kekec.tr ortak stil dosyası. Değiştirdiğinde inc/cekirdek.php içindeki SURUM değerini artır. */
:root {
  /* Logo renkleri: lacivert #0f2c5e, turkuaz #1cc5d8 */
  --bg: #0a1428;
  --surface: #0f1d36;
  --surface-hover: #132442;
  --line: #1e3050;
  --line-strong: #30476d;
  --text: #edf2f8;
  --body: #c4cfdd;
  --muted: #8fa1b9;
  --navy: #0f2c5e;
  --accent: #1cc5d8;
  --accent-soft: rgba(28, 197, 216, .12);
  --accent-glow: rgba(28, 197, 216, .2);
  --on-accent: #0a1428;

  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-logo: "Poppins", var(--font-body);
  --font-tag: "Permanent Marker", "Segoe Print", "Bradley Hand", cursive;

  --gutter: clamp(16px, 5vw, 56px);
  --maxw: 1120px;
  --radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Üstte çok hafif bir ızgara ve bir ışık, aşağıya doğru kaybolur */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(90vh, 760px);
  z-index: -1;
  background-image:
    radial-gradient(60% 70% at 85% 0%, rgba(15, 44, 94, .55), transparent 70%),
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
  pointer-events: none;
}
.proje-sayfasi::before {
  background-image:
    radial-gradient(55% 65% at 80% 8%, var(--accent-glow), transparent 70%),
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -60px;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  z-index: 20;
}
.skip:focus { top: 12px; }

/* ---------- Üst çubuk ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 20, 40, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(10, 20, 40, .72);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
  }
}
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  min-width: 0;
}
.wordmark .mark { width: 32px; height: 32px; flex: none; }
.tld { color: #1cc5d8; }
.bar nav { display: flex; align-items: center; gap: clamp(14px, 4vw, 32px); }
.bar nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.975rem;
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.bar nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

.proje-wordmark { font-family: var(--font-body); font-size: 1.2rem; }
.proje-wordmark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar nav a.ana-site {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 0.9rem;
}
.bar nav a.ana-site:hover { border-color: var(--accent); }
.ana-site .mark { width: 22px; height: 22px; }

@media (max-width: 640px) {
  .gizle-mobil { display: none; }
}

/* ---------- Uygulama ikonu ---------- */
.app-icon {
  flex: none;
  border-radius: 22%;
  object-fit: cover;
  background: var(--surface);
}
.app-icon-harf {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, var(--ikon), color-mix(in srgb, var(--ikon) 55%, #0a1428));
  color: #0a1428;
  font-family: var(--font-logo);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.app-icon-kucuk.app-icon-harf { font-size: 0.8rem; }
.app-icon-buyuk.app-icon-harf { font-size: 1.6rem; }
.app-icon-dev.app-icon-harf { font-size: 3.6rem; }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .app-icon-harf { background: var(--ikon); }
}

/* ---------- Ana sayfa girişi ---------- */
.hero { padding-block: clamp(40px, 9vh, 96px) clamp(40px, 8vh, 88px); }

.tag {
  margin: 0;
  font-family: var(--font-tag);
  font-weight: 400;
  font-size: clamp(4rem, 24vw, 12rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  transform: rotate(-3deg);
  transform-origin: left bottom;
  width: fit-content;
  position: relative;
  padding-bottom: 0.22em;
}
.tag-line {
  display: block;
  width: fit-content;
  clip-path: inset(-12% 100% -12% -2%);
  animation: write .8s cubic-bezier(.65, .05, .3, 1) forwards;
}
.tag-stroke {
  position: absolute;
  left: 0.05em;
  bottom: 0;
  width: 92%;
  height: 0.2em;
  overflow: visible;
  pointer-events: none;
}
.tag-stroke path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw .7s ease-out .8s forwards;
}
@keyframes write { to { clip-path: inset(-12% -6% -12% -2%); } }
@keyframes draw  { to { stroke-dashoffset: 0; } }

.intro {
  margin: clamp(32px, 6vw, 56px) 0 0;
  max-width: 34ch;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.byline { margin: 16px 0 0; color: var(--muted); max-width: 52ch; }

/* ---------- Bölümler ---------- */
section { padding-block: clamp(40px, 7vw, 84px); }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(24px, 4vw, 40px); }
.section-head h2, .sayfa-basligi h1 {
  margin: 0;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.section-head p { margin: 0; color: var(--muted); max-width: 52ch; }
.sayfa-basligi { margin-top: 8px; }

/* ---------- Proje kartları: kartı saran ilerleme çubuğu ---------- */
.coming { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.card {
  position: relative;
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .015);
  display: grid;
  gap: 10px;
  align-content: start;
  transition: background-color .25s, transform .25s;
}
.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ring rect { fill: none; stroke-width: 2.5; }
.ring-track { stroke: var(--line); }
.ring-fill  { stroke: var(--kart-renk, var(--accent)); stroke-dasharray: var(--p) 100; }
.card-title { display: flex; align-items: center; gap: 14px; }
.card h2, .card h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.card-link { text-decoration: none; }
/* Kartın tamamı tıklanabilir; düğmeler bunun üstünde kalır */
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 0; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.card p { margin: 0; color: var(--body); }
.card .card-tur { color: var(--kart-renk, var(--accent)); font-size: 0.9rem; font-weight: 500; margin-top: -4px; }
.status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--muted);
}
.pct { color: var(--kart-renk, var(--accent)); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.card .btn { background: var(--kart-renk, var(--accent)); }
.card .btn-ghost { background: transparent; }
@media (hover: hover) {
  .card:hover { background: rgba(255, 255, 255, .035); transform: translateY(-2px); }
}

/* ---------- Yaptıklarım ---------- */
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 32px);
  background: linear-gradient(160deg, var(--surface) 0%, #0c182e 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s, background-color .25s, transform .25s;
}
.icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}
.icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.area h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.area p { margin: 0; max-width: 52ch; color: var(--body); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: auto 0 0;
  padding: 10px 0 0;
}
.chips li {
  padding: 3px 11px;
  font-size: 0.85rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, .02);
}

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-block;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: filter .2s, transform .2s, box-shadow .2s, color .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn-ghost:hover { filter: none; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.card .btn-ghost:hover { color: var(--kart-renk, var(--accent)); box-shadow: inset 0 0 0 1.5px var(--kart-renk, var(--accent)); }
.btn-buyuk { padding: 13px 26px; font-size: 1.02rem; }

/* ---------- İletişim ---------- */
.contact { display: grid; gap: 28px; }
.contact .section-head { margin-bottom: 0; align-content: start; }
.mail-line { color: var(--muted); }
.mail-line a { color: var(--text); text-underline-offset: 3px; }

.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 0.9rem; color: var(--muted); }
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover,
.field textarea:hover { border-color: var(--line-strong); }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-btn {
  padding: 6px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--body);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.quick-btn:hover { border-color: var(--accent); color: var(--text); }
.quick-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* Bot tuzağı: ekranda görünmez */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-status { margin: 0; min-height: 1.4em; font-size: 0.95rem; color: var(--body); }
.form-status.ok { color: var(--accent); }
.form-status.err { color: #f0a79a; }
.form-status a { color: var(--text); text-underline-offset: 3px; }
.note { margin: 0; color: var(--muted); font-size: 0.875rem; }
.note a { color: var(--body); text-underline-offset: 3px; }

/* ---------- Sayfa yolu ---------- */
.kirinti { padding-top: clamp(18px, 3vw, 28px); font-size: 0.9rem; color: var(--muted); }
.kirinti ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.kirinti li { display: flex; align-items: center; }
.kirinti li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
.kirinti a { text-decoration: none; }
.kirinti a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.kirinti [aria-current] { color: var(--body); }

/* ---------- Proje sayfası ---------- */
.p-hero { padding-block: clamp(24px, 5vw, 56px) clamp(40px, 7vw, 80px); }
.p-hero-grid { display: grid; gap: clamp(32px, 6vw, 72px); align-items: center; }
.p-etiketler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.p-etiket {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--body);
  border: 1px solid var(--line-strong);
}
.p-durum { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.p-durum-yayinda { color: #5fe0a0; border-color: #5fe0a0; background: rgba(95, 224, 160, .1); }
.p-ad { display: flex; align-items: center; gap: 18px; }
.p-ad h1 {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: anywhere;
}
.app-icon-buyuk { width: clamp(56px, 12vw, 72px) !important; height: clamp(56px, 12vw, 72px) !important; }
.p-slogan {
  margin: 22px 0 0;
  max-width: 30ch;
  font-size: clamp(1.3rem, 3.6vw, 1.8rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.p-ozet { margin: 14px 0 0; color: var(--body); max-width: 54ch; }
.p-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.p-bilgi {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.p-bilgi div { display: grid; gap: 2px; }
.p-bilgi dt { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.p-bilgi dd { margin: 0; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.p-bilgi dd a { text-underline-offset: 3px; }
.p-ilerleme { display: inline-block; width: 90px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.p-ilerleme span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

.p-hero-gorsel { display: grid; place-items: center; }
.telefon {
  margin: 0;
  width: min(300px, 72vw);
  padding: 10px;
  border-radius: 38px;
  background: linear-gradient(160deg, #1b2b47, #0b1527);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px -20px var(--accent-glow), 0 20px 50px rgba(0,0,0,.45);
}
.telefon img { display: block; width: 100%; border-radius: 29px; }
.p-ikon-sahne {
  display: grid;
  place-items: center;
  width: min(320px, 70vw);
  aspect-ratio: 1;
  border-radius: 40px;
  background: radial-gradient(circle at 50% 40%, var(--accent-glow), transparent 70%);
}

.ozellikler { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ozellikler li {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface) 0%, #0c182e 100%);
}
.ozellikler .icon { width: 38px; height: 38px; border-radius: 11px; margin-bottom: 12px; }
.ozellikler .icon svg { width: 20px; height: 20px; stroke-width: 2.2; }
.ozellikler h3 { margin: 0 0 4px; font-size: 1.12rem; letter-spacing: -0.01em; line-height: 1.3; }
.ozellikler p { margin: 0; color: var(--body); font-size: 0.98rem; }

/* ---------- Kaydırmalı vitrin (video ve ekran görüntüsü) ---------- */
.medya-bolumu { overflow: hidden; }
.slider { --slayt: min(270px, 66vw); position: relative; }
.video-slider { --slayt: min(300px, 74vw); }
.slider-iz {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 34px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  /* İlk ve son slayt da ortaya gelebilsin */
  padding: 18px calc(50% - var(--slayt) / 2) 10px;
  scrollbar-width: none;
}
.slider-iz::-webkit-scrollbar { display: none; }
.slider-iz:focus-visible { outline: none; }
.slider-iz:focus-visible .slayt.aktif .telefon { outline: 2px solid var(--accent); outline-offset: 6px; }
.slayt {
  flex: none;
  width: var(--slayt);
  scroll-snap-align: center;
  opacity: .42;
  transform: scale(.86);
}
.slider.hazir .slayt { transition: opacity .35s ease, transform .35s ease; }
.slayt.aktif, .slider:not(.hazir) .slayt:first-child { opacity: 1; transform: none; }
.slayt-yatay { width: min(720px, 88vw); }
.slider.tek .slayt { opacity: 1; transform: none; }
.slayt .telefon { width: 100%; }
.slayt:not(.aktif) { cursor: pointer; }

.slayt-baslik {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  font-weight: 600;
  text-align: center;
}
.slayt-baslik .sure {
  padding: 1px 9px;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.slider-alt { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; padding-inline: var(--gutter); }
.slider-ok {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.slider-ok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.slider-ok:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.slider-ok:disabled { opacity: .35; cursor: default; }
.slider-noktalar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
/* Görünen nokta küçük kalır; dokunma alanı parmağa uygun (34px) */
.slider-noktalar button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.slider-noktalar button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--line-strong);
  transition: width .3s, background-color .3s;
}
.slider-noktalar button[aria-current="true"]::before { width: 22px; background: var(--accent); }

/* Ekran görüntüsü: büyütme düğmesi telefon çerçevesinin kendisi */
button.telefon { display: block; border: 0; font: inherit; color: inherit; cursor: zoom-in; }
.slayt:not(.aktif) button.telefon { cursor: pointer; }

/* Video: telefon çerçevesinde 9:16, yatay videolarda 16:9 */
.video-kutu { position: relative; overflow: hidden; border-radius: 29px; background: #050b17; aspect-ratio: 9 / 16; }
.video-telefon.yatay { border-radius: 22px; }
.video-telefon.yatay .video-kutu { aspect-ratio: 16 / 9; border-radius: 14px; }
.video-kutu video, .video-kutu img, .video-kutu iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
.video-kutu video { object-fit: contain; background: #050b17; }
.oynat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: linear-gradient(to top, rgba(5, 11, 23, .55), transparent 55%);
  cursor: pointer;
  color: var(--on-accent);
}
.oynat svg {
  width: 74px;
  height: 74px;
  padding: 22px 20px 22px 24px;
  border-radius: 50%;
  background: var(--accent);
  fill: currentColor;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 8px var(--accent-soft);
  transition: transform .2s;
}
.oynat:hover svg { transform: scale(1.07); }
.oynat:focus-visible { outline: none; }
.oynat:focus-visible svg { outline: 3px solid var(--text); outline-offset: 4px; }
.video-kutu.oynuyor .oynat { display: none; }
.slayt:not(.aktif) .oynat svg { transform: scale(.85); }

.btn-video { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn-video svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Büyütme penceresi ---------- */
.isik-kutusu {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(5, 11, 23, .94);
  color: var(--text);
}
.isik-kutusu::backdrop { background: rgba(5, 11, 23, .7); }
.isik-kutusu[open] { display: grid; grid-template-rows: 1fr auto; place-items: center; }
.isik-kutusu img {
  max-width: min(92vw, 520px);
  max-height: calc(100vh - 110px);
  width: auto;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  margin-top: 24px;
}
.isik-kutusu p { margin: 0 0 20px; padding-inline: 70px; color: var(--body); font-size: 0.95rem; text-align: center; max-width: 70ch; }
.isik-kutusu .slider-ok { position: absolute; top: 50%; transform: translateY(-50%); }
.isik-kutusu [data-lk-onceki] { left: max(12px, 3vw); }
.isik-kutusu [data-lk-sonraki] { right: max(12px, 3vw); }
.isik-kutusu [data-lk-kapat] { position: absolute; top: 14px; right: 14px; transform: none; }
.isik-kutusu [data-lk-sayac] { position: absolute; top: 24px; left: 20px; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* ---------- Uzun yazı (proje açıklaması, hakkımda, gizlilik) ---------- */
.yazi { max-width: 720px; color: var(--body); }
.yazi h1 {
  margin: 12px 0 18px;
  color: var(--text);
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.yazi h2 {
  margin: 36px 0 10px;
  color: var(--text);
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.yazi > h2:first-child { margin-top: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; }
.yazi p, .yazi ul { margin: 0 0 14px; }
.yazi ul { padding-left: 1.2em; }
.yazi li { margin-bottom: 6px; }
.yazi a { color: var(--text); text-underline-offset: 3px; }
.yazi a:hover { color: var(--accent); }
.yazi strong { color: var(--text); font-weight: 600; }
.yazi-tarih { color: var(--muted); font-size: 0.92rem; }
.kutu { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.kutu p:last-child { margin: 0; }
.icindekiler { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.icindekiler a {
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--body);
}
.icindekiler a:hover { border-color: var(--accent); color: var(--text); }

/* ---------- SSS ---------- */
.sss { display: grid; gap: 10px; max-width: 820px; }
.sss details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
  transition: border-color .2s;
}
.sss details[open] { border-color: var(--line-strong); background: var(--surface); }
.sss summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; flex: none; }
.sss details[open] summary::after { content: "–"; }
.sss details p { margin: 0; padding: 0 20px 18px; color: var(--body); }

/* ---------- Proje sonu çağrısı ---------- */
.p-son-kutu {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 22px;
  border: 1px solid var(--line-strong);
  background: radial-gradient(80% 140% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface);
}
.p-son-kutu h2 { margin: 0 0 6px; font-size: clamp(1.35rem, 3.4vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; }
.p-son-kutu p { margin: 0; color: var(--body); max-width: 58ch; }

/* ---------- Reklam alanı ---------- */
.reklam { margin-block: 12px; text-align: center; min-height: 100px; }
.reklam-etiket { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- Boş / 404 ---------- */
.bos-sayfa { padding-block: 80px; text-align: center; }
.bos-sayfa h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0 0 8px; }
.bos-sayfa p { color: var(--muted); }

/* ---------- Alt bilgi ---------- */
.site-footer {
  margin-top: clamp(24px, 5vw, 48px);
  border-top: 1px solid var(--line);
  padding-block: 40px 28px;
  color: var(--muted);
  font-size: 0.93rem;
}
.footer-grid { display: grid; gap: 28px; }
.footer-who p { margin: 12px 0 0; max-width: 36ch; }
.footer-who .wordmark { color: var(--text); }
.footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; }
.footer-links h2 { margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--body); }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-links a, .fine a { text-decoration: none; color: inherit; }
.footer-links a:hover, .fine a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fine {
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

/* ---------- Ekran boyutları ---------- */
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .ozellikler { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 620px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .coming { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
  .p-son-kutu { grid-template-columns: auto 1fr auto; }
  .footer-grid { grid-template-columns: 1fr 1.6fr; }
}
@media (min-width: 860px) {
  .contact { grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
  .p-hero-grid { grid-template-columns: 1.25fr 1fr; }
}
@media (min-width: 960px) {
  .areas { grid-template-columns: repeat(6, 1fr); }
  .area.wide   { grid-column: span 4; }
  .area.narrow { grid-column: span 2; }
  .ozellikler { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .bar nav a { font-size: 0.9rem; }
  .p-cta .btn { flex: 1 1 100%; }
}

@media (hover: hover) {
  .area:hover {
    border-color: var(--line-strong);
    background: var(--surface-hover);
    transform: translateY(-2px);
  }
}

/* Hareketi azalt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tag-line { animation: none; clip-path: none; }
  .tag-stroke path { animation: none; stroke-dashoffset: 0; }
  .area, .card, .bar nav a, .btn, .quick-btn, .field input, .field textarea, .slider.hazir .slayt, .oynat svg { transition: none; }
  .area:hover, .card:hover { transform: none; }
}

/* Plaka Avı oyuncu puanı (yalnızca gerçek oy varsa basılır) */
.card-rating, .p-rating { display: inline-flex; align-items: baseline; gap: 4px; margin: 2px 0 6px; font-size: 0.92rem; color: var(--text, inherit); }
.card-rating .puan-yildiz, .p-rating .puan-yildiz { color: #f5b942; font-size: 1.05em; }
.card-rating .puan-adet, .p-rating .puan-adet { color: var(--muted, #8a94a6); font-weight: 400; }
.p-rating { font-size: 1rem; }

/* ---------- Rehberler ---------- */
.rehber-liste { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .rehber-liste { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.rehber-kart {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: background-color .25s, border-color .25s, transform .25s;
}
.rehber-kart:hover { background: var(--surface-hover); border-color: var(--line-strong); transform: translateY(-2px); }
.rehber-kart h2, .rehber-kart h3 { margin: 0; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.rehber-kart h2 a, .rehber-kart h3 a { color: var(--text); }
.rehber-kart p { margin: 0; color: var(--body); }
.rehber-kart .rehber-ust { color: var(--muted); font-size: 0.85rem; }
.rehber-oku { color: var(--accent); font-weight: 500; font-size: 0.95rem; }
.rehber-hepsi { margin: 24px 0 0; }
.yazi ol { margin: 0 0 14px; padding-left: 1.4em; }
.yazi h3 { margin: 26px 0 8px; color: var(--text); font-size: 1.12rem; line-height: 1.3; }
.yazi h2[id] { scroll-margin-top: 90px; }
.not-kutusu { margin: 0 0 18px; border-left: 3px solid var(--accent); }
.tablo-kap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; }
.yazi table { width: 100%; border-collapse: collapse; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.yazi th, .yazi td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.yazi th { color: var(--text); background: var(--surface); font-weight: 600; white-space: nowrap; }
.yazi tbody tr:last-child td { border-bottom: 0; }
.yazi tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
.rehber-proje {
  display: grid;
  gap: 14px;
  align-items: center;
  margin: 36px 0 0;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--kart-renk, var(--accent)) 14%, var(--surface)), var(--surface));
}
@media (min-width: 640px) { .rehber-proje { grid-template-columns: auto 1fr; } .rehber-proje-dugmeler { grid-column: 1 / -1; } }
.rehber-proje h2 { margin: 2px 0 6px; font-size: 1.3rem; }
.rehber-proje p { margin: 0; }
.rehber-proje-ust { color: var(--muted); font-size: 0.85rem; }
.rehber-proje-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.yazi .btn { color: var(--on-accent); text-decoration: none; }
.yazi .btn:hover { color: var(--on-accent); }
.yazi .btn-ghost { color: var(--text); }
.yazi .btn-ghost:hover { color: var(--accent); }

/* ---------- Ana sayfa üst bölüm: tanıtım + şimdi oyna paneli ---------- */
.hero { padding-block: clamp(28px, 6vh, 72px) clamp(32px, 6vh, 64px); }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: end; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); } }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-oyunlar {
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.hero-oyunlar h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.hero-oyunlar ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.hero-oyunlar li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.hero-oyunlar li:hover { border-color: color-mix(in srgb, var(--kart-renk) 45%, transparent); background: rgba(255, 255, 255, .035); }
.hero-oyun-metin { display: grid; min-width: 0; }
.hero-oyun-ad { color: var(--text); font-weight: 700; text-decoration: none; }
.hero-oyun-ad:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero-oyun-metin span { color: var(--muted); font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-oyna { min-width: 72px; padding-block: 11px; }

/* Bulunulan bölüm üst menüde vurgulanır */
.bar nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Kısa "Ben Serdar Kekeç" ---------- */
.kisa-hakkimda-bolum { padding-block: clamp(24px, 4vw, 40px); }
.kisa-hakkimda {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.kisa-hakkimda img { width: 72px; height: 72px; border-radius: 18px; }
.kisa-hakkimda h2 { margin: 0 0 6px; font-size: clamp(1.3rem, 3vw, 1.6rem); }
.kisa-hakkimda p { margin: 0; color: var(--body); max-width: 62ch; }
@media (min-width: 760px) { .kisa-hakkimda { grid-template-columns: auto minmax(0, 1fr) auto; } }

/* ---------- Teknoloji Gündemi ---------- */
.gundem-arac { display: grid; gap: 14px; margin-bottom: 24px; }
@media (min-width: 900px) { .gundem-arac { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.gundem-kategoriler { display: flex; flex-wrap: wrap; gap: 8px; }
.gundem-kategoriler a {
  padding: 8px 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--body);
  text-decoration: none;
  font-size: 0.92rem;
}
.gundem-kategoriler a:hover { border-color: var(--accent); color: var(--text); }
.gundem-kategoriler a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.gundem-ara { display: flex; gap: 8px; }
.gundem-ara input {
  min-width: 0;
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gundem-liste { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 700px) { .gundem-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .gundem-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gundem-kart {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s, transform .25s;
}
.gundem-kart:hover { border-color: var(--line-strong); transform: translateY(-2px); }
@media (min-width: 700px) { .gundem-manset { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.gundem-kapak { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy), var(--surface)); overflow: hidden; }
.gundem-manset .gundem-kapak { aspect-ratio: auto; min-height: 220px; }
.gundem-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gundem-kapak-yok { display: grid; place-items: center; height: 100%; padding: 16px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-align: center; }
.kat-yapay-zeka .gundem-kapak { background: linear-gradient(135deg, #2a1f5c, #0f1d36); }
.kat-yazilim-mobil .gundem-kapak { background: linear-gradient(135deg, #0f3d55, #0f1d36); }
.kat-oyun-dunyasi .gundem-kapak { background: linear-gradient(135deg, #47224a, #0f1d36); }
.kat-3d-donanim .gundem-kapak { background: linear-gradient(135deg, #3d3a16, #0f1d36); }
.kat-gunluk .gundem-kapak { background: linear-gradient(135deg, #0e4a43, #0f1d36); }
.gundem-kart-metin { display: grid; gap: 8px; align-content: start; padding: clamp(18px, 3vw, 24px); }
.gundem-kart h2, .gundem-kart h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.gundem-manset h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.gundem-kart h2 a, .gundem-kart h3 a { color: var(--text); }
.gundem-kart p { margin: 0; color: var(--body); }
.gundem-ust { color: var(--muted); font-size: 0.85rem; }
.gundem-ust a { position: relative; z-index: 1; color: var(--accent); text-decoration: none; font-weight: 600; }
.gundem-alt { color: var(--muted); font-size: 0.85rem; }
.gundem-bos { max-width: 720px; }
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; color: var(--muted); }
.gundem-rss { margin-top: 24px; font-size: 0.9rem; }
.gundem-rss a { color: var(--muted); }
.gundem-yazi .gundem-ust { margin: 12px 0 0; }
.gundem-ozet { font-size: 1.15rem; line-height: 1.55; color: var(--text); }
.gundem-kapak-buyuk { margin: 0 0 22px; }
.gundem-kapak-buyuk img { width: 100%; height: auto; border-radius: 14px; display: block; }
.gundem-kapak-buyuk figcaption { margin-top: 6px; color: var(--muted); font-size: 0.85rem; }
.kaynak-listesi span { color: var(--muted); font-size: 0.88rem; }
.duzeltme { border-left-color: #f2b84b; }