/* Ana sayfa "Programlarımız" bölümü (#programlar). Her program kartı kendi vurgu rengini taşır:
   .tk-prog-esnapp / .tk-prog-tektakip — yeni program = yeni kart + yeni renk sınıfı. */
.tk-programs {
    --pg-card: linear-gradient(160deg, #0a1216, #05090b);
    --pg-text: #f3f8f9;
    --pg-muted: #8fa1a7;
    --pg-line: rgba(255, 255, 255, .08);
    --pg-shadow: 0 40px 100px rgba(0, 0, 0, .45);
    position: relative;
    padding: 135px 0 40px;
    scroll-margin-top: 90px;
}
html[data-theme="light"] .tk-programs {
    --pg-card: linear-gradient(160deg, #ffffff, #f1f7f9);
    --pg-text: #10232a;
    --pg-muted: #4b6168;
    --pg-line: rgba(13, 33, 40, .09);
    --pg-shadow: 0 30px 80px rgba(30, 70, 82, .12);
}
.tk-prog-esnapp { --acc: #2dd4bf; --acc-rgb: 45, 212, 191; }
.tk-prog-tektakip { --acc: #f28b50; --acc-rgb: 242, 139, 80; }
html[data-theme="light"] .tk-prog-esnapp { --acc: #0b766c; --acc-rgb: 11, 118, 108; }
html[data-theme="light"] .tk-prog-tektakip { --acc: #b23a0b; --acc-rgb: 178, 58, 11; }

.tk-prog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.tk-prog {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border: 1px solid var(--pg-line); border-radius: 28px; background: var(--pg-card);
    box-shadow: var(--pg-shadow); transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .45s ease;
}
.tk-prog::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 0%, rgba(var(--acc-rgb), .16), transparent 45%); }
.tk-prog:hover { transform: translateY(-6px); border-color: rgba(var(--acc-rgb), .45); box-shadow: var(--pg-shadow), 0 0 60px rgba(var(--acc-rgb), .14); }

.tk-prog-media { position: relative; margin: 14px 14px 0; border-radius: 18px; overflow: hidden; background: #05090b; border: 1px solid rgba(var(--acc-rgb), .22); }
.tk-prog-media video { display: block; width: 100%; aspect-ratio: 880 / 560; object-fit: cover; object-position: center top; }
.tk-prog-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(3, 6, 7, .55)); pointer-events: none; }
.tk-prog-badge { position: absolute; z-index: 1; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(3, 6, 7, .72); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); color: #e9f6f8; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.tk-prog-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); }

.tk-prog-body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }
.tk-prog-id { display: flex; align-items: center; gap: 14px; }
.tk-prog-id img { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .35), 0 10px 28px rgba(var(--acc-rgb), .22); }
.tk-prog-id b { display: block; color: var(--pg-text); font: 700 22px/1.1 "Space Grotesk", sans-serif; }
.tk-prog-id small { display: block; margin-top: 3px; color: var(--acc); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.tk-prog h3 { margin: 22px 0 10px; color: var(--pg-text); font: 600 clamp(28px, 2.8vw, 38px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -1.2px; }
.tk-prog h3 span { color: var(--acc); }
.tk-prog p { margin: 0; color: var(--pg-muted); font-size: 15.5px; line-height: 1.7; }
.tk-prog-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 24px; padding: 0; list-style: none; }
.tk-prog-tags li { padding: 6px 11px; border: 1px solid var(--pg-line); border-radius: 999px; color: var(--pg-text); font-size: 12px; font-weight: 700; }
.tk-prog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; }
.tk-prog-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 14px; background: var(--acc); color: #0a0705; font-size: 14px; font-weight: 800; text-decoration: none; box-shadow: 0 12px 30px rgba(var(--acc-rgb), .28); transition: transform .2s ease; }
html[data-theme="light"] .tk-prog-btn { color: #fff; }
.tk-prog-btn:hover { transform: translateY(-2px); }
.tk-prog-link { padding: 12px 6px; color: var(--pg-text); font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 1px solid transparent; }
.tk-prog-link:hover { border-color: var(--acc); }
.tk-prog-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--pg-line); list-style: none; }
.tk-prog-facts li { color: var(--pg-muted); font-size: 12.5px; font-weight: 700; }
.tk-prog-facts b { color: var(--pg-text); }

