/* TK Tech program sayfaları (esnapp, tektakip). hizmet.css'in üstüne gelir.
   Her programın kendi vurgu rengi: <html class="p-esnapp"> / <html class="p-tektakip">. Yeni program = yeni sınıf + renk. */
.p-esnapp { --accent: #2dd4bf; --accent-2: #a7f3e6; --accent-rgb: 45, 212, 191; }
.p-tektakip { --accent: #f28b50; --accent-2: #ffc9a6; --accent-rgb: 242, 139, 80; }
html.p-esnapp[data-theme="light"] { --accent: #0b766c; --accent-2: #075e56; --accent-rgb: 11, 118, 108; }
html.p-tektakip[data-theme="light"] { --accent: #b23a0b; --accent-2: #8f2f09; --accent-rgb: 178, 58, 11; }

.urun .tk-sayfa .kicker::before { background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 18px var(--accent); }
.urun .tk-sayfa h1 span { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; }
.urun .tk-sayfa .sec-head small { color: var(--accent); }
.urun .tk-sayfa .facts li::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.urun .tk-sayfa .card .no { color: var(--accent); border-color: rgba(var(--accent-rgb), .3); }
.urun .tk-sayfa .card:hover { border-color: rgba(var(--accent-rgb), .35); box-shadow: 0 0 40px rgba(var(--accent-rgb), .12); }
.urun .tk-sayfa .steps li::before { color: var(--accent); text-shadow: 0 0 22px rgba(var(--accent-rgb), .35); }
.urun .tk-sayfa summary::after { color: var(--accent); border-color: rgba(var(--accent-rgb), .3); }
.urun .tk-sayfa details[open] { border-color: rgba(var(--accent-rgb), .3); }
.tk-sayfa .btn-acc { background: var(--accent); border-color: var(--accent); color: #0a0705; box-shadow: 0 10px 30px rgba(var(--accent-rgb), .28); }
html[data-theme="light"] .tk-sayfa .btn-acc { color: #fff; }

/* Giriş: programın kimliği */
.urun .tk-sayfa .hero { background: radial-gradient(circle at 80% 40%, rgba(var(--accent-rgb), .16), transparent 55%), radial-gradient(circle at 10% 95%, rgba(111, 227, 251, .07), transparent 45%), linear-gradient(145deg, var(--panel-solid), color-mix(in srgb, var(--panel-solid) 70%, var(--bg))); }
.tk-sayfa .mark { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.tk-sayfa .mark img { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 12px 34px rgba(var(--accent-rgb), .25); }
.tk-sayfa .mark b { display: block; font: 700 22px/1.1 "Space Grotesk", sans-serif; color: var(--text); }
.tk-sayfa .mark small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.urun .tk-sayfa h1 { margin-top: 0; }

.tk-sayfa .stage { position: relative; }
.tk-sayfa .stage::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), .22), transparent 65%); filter: blur(24px); }
.tk-sayfa .screen { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .25); background: #05090b; box-shadow: var(--shadow), 0 0 50px rgba(var(--accent-rgb), .12); }
.tk-sayfa .screen img, .tk-sayfa .screen video { width: 100%; display: block; aspect-ratio: 880 / 608; object-fit: cover; }
.p-tektakip .screen img, .p-tektakip .screen video { aspect-ratio: 880 / 412; }
.urun .tk-sayfa .chip b { color: var(--accent); }

/* Film */
.tk-sayfa .film { position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: var(--shadow), var(--glow); }
.tk-sayfa .film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.tk-sayfa .film-note { margin: 12px 4px 0; font-size: 13px; }

/* Sektör / ekran sekmeleri */
.tk-sayfa .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tk-sayfa .tabs button { padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--muted); font: 800 13px Manrope, sans-serif; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.tk-sayfa .tabs button:hover { color: var(--text); border-color: rgba(var(--accent-rgb), .4); }
.tk-sayfa .tabs button[aria-selected="true"] { color: #0a0705; background: var(--accent); border-color: var(--accent); }
html[data-theme="light"] .tk-sayfa .tabs button[aria-selected="true"] { color: #fff; }
.tk-sayfa .panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 0; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: var(--panel-solid); box-shadow: var(--shadow); }
.tk-sayfa .panel[hidden] { display: none; }
.tk-sayfa .panel figure { margin: 0; background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), .14), transparent 60%), #05090b; display: grid; place-items: center; padding: 20px; }
.tk-sayfa .panel figure img { border-radius: 14px; }
.tk-sayfa .panel .txt { padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; }
.tk-sayfa .panel .txt small { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.tk-sayfa .panel .txt h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 10px 0 12px; }
.tk-sayfa .panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tk-sayfa .panel li { position: relative; padding-left: 22px; font-size: 15px; }
.tk-sayfa .panel li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (max-width: 860px) { .tk-sayfa .panel { grid-template-columns: 1fr; } .tk-sayfa .panel .txt { padding: 24px 20px; } }

/* Paketler */
.tk-sayfa .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tk-sayfa .plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--panel); }
.tk-sayfa .plan.one { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 50px rgba(var(--accent-rgb), .14); background: radial-gradient(circle at 80% 0%, rgba(var(--accent-rgb), .14), transparent 55%), var(--panel); }
.tk-sayfa .plan .tag { position: absolute; top: -12px; right: 20px; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #0a0705; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.tk-sayfa .plan h3 { font-size: 24px; margin: 0; }
.tk-sayfa .plan > p { margin: 6px 0 18px; font-size: 14px; }
.tk-sayfa .plan ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; flex: 1; }
.tk-sayfa .plan li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--text); }
.tk-sayfa .plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.tk-sayfa .plan li.plus { color: var(--muted); }
.tk-sayfa .plan li.plus::before { content: "+"; }
@media (max-width: 900px) { .tk-sayfa .plans { grid-template-columns: 1fr; } }