/* Sıradaki program: işletmeye özel yazılım */
.tk-prog-next {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
    padding: 30px 34px; border: 1px dashed color-mix(in srgb, var(--pg-muted) 45%, transparent); border-radius: 28px;
    background: radial-gradient(circle at 95% 50%, rgba(111, 227, 251, .1), transparent 40%);
}
.tk-prog-next small { color: #6fe3fb; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
html[data-theme="light"] .tk-prog-next small { color: #0b6f86; }
.tk-prog-next h3 { margin: 8px 0 6px; color: var(--pg-text); font: 600 clamp(22px, 2.2vw, 28px)/1.15 "Space Grotesk", sans-serif; letter-spacing: -.6px; }
.tk-prog-next p { margin: 0; max-width: 620px; color: var(--pg-muted); font-size: 15px; }
.tk-prog-next a { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 14px; border: 1px solid rgba(111, 227, 251, .35); color: var(--pg-text); font-size: 14px; font-weight: 800; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.tk-prog-next a:hover { border-color: #6fe3fb; transform: translateY(-2px); }

@media (max-width: 900px) {
    .tk-programs { padding-top: 100px; }
    .tk-prog-grid { grid-template-columns: 1fr; }
    .tk-prog-body { padding: 22px 20px 24px; }
    .tk-prog-next { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .tk-prog, .tk-prog-btn, .tk-prog-next a { transition: none; } }

/* Alt bilgide "Programlar" sütunu: masaüstünde 5 sütun */
@media (min-width: 1051px) { .tk-footer-grid { grid-template-columns: 1.3fr .85fr .7fr .7fr 1fr; gap: 40px; } }

/* WhatsApp simgeli bağlantılar */
.tk-prog-ic { width: 18px; height: 18px; flex: none; color: #25d366; }
.tk-prog-link, .tk-prog-next a { display: inline-flex; align-items: center; gap: 8px; }

/* Sabit iletişim düğmelerine Instagram */
.tk-fixed-ig { width: 50px !important; height: 50px !important; color: #fff; border: 1px solid rgba(255, 255, 255, .2); background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.tk-v3-fixed-button.tk-fixed-ig svg { width: 22px; height: 22px; }
@media (min-width: 821px) {
    .tk-fixed-ig::before { content: "Instagram"; position: absolute; right: calc(100% + 12px); top: 50%; padding: 7px 10px; border-radius: 999px; color: var(--text); background: var(--panel); border: 1px solid var(--border); font-size: 8px; font-weight: 800; opacity: 0; transform: translate(8px, -50%); transition: opacity .25s ease, transform .25s ease; white-space: nowrap; }
    .tk-fixed-ig:hover::before { opacity: 1; transform: translate(0, -50%); }
}
@media (max-width: 820px) { .tk-fixed-ig { margin-left: auto; } }
@media (min-width: 821px) { .tk-v3-fixed-actions { flex-direction: column; } }

/* WhatsApp'a giden bağlantılar her zaman yeşil düğme */
.tk-prog-link, .tk-prog-next a { padding: 12px 18px; border-radius: 14px; border: 1px solid #25d366; background: #25d366; color: #04170c; box-shadow: 0 10px 26px rgba(37, 211, 102, .25); transition: transform .2s ease; }
.tk-prog-link:hover, .tk-prog-next a:hover { border-color: #25d366; transform: translateY(-2px); }
.tk-prog-link .tk-prog-ic, .tk-prog-next a .tk-prog-ic { color: #04170c; }

/* Web sitesi seçenekleri (#web-secenekler ana sayfa, #secenekler web-tasarim): .tk-prog kartı, yatay + zikzak.
   Afiş videoları assets/img/web-secenekler/ (sosyal-medya/tanitim-premium/kaynak/set.html #paket-kurumsal / #paket-premium → video.mjs).
   Premium = vurgu kartı: koyu temada kağıt (#F4F3EF), açık temada petrol (#061C22); marka renkleri dışında renk yok. Yeni demolar → /demolar. */
.tk-paket-grid { display: grid; gap: 18px; }
.tk-paket { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.tk-paket-ters { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.tk-paket .tk-prog-media { margin: 14px 0 14px 14px; }
.tk-paket-ters .tk-prog-media { order: 2; margin: 14px 14px 14px 0; }
.tk-paket .tk-prog-media video { height: 100%; aspect-ratio: 640 / 664; object-fit: cover; object-position: center; }
.tk-paket .tk-prog-media::after { display: none; }
.tk-paket .tk-prog-body { justify-content: center; padding: 44px 48px; }
.tk-paket .tk-prog-actions { margin-top: 6px; }
.tk-paket-kurumsal { --acc: #6fe3fb; --acc-rgb: 111, 227, 251; }
html[data-theme="light"] .tk-paket-kurumsal { --acc: #0b6f86; --acc-rgb: 11, 111, 134; }
.tk-paket-premium { --pg-card: linear-gradient(160deg, #F4F3EF, #e2eef1); --pg-text: #061C22; --pg-muted: #4b6168; --pg-line: rgba(6, 28, 34, .12); --acc: #0B7F94; --acc-rgb: 11, 127, 148; }
html[data-theme="light"] .tk-paket-premium { --pg-card: linear-gradient(160deg, #0b2c35, #061C22); --pg-text: #f3f8f9; --pg-muted: #8ea6ac; --pg-line: rgba(111, 227, 251, .16); --acc: #6FE3FB; --acc-rgb: 111, 227, 251; }
.tk-paket-premium .tk-prog-btn { color: #fff; }
html[data-theme="light"] .tk-paket-premium .tk-prog-btn { color: #061C22; }
.tk-paket-no { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(var(--acc-rgb), .45); color: var(--acc); font: 700 16px "Space Grotesk", sans-serif; box-shadow: 0 10px 28px rgba(var(--acc-rgb), .18); }
.tk-paket-rozet { position: absolute; z-index: 2; top: 28px; right: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: #061C22; color: #6FE3FB; border: 1px solid rgba(111, 227, 251, .45); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 10px 26px rgba(6, 28, 34, .35); }
.tk-paket-rozet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6FE3FB; box-shadow: 0 0 10px #6FE3FB; }
.tk-paket-ikincil { padding: 12px 6px; color: var(--pg-text); font-size: 14px; font-weight: 800; text-decoration: none; border-bottom: 1px solid transparent; }
.tk-paket-ikincil:hover { border-color: var(--acc); }
@media (max-width: 900px) {
    .tk-paket, .tk-paket-ters { grid-template-columns: 1fr; }
    .tk-paket .tk-prog-media, .tk-paket-ters .tk-prog-media { order: 0; margin: 14px 14px 0; }
    .tk-paket .tk-prog-body { padding: 24px 20px 26px; }
    .tk-paket-rozet { top: 24px; right: 24px; }
}
/* Web Tasarım sayfası (reklam açılışı): iki seçenek ilk ekranda yan yana görünsün */
@media (min-width: 1101px) {
    .tk-paket-grid-yan { grid-template-columns: 1fr 1fr; }
    .tk-paket-grid-yan .tk-paket, .tk-paket-grid-yan .tk-paket-ters { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
    .tk-paket-grid-yan .tk-paket-ters .tk-prog-media { order: 0; margin: 14px 0 14px 14px; }
    .tk-paket-grid-yan .tk-prog-body { padding: 24px 24px 24px 26px; }
    .tk-paket-grid-yan .tk-prog-id b { font-size: 19px; }
    .tk-paket-grid-yan .tk-prog h3 { margin: 16px 0 8px; font-size: 26px; letter-spacing: -.6px; }
    .tk-paket-grid-yan .tk-prog p { font-size: 14px; line-height: 1.6; }
    .tk-paket-grid-yan .tk-prog-tags { display: none; }
    .tk-paket-grid-yan .tk-prog-facts { margin: 16px 0 16px; padding-top: 12px; }
    .tk-paket-grid-yan .tk-prog-actions { gap: 8px; }
    .tk-paket-grid-yan .tk-prog-btn, .tk-paket-grid-yan .tk-prog-link { padding: 11px 14px; font-size: 13px; }
    .tk-paket-grid-yan .tk-paket-ikincil { display: none; }
    .tk-paket-grid-yan .tk-paket-rozet { top: 24px; left: 26px; right: auto; }
    .tk-paket-grid-yan .tk-prog-media { align-self: center; }
    .tk-paket-grid-yan .tk-paket .tk-prog-media video { height: auto; }
}

/* Hizmetler: "Sistem Kurulumları" kartı da Teknik Servis gibi metin + hareketli afiş (assets/img/hizmetler/sistem.mp4) */
.v2-service-card-system.has-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); grid-template-rows: auto auto 1fr; column-gap: 26px; align-items: start; }
.v2-service-card-system.has-media > .tk-svc-media { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.v2-service-card-system.has-media > :not(.tk-svc-media) { grid-column: 1; }
@media (max-width: 1050px) {
    .v2-service-card-system.has-media { display: block; }
    .v2-service-card-system.has-media > .tk-svc-media { margin: -10px -10px 24px; }
}

/* Sabit Instagram düğmesi: renk geçişi kenarlık altına da uzansın (önceden kenarda turuncu/mavi şerit kalıyordu) */
.tk-v3-fixed-button.tk-fixed-ig { background-origin: border-box; border-color: rgba(255, 255, 255, .16); }

/* InfoReception (2026-10-14): üçüncü program, tam genişlikte yatay kart (solda video, sağda metin) */
.tk-prog-inforeception { --acc: #e0b866; --acc-rgb: 224, 184, 102; }
html[data-theme="light"] .tk-prog-inforeception { --acc: #8a6116; --acc-rgb: 138, 97, 22; }
.tk-prog-genis { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.tk-prog-genis .tk-prog-media { margin: 14px 0 14px 14px; align-self: center; }
@media (max-width: 900px) {
    .tk-prog-genis { grid-template-columns: 1fr; }
    .tk-prog-genis .tk-prog-media { margin: 14px 14px 0; }
}