/* Not kutusu (güven / dürüst bilgi) */
.tk-sayfa .note { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 26px 28px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 22px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .08), transparent 60%), var(--panel); }
.tk-sayfa .note i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(var(--accent-rgb), .14); color: var(--accent); font: 800 20px "Space Grotesk", sans-serif; font-style: normal; }
.tk-sayfa .note h3 { margin-bottom: 6px; }
.tk-sayfa .note p { margin: 0; }
.tk-sayfa .note ul { margin: 10px 0 0; padding-left: 18px; }

/* Diğer programlar */
.tk-sayfa .others { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tk-sayfa .other { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.tk-sayfa .other:hover { border-color: var(--line); transform: translateY(-2px); }
.tk-sayfa .other img { width: 46px; height: 46px; border-radius: 13px; }
.tk-sayfa .other b { display: block; font: 700 18px "Space Grotesk", sans-serif; }
.tk-sayfa .other span { color: var(--muted); font-size: 14px; }
.tk-sayfa .other em { margin-left: auto; font-style: normal; color: var(--cyan); font-size: 20px; }

.urun .tk-sayfa .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .urun .tk-sayfa .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .urun .tk-sayfa .grid { grid-template-columns: 1fr; } }

/* Simgeli düğmeler */
.tk-sayfa .btn svg.ic { width: 19px; height: 19px; flex: none; }
.tk-sayfa .btn-acc svg.ic, .tk-sayfa .btn-wa svg.ic { margin-left: -2px; }




/* Açık temada zemin ana siteyle aynı */
html[data-theme="light"] .tk-sayfa { --bg: #f4f8fa; }

/* Okunurluk (2026-10-11) */
.urun .tk-sayfa .other em { color: var(--accent); }
.urun .tk-sayfa .film-note { font-size: 12.5px; }

html[data-theme="light"] .urun .tk-sayfa .chip b { color: var(--accent-2); }
html[data-theme="light"] .tk-sayfa .plan .tag { color: #fff; }