/* Ceepri — tanıtım sayfası (tanitim.php) · "Kirpi" sanat yönetimi
   TEMA: :root = AYDINLIK (varsayılan, "kağıt ve mürekkep"), html[data-theme="dark"] = karanlık (eski görünüm).
   Seçim anahtarı localStorage 'elite-theme' (baglanti/tema.php bootstrap'i boyamadan önce atar). `.tn-koyu` işaretli bloklar
   aydınlık temada bile koyu "ekran" olarak kalır (sanat kareleri, kapanış sahnesi). Fontlar ve renkler Tasarım Yöneticisi
   değişkenlerini (--cp-font-*, --cp-renk-*, --cp-kose) tüketir; tanımsızsa aşağıdaki varsayılanlar geçerlidir. */

/* ---------------- Jetonlar: AYDINLIK ---------------- */
:root {
    color-scheme: light;
    --bg: #f6f9fb;
    --bg-2: #ecf3f7;
    --bg-3: #e1ebf2;
    --bg-rgb: 246, 249, 251;
    --yazi: #0b1a30;
    --soluk: #3d516b;
    --soluk-2: #52647d;
    --metin-2: #2a3d57;
    --metin-3: #1f3350;
    --cizgi: rgba(11, 26, 48, .1);
    --cizgi-2: rgba(11, 26, 48, .18);
    --teal: var(--cp-renk-ana, #2fc4cc);
    --teal-rgb: var(--cp-renk-ana-rgb, 47, 196, 204);
    --teal-2: var(--cp-renk-ana-koyu, #08727a);
    --aksan-buyuk: var(--cp-renk-ana-koyu, #0b8f9a);
    --teal-koyu: #0f6f78;
    --teal-ikon: var(--teal-2);
    --mavi: #2a6fd0;
    --murekkep: var(--cp-renk-ana-murekkep, #021c1f);
    --btn-ana-a: var(--cp-renk-ana-g1, #6fe6eb);
    --btn-ana-b: var(--cp-renk-ana-g2, #27b0ba);
    --bant-teal-b: var(--cp-renk-ana-g3, #5ee2e8);
    --btn-tara: var(--yazi);
    --btn-hover-yazi: #fff;
    --sari: var(--cp-renk-vurgu, #ffbc00);
    --sari-murekkep: var(--cp-renk-vurgu-murekkep, #161100);
    --sari-metin: #8a5d00;
    --f-metin: var(--cp-font-govde, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
    --f-baslik: var(--cp-font-baslik, "Sora", "Inter", system-ui, sans-serif);
    --f-serif: var(--cp-font-serif, "Instrument Serif", "Times New Roman", Georgia, serif);
    --f-el: var(--cp-font-vurgu, "Caveat", "Segoe Script", cursive);
    --f-kod: var(--cp-font-kod, ui-monospace, "SFMono-Regular", Consolas, monospace);
    --r-kart: var(--cp-kose, 26px);
    --kenar: linear-gradient(140deg, rgba(var(--teal-rgb), .75), rgba(11, 26, 48, .09) 38%, rgba(11, 26, 48, .06) 62%, rgba(var(--teal-rgb), .5));
    --ust-h: 74px;
    --kap: 1320px;
    --ease: cubic-bezier(.2, .75, .15, 1);

    /* yüzeyler */
    --yuzey-a: rgba(255, 255, 255, .96);
    --yuzey-b: rgba(244, 249, 251, .96);
    --cam: rgba(255, 255, 255, .78);
    --cam-2: rgba(255, 255, 255, .9);
    --cam-ust: rgba(var(--bg-rgb), .82);
    --ic-zemin: rgba(11, 26, 48, .045);
    --ic-zemin-2: rgba(11, 26, 48, .045);
    --cam-ses: rgba(255, 255, 255, .78);
    --cam-yukari: rgba(255, 255, 255, .9);
    --chip: rgba(255, 255, 255, .72);
    --chip-vurgu: color-mix(in srgb, var(--teal) 14%, #fff);
    --golge-1: 0 18px 38px -16px rgba(11, 26, 48, .3), 0 2px 6px rgba(11, 26, 48, .06);
    --golge-2: 0 40px 80px -34px rgba(11, 26, 48, .42), 0 4px 14px rgba(11, 26, 48, .07);
    --golge-3: 0 20px 44px -16px rgba(11, 26, 48, .34), 0 2px 8px rgba(11, 26, 48, .08);
    --golge-kod: var(--golge-1);
    --golge-kart: 0 1px 2px rgba(11, 26, 48, .05), 0 22px 44px -26px rgba(11, 26, 48, .28);
    --golge-kart-ust: 0 2px 4px rgba(11, 26, 48, .06), 0 34px 60px -28px rgba(11, 26, 48, .38);
    --btn-ana-golge: 0 14px 30px -12px rgba(11, 140, 150, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
    /* yazı efektleri */
    --kontur: rgba(11, 26, 48, .88);
    --kontur-aksan: rgba(8, 114, 122, .7);
    --kontur-soluk: rgba(8, 114, 122, .38);
    --kontur-dev: rgba(11, 26, 48, .1);
    --kontur-adim: rgba(8, 114, 122, .5);
    --yorunge-iz: rgba(8, 114, 122, .3);
    --grad-sayi: linear-gradient(180deg, #0b1a30 8%, #0a6a73 70%, #22b4be);
    --grad-kod: linear-gradient(180deg, #0b1a30, #0a7f89);
    --grad-yukle: linear-gradient(180deg, #0b1a30 5%, #0a6f79 68%, #2fc4cc);
    --grad-dev: linear-gradient(180deg, rgba(11, 26, 48, .16), rgba(var(--teal-rgb), .15) 62%, transparent 94%);
    /* hero / ışık */
    --glow: .2;
    --isik-ek: radial-gradient(34% 36% at 6% 88%, rgba(255, 188, 0, .16), transparent 70%);
    --halo-ek: radial-gradient(30% 40% at 70% 48%, rgba(255, 255, 255, .85), transparent 72%);
    --izgara-img: radial-gradient(rgba(11, 26, 48, .2) 1.1px, transparent 1.5px);
    --izgara-boy: 26px 26px;
    --yedek-filtre: invert(1) hue-rotate(180deg);
    --yedek-karisim: multiply;
    --yedek-opak: .85;
    --gren: none;
    --imlec: #0a7f89;
    --imlec-golge: none;
    --imlec-halka: rgba(11, 26, 48, .45);
    --imlec-halka-ust: rgba(8, 114, 122, .1);
    --fav-karisim: 52%;
    --chip-opt: rgba(255, 255, 255, .7);
    /* küçük ikon kutuları */
    --ikon-mavi-fg: #1f5fb0; --ikon-mavi-bg: rgba(42, 111, 208, .13);
    --ikon-teal-fg: #08727a; --ikon-teal-bg: rgba(var(--teal-rgb), .17);
    --ikon-sari-fg: #8a5d00; --ikon-sari-bg: rgba(255, 188, 0, .24);
    --ok-yazi: #0b6b4a; --ok-bg: rgba(16, 160, 110, .1); --ok-kenar: rgba(16, 160, 110, .32); --ok-ikon: #0e9f6e;
    --uyari-yazi: #7a5200; --uyari-bg: rgba(255, 188, 0, .2); --uyari-kenar: rgba(214, 150, 0, .5);
    /* bölümler */
    --serit-bg: #fff;
    --alt-bg: #e8eff5;
    --tab-bg: rgba(255, 255, 255, .92);
    --tab-halka: #fff;
    --halka-iz: rgba(11, 26, 48, .09);
    --gorsel-maske: none;
    --son-sanat-op: 1;
    --son-ort: .62;
    --son-ort2: .2;
    --gorsel-isik-bg: radial-gradient(circle, rgba(var(--teal-rgb), .2), rgba(42, 111, 208, .08) 48%, transparent 70%);
    --gorsel-isik-filtre: none;
    --gorsel-isik-filtre-m: none;
    --kipri-isik-bg: radial-gradient(circle, rgba(var(--teal-rgb), .22), transparent 68%);
    --kipri-isik-filtre: none;
    --dalga-golge: 0 0 18px rgba(var(--teal-rgb), .45);
    --nokta-bg: rgba(11, 26, 48, .5);
}

/* ---------------- Jetonlar: KARANLIK (eski görünüm) ---------------- */
:root[data-theme="dark"], .tn-koyu {
    color-scheme: dark;
    --bg: #03070f;
    --bg-2: #06101f;
    --bg-3: #0a1a30;
    --bg-rgb: 3, 7, 15;
    --yazi: #eef5fd;
    --soluk: #93a8c3;
    --soluk-2: #5f7493;
    --metin-2: #c7d6e8;
    --metin-3: #d3e0ef;
    --cizgi: rgba(160, 196, 236, .12);
    --cizgi-2: rgba(160, 196, 236, .22);
    --teal-ikon: var(--teal);
    --teal-2: var(--cp-renk-ana-acik, #8ff0f3);
    --aksan-buyuk: var(--cp-renk-ana-acik, #8ff0f3);
    --mavi: #5aa8ff;
    --sari-metin: var(--cp-renk-vurgu, #ffbc00);
    --kenar: linear-gradient(140deg, rgba(143, 240, 243, .55), rgba(var(--teal-rgb), .06) 35%, rgba(90, 168, 255, .05) 65%, rgba(90, 168, 255, .45));

    --yuzey-a: rgba(12, 28, 52, .75);
    --yuzey-b: rgba(6, 16, 32, .75);
    --cam: rgba(6, 18, 36, .72);
    --cam-2: rgba(6, 18, 36, .78);
    --cam-ust: rgba(3, 7, 15, .72);
    --ic-zemin: rgba(0, 0, 0, .25);
    --ic-zemin-2: rgba(0, 0, 0, .22);
    --cam-ses: rgba(6, 18, 36, .6);
    --cam-yukari: rgba(6, 16, 32, .75);
    --chip: rgba(255, 255, 255, .04);
    --chip-vurgu: rgba(var(--teal-rgb), .12);
    --golge-1: 0 24px 50px -18px rgba(0, 0, 0, .85);
    --golge-2: 0 40px 100px -30px rgba(0, 0, 0, .9);
    --golge-3: 0 24px 50px -16px rgba(0, 0, 0, .9);
    --golge-kod: 0 30px 60px -20px rgba(0, 0, 0, .8);
    --golge-kart: none;
    --golge-kart-ust: none;
    --btn-ana-golge: 0 14px 40px -12px rgba(var(--teal-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .45);
    --kontur: rgba(238, 245, 253, .85);
    --kontur-aksan: rgba(143, 240, 243, .6);
    --kontur-soluk: rgba(143, 240, 243, .5);
    --kontur-dev: rgba(143, 240, 243, .14);
    --kontur-adim: rgba(143, 240, 243, .45);
    --yorunge-iz: rgba(143, 240, 243, .2);
    --grad-sayi: linear-gradient(180deg, #fff 20%, var(--teal-2) 75%, var(--teal));
    --grad-kod: linear-gradient(180deg, #fff, var(--teal-2));
    --grad-yukle: linear-gradient(180deg, #fff, var(--teal-2) 70%, var(--teal));
    --grad-dev: linear-gradient(180deg, rgba(143, 240, 243, .5), rgba(var(--teal-rgb), .12) 60%, transparent 92%);
    --glow: .16;
    --isik-ek: linear-gradient(#0000, #0000);
    --halo-ek: linear-gradient(#0000, #0000);
    --izgara-img: linear-gradient(rgba(160, 196, 236, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 196, 236, .05) 1px, transparent 1px);
    --izgara-boy: 80px 80px;
    --yedek-filtre: none;
    --yedek-karisim: normal;
    --yedek-opak: .55;
    --gren: url("../img/tanitim/gren.png") repeat 0 0 / 128px 128px;
    --imlec: var(--teal-2);
    --imlec-golge: 0 0 12px var(--teal);
    --imlec-halka: rgba(143, 240, 243, .55);
    --imlec-halka-ust: rgba(var(--teal-rgb), .12);
    --fav-karisim: 0%;
    --btn-tara: #fff;
    --btn-hover-yazi: var(--murekkep);
    --chip-opt: transparent;
    --ikon-mavi-fg: #9ccbff; --ikon-mavi-bg: rgba(90, 168, 255, .14);
    --ikon-teal-fg: var(--teal-2); --ikon-teal-bg: rgba(var(--teal-rgb), .14);
    --ikon-sari-fg: var(--sari); --ikon-sari-bg: rgba(255, 188, 0, .12);
    --ok-yazi: #b9f8e0; --ok-bg: rgba(46, 204, 140, .1); --ok-kenar: rgba(46, 204, 140, .3); --ok-ikon: #5ef0b2;
    --uyari-yazi: #ffd98c; --uyari-bg: rgba(255, 190, 70, .1); --uyari-kenar: rgba(255, 190, 70, .3);
    --serit-bg: var(--bg);
    --alt-bg: #01040a;
    --tab-bg: rgba(6, 14, 28, .86);
    --tab-halka: #050c18;
    --halka-iz: rgba(255, 255, 255, .08);
    --gorsel-maske: radial-gradient(closest-side, #000 70%, transparent 100%);
    --son-sanat-op: .7;
    --son-ort: .55;
    --son-ort2: .2;
    --gorsel-isik-bg: radial-gradient(circle, rgba(var(--teal-rgb), .32), rgba(90, 168, 255, .1) 50%, transparent 72%);
    --gorsel-isik-filtre: blur(36px);
    --gorsel-isik-filtre-m: blur(20px);
    --kipri-isik-bg: radial-gradient(circle, rgba(var(--teal-rgb), .45), transparent 68%);
    --kipri-isik-filtre: blur(40px);
    --dalga-golge: 0 0 24px rgba(var(--teal-rgb), .8), inset 0 0 12px rgba(var(--teal-rgb), .5);
    --nokta-bg: rgba(143, 240, 243, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: var(--ust-h); font-size: calc(100% * var(--cp-font-olcek, 1)); }
html:not(.tn-lenis) { scroll-behavior: smooth; }
body.tn {
    margin: 0; background: var(--bg); color: var(--yazi);
    font: 400 1rem/1.65 var(--f-metin);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
/* Film greni (yalnız karanlık tema; aydınlıkta kağıt zemin sade kalır) */
body.tn::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    /* Saydamlık PNG alfasında (≈%4): opacity katmanı WebKit'te ilk döşemeyi opak çiziyordu */
    background: var(--gren);
}
/* Dokunmatikte gren yok: WebKit sabit katmanı ilk döşemede opak kare çiziyor; telefonda zaten seçilmez, GPU'yu da yormaz */
@media (hover: none) { body.tn::after { content: none; } }
@keyframes tn-gren { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(-1%, 1%); } }
.tn img, .tn svg, .tn canvas { display: block; max-width: 100%; }
.tn picture { display: contents; }
.tn :where(h1, h2, h3) { margin: 0; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.tn :where(p, figure) { margin: 0; }
.tn :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.tn :where(a) { color: inherit; text-decoration: none; }
.tn :focus-visible { outline: 2px solid var(--teal-2); outline-offset: 4px; border-radius: 6px; }
.tn ::selection { background: var(--teal); color: var(--murekkep); }
.tn-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tn-skip { position: absolute; left: 16px; top: -80px; z-index: 300; padding: 10px 16px; border-radius: 10px; background: var(--teal); color: var(--murekkep); font-weight: 700; }
.tn-skip:focus { top: 12px; }
.tn-ikon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tn-kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 18px; position: relative; }
@media (min-width: 700px) { .tn-kap { padding: 0 40px; } }
.tn-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.tn-kontur { color: transparent; -webkit-text-stroke: 1.5px var(--kontur); }
.tn-mini-etiket { display: inline-flex; align-items: center; gap: .6rem; font: 600 .74rem/1 var(--f-metin); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-2); }
.tn-mini-etiket span { color: var(--soluk-2); }
.tn-rozet {
    display: inline-flex; align-items: center; margin-left: .35rem; padding: .16rem .5rem; border-radius: 999px; vertical-align: .1em;
    font: 700 .6rem/1.3 var(--f-metin); letter-spacing: .08em; text-transform: uppercase;
    color: var(--uyari-yazi); background: var(--uyari-bg); border: 1px solid var(--uyari-kenar);
}
.tn-fav {
    flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
    background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c), #0b1a30 var(--fav-karisim)); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    font: 700 .78rem/1 var(--f-metin);
}

/* ---------------- Yükleyici: kirpi logosu çizilir, "ceepri" yazısı gelir (~3 sn) ---------------- */
.tn-yukle {
    --y-hat: #1b3557; --y-diken: #2f6fb5; --y-anahtar: #3aa79a; --y-yazi: #1b3557;
    position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; overflow: hidden;
    background:
        radial-gradient(58% 36% at 16% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
        radial-gradient(52% 34% at 84% 64%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
        radial-gradient(40% 26% at 66% 12%, rgba(255,255,255,.65), rgba(255,255,255,0) 72%),
        linear-gradient(180deg, #c3def8 0%, #dcecfb 48%, #b9d9f6 100%);
    animation: tn-yukle-cik .6s ease 5.6s forwards; /* JS devreye girmezse yedek kapanış */
}
:root[data-theme="dark"] .tn-yukle, .tn-koyu .tn-yukle {
    --y-hat: #e6f0fb; --y-diken: #6aa6e8; --y-anahtar: #43d4c3; --y-yazi: #f2f7ff;
    background:
        radial-gradient(60% 44% at 50% 46%, rgba(47,111,181,.26), rgba(47,111,181,0) 72%),
        linear-gradient(180deg, #050d1c 0%, #0a1a30 100%);
}
.tn-yukle.is-bitti { animation: tn-yukle-cik .6s ease forwards; }
@keyframes tn-yukle-cik { to { opacity: 0; visibility: hidden; } }
.tn-yukle__svg { display: block; width: min(94vw, 880px); height: auto; overflow: visible; }
/* kirpi dış hattı tek yol (#tn-yo); gruplar maskeyle "çizilir": maskedeki beyaz hat pathLength=1 ile 0 -> görünür, 1.01 -> gizli */
.tn-yo--d { fill: var(--y-diken); }
.tn-yo--b, .tn-yo--g, .tn-yk { fill: var(--y-hat); }
.tn-yc, .tn-ys { fill: none; stroke: #fff; stroke-width: 46; stroke-linecap: round; stroke-linejoin: round; }
.tn-yc { stroke-dasharray: 1.01 3; stroke-dashoffset: 1.01; animation: tn-ycizim .45s cubic-bezier(.4, 0, .2, 1) var(--d, 0s) forwards; }
@keyframes tn-ycizim { to { stroke-dashoffset: 0; } }
.tn-yk { transform-origin: 495px 333px; opacity: 0; animation: tn-ykalkan .5s cubic-bezier(.2, .8, .2, 1) 1s forwards; }
@keyframes tn-ykalkan { from { opacity: 0; transform: translate(-230px, -14px) rotate(-26deg) scale(.82); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
.tn-yz { fill: var(--y-hat); transform: scale(0); transform-origin: 349px 346px; animation: tn-ypop .3s cubic-bezier(.3, 1.5, .5, 1) .12s forwards; }
@keyframes tn-ypop { to { transform: none; } }
.tn-yh { fill: var(--y-anahtar); opacity: 0; transform-origin: 508px 337px; animation: tn-yanahtar .3s cubic-bezier(.2, .9, .25, 1.12) 1.5s forwards; }
@keyframes tn-yanahtar { from { opacity: 0; transform: translateY(150px) scale(.7); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
.tn-yr { fill: none; stroke: var(--y-anahtar); stroke-width: 5; opacity: 0; transform-origin: 500px 280px; animation: tn-yhalka .55s cubic-bezier(.2, .7, .3, 1) 1.8s forwards; }
.tn-yr--2 { stroke-width: 3.5; animation-delay: 1.95s; }
@keyframes tn-yhalka { from { opacity: 0; transform: scale(.55); } 25% { opacity: .9; } to { opacity: 0; transform: scale(1.1); } }
.tn-ym { transform-origin: 500px 280px; animation: tn-ykucul .7s cubic-bezier(.65, 0, .25, 1) 2.2s forwards; }
@keyframes tn-ykucul { to { transform: translate(-319px, 0) scale(.5); } }
.tn-yl { fill: var(--y-yazi); fill-rule: evenodd; opacity: 0; animation: tn-yharf .5s cubic-bezier(.2, .75, .2, 1) var(--d, 2.3s) forwards; }
@keyframes tn-yharf { from { opacity: 0; transform: translateX(-60px); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* tekrar ziyaret / hareket azaltma: animasyonsuz son kare (kapanışı JS yönetir) */
.tn-yukle.is-hizli *, .tn-yukle.is-hizli *::before { animation-delay: 0s !important; animation-duration: .01ms !important; }

/* ---------------- İmleç ---------------- */
.tn-imlec { display: none; }
html.tn-imlec-aktif .tn-imlec { display: block; position: fixed; left: 0; top: 0; z-index: 280; pointer-events: none; }
html.tn-imlec-aktif, html.tn-imlec-aktif body, html.tn-imlec-aktif a, html.tn-imlec-aktif button, html.tn-imlec-aktif summary { cursor: none; }
.tn-imlec__nokta, .tn-imlec__halka { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.tn-imlec__nokta { width: 6px; height: 6px; background: var(--imlec); box-shadow: var(--imlec-golge); }
.tn-imlec__halka { width: 38px; height: 38px; border: 1px solid var(--imlec-halka); transition: width .35s var(--ease), height .35s var(--ease), background-color .35s, border-color .35s; }
.tn-imlec.is-ustunde .tn-imlec__halka { width: 74px; height: 74px; background: var(--imlec-halka-ust); border-color: var(--imlec); }
.tn-imlec__yazi { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 700 .62rem/1 var(--f-metin); letter-spacing: .14em; text-transform: uppercase; color: var(--teal-2); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.tn-imlec.is-yazili .tn-imlec__yazi { opacity: 1; }
.tn-imlec.is-yazili .tn-imlec__nokta { opacity: 0; }

/* ---------------- Butonlar ---------------- */
.tn-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; overflow: hidden; isolation: isolate;
    min-height: 48px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
    font: 600 .95rem/1 var(--f-metin); transition: color .35s var(--ease), border-color .3s, box-shadow .3s; will-change: transform;
}
.tn-btn > * { position: relative; z-index: 1; }
.tn-btn .tn-ikon { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.tn-btn:hover .tn-ikon { transform: translateX(4px); }
.tn-btn::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); }
.tn-btn:hover::before { transform: none; }
.tn-btn--ana { background: linear-gradient(180deg, var(--btn-ana-a), var(--btn-ana-b)); color: var(--murekkep); box-shadow: var(--btn-ana-golge); }
.tn-btn--ana::before { background: var(--btn-tara); }
.tn-btn--ana:hover { color: var(--btn-hover-yazi); }
.tn-btn--cizgi { color: var(--yazi); border-color: var(--cizgi-2); background: var(--chip); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tn-btn--cizgi::before { background: var(--yazi); }
.tn-btn--cizgi:hover { color: var(--bg); }
.tn-btn--sm { min-height: 38px; padding: 0 1rem; font-size: .85rem; }
.tn-btn--lg { min-height: 56px; padding: 0 1.75rem; font-size: 1rem; }
.tn-btn--xl { min-height: 68px; padding: 0 2.4rem; font-size: 1.1rem; }

/* ---------------- Üst çubuk ---------------- */
.tn-ust { position: fixed; inset: 0 0 auto; z-index: 120; height: var(--ust-h); transition: background-color .4s, border-color .4s, transform .5s var(--ease); border-bottom: 1px solid transparent; }
.tn-ust.is-kaydi { background: var(--cam-ust); border-bottom-color: var(--cizgi); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.tn-ust.is-gizli { transform: translateY(-100%); }
.tn-ust__in { height: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 1rem; }
@media (min-width: 700px) { .tn-ust__in { padding: 0 40px; } }
/* Orijinal logo (kalkanlı kirpi + "ceepri"): görsel alanında ~%17 boşluk var; -4px pay ile görünen logo ≈ 44px */
.tn-logo { display: block; }
.tn-logo img { display: block; width: auto; height: 52px; margin-block: -4px; }
.tn-logo .tn-logo__koyu, :root[data-theme="dark"] .tn-logo .tn-logo__acik { display: none; }
:root[data-theme="dark"] .tn-logo .tn-logo__koyu { display: block; }
.tn-nav { display: none; }
.tn-ust__cta { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.tn-ust__cta .cp-tema-dugme { margin-right: .25rem; }
.tn-gizle-kucuk { display: none; }
@media (min-width: 560px) { .tn-gizle-kucuk { display: inline-flex; } }
.tn-menu { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cizgi-2); background: var(--chip); cursor: pointer; }
.tn-menu span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--yazi); transition: transform .4s var(--ease), top .4s var(--ease); }
.tn-menu span:first-child { top: 17px; } .tn-menu span:last-child { top: 25px; }
body.tn-menu-acik .tn-menu span:first-child { top: 21px; transform: rotate(45deg); }
body.tn-menu-acik .tn-menu span:last-child { top: 21px; transform: rotate(-45deg); }
.tn-nav.is-acik {
    display: flex; flex-direction: column; position: fixed; inset: var(--ust-h) 0 0; padding: 1.5rem 18px 2rem; overflow-y: auto;
    background: rgba(var(--bg-rgb), .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.tn-nav.is-acik > a { display: flex; align-items: baseline; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--cizgi); font: 700 clamp(1.8rem, 8vw, 2.6rem)/1 var(--f-baslik); letter-spacing: -.04em; }
.tn-nav > a i { font: 500 .75rem/1 var(--f-metin); font-style: normal; color: var(--teal-2); letter-spacing: .1em; }
.tn-nav__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.tn-nav__tema { display: none; }
.tn-nav.is-acik .tn-nav__tema { display: flex; margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--cizgi); font: 600 1rem/1 var(--f-metin); color: var(--soluk); }
.tn-nav__tema .cp-tema-satir { width: 100%; }
body.tn-menu-acik { overflow: hidden; }
@media (min-width: 1100px) {
    .tn-menu { display: none; }
    .tn-nav, .tn-nav.is-acik { display: flex; position: static; flex-direction: row; gap: .25rem; margin-left: 2.5rem; padding: 0; background: none; backdrop-filter: none; overflow: visible; }
    .tn-nav > a, .tn-nav.is-acik > a { display: inline-flex; align-items: baseline; gap: .35rem; padding: .5rem .8rem; border: 0; border-radius: 999px; font: 500 .88rem/1 var(--f-metin); letter-spacing: 0; color: var(--soluk); transition: color .2s, background-color .2s; }
    .tn-nav > a i { font-size: .62rem; color: var(--soluk-2); }
    .tn-nav > a:hover, .tn-nav > a.is-aktif { color: var(--yazi); background: var(--chip-vurgu); }
    .tn-nav > a.is-aktif i { color: var(--teal-2); }
    .tn-nav__cta, .tn-nav.is-acik .tn-nav__tema { display: none; }
}

/* ---------------- Sahne (hero) ---------------- */
.tn-h {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
    padding: calc(var(--ust-h) + 2rem) 0 2.5rem;
}
.tn-h__arka { position: absolute; inset: 0; z-index: -1; }
.tn-h__yedek {
    position: absolute; width: min(92vw, 560px); height: auto; left: 50%; top: calc(var(--ust-h) + 1rem); transform: translateX(-50%);
    opacity: var(--yedek-opak); filter: var(--yedek-filtre); mix-blend-mode: var(--yedek-karisim);
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
    transition: opacity .5s;
}
/* Yedek görsel artık orijinal logo: sanat filtresi/karışımı uygulanmaz; temaya göre renkli ya da açık sürüm */
.tn-h__yedek--acik, .tn-h__yedek--koyu { filter: none; mix-blend-mode: normal; opacity: .9; }
.tn-h__yedek--koyu, :root[data-theme="dark"] .tn-h__yedek--acik { display: none; }
:root[data-theme="dark"] .tn-h__yedek--koyu { display: block; }
html.tn-kirpi-canli .tn-h__yedek { opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.tn-h__kirpi { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
/* Aydınlık: ışık sisi parçacıkların üstünü beyazlatmasın (lacivert hatlar net okunsun) */
:root:not([data-theme="dark"]) .tn-h__kirpi { z-index: 1; }
.tn-h__isik {
    position: absolute; inset: 0; pointer-events: none;
    background:
        var(--isik-ek),
        radial-gradient(40% 45% at 50% 32%, color-mix(in srgb, var(--teal) calc(var(--glow) * 100%), transparent), transparent 70%),
        linear-gradient(180deg, rgba(var(--bg-rgb), 0) 35%, rgba(var(--bg-rgb), .75) 70%, var(--bg) 100%);
}
.tn-h__izgara {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: var(--izgara-img);
    background-size: var(--izgara-boy);
    -webkit-mask-image: radial-gradient(60% 55% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 40%, #000, transparent 75%);
}
.tn-h__in { position: relative; width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 18px; pointer-events: none; }
.tn-h__in a, .tn-h__in button { pointer-events: auto; }
@media (min-width: 700px) { .tn-h__in { padding: 0 40px; } }
.tn-h__ust { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; font: 500 .85rem/1 var(--f-metin); color: var(--soluk); }
.tn-h__ust em { font-style: normal; color: var(--teal-2); }
.tn-nabiz { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 60%, transparent); animation: tn-nabiz 2.2s infinite; }
@keyframes tn-nabiz { 70% { box-shadow: 0 0 0 12px rgba(var(--teal-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0); } }
.tn-h__baslik { font: 800 clamp(2.4rem, 4.9vw, 5rem)/.98 var(--f-baslik); letter-spacing: -.05em; }
.tn-satir { display: block; overflow: hidden; padding: .16em 0 .26em; margin: -.16em 0 -.26em; }
.tn-satir > span { display: inline-block; }
.tn-h__baslik .tn-serif { font-size: 1.08em; color: var(--aksan-buyuk); letter-spacing: -.03em; padding-right: .04em; }
.tn-h__baslik .tn-kontur { -webkit-text-stroke-width: 2px; }
.tn-h__alt { margin-top: 2rem; display: grid; gap: 1.5rem; }
.tn-h__lead { max-width: 34rem; font-size: clamp(1rem, 2.2vw, 1.15rem); color: var(--metin-2); }
.tn-h__cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.tn-h__olgular { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cizgi); list-style: none; }
.tn-h__olgular li { display: inline-flex; align-items: center; gap: .55rem; font: 600 .9rem/1.2 var(--f-metin); color: var(--metin-2); }
.tn-h__olgular li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; }
.tn-h__ipucu { position: absolute; right: 40px; top: -1rem; display: none; font: 500 .72rem/1 var(--f-metin); letter-spacing: .18em; text-transform: uppercase; color: var(--soluk-2); }
.tn-ipucu-dokun { display: inline; } .tn-ipucu-ince { display: none; }
@media (pointer: fine) { .tn-ipucu-dokun { display: none; } .tn-ipucu-ince { display: inline; } }
.tn-h__asagi { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: .6rem; font: 500 .66rem/1 var(--f-metin); letter-spacing: .3em; text-transform: uppercase; color: var(--soluk-2); }
.tn-h__asagi i { width: 1px; height: 46px; background: linear-gradient(var(--teal), transparent); transform-origin: top; animation: tn-damla 2s var(--ease) infinite; }
@keyframes tn-damla { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 1000px) {
    .tn-h { justify-content: center; padding-bottom: 6rem; }
    .tn-h__yedek { width: min(46vw, 720px); left: auto; right: 4vw; top: 50%; transform: translateY(-50%); }
    .tn-h__isik { background: var(--isik-ek), var(--halo-ek), radial-gradient(36% 50% at 70% 48%, color-mix(in srgb, var(--teal) calc(var(--glow) * 87%), transparent), transparent 70%), linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb), .55) 32%, rgba(var(--bg-rgb), 0) 55%), linear-gradient(180deg, transparent 80%, var(--bg)); }
    .tn-h__alt { grid-template-columns: minmax(0, 30rem) auto; align-items: end; gap: 2.5rem; }
    .tn-h__ipucu { display: block; top: auto; bottom: 7.5rem; }
    .tn-h__asagi { display: flex; }
}

/* ---------------- Dev şerit ---------------- */
.tn-dev-serit { position: relative; overflow: hidden; padding: 1.5rem 0; border-block: 1px solid var(--cizgi); background: var(--serit-bg); }
.tn-dev-serit__iz { display: flex; align-items: center; gap: 2.5rem; width: max-content; font: 800 clamp(3.5rem, 11vw, 9rem)/1 var(--f-baslik); letter-spacing: -.05em; text-transform: uppercase; animation: tn-serit 38s linear infinite; }
.tn-dev-serit__iz b { font-size: .45em; color: var(--teal); font-weight: 400; }
.tn-dev-serit__iz .tn-kontur { -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: var(--kontur-aksan); }
html.tn-gsap .tn-dev-serit__iz { animation: none; }
@keyframes tn-serit { to { transform: translateX(-33.333%); } }

/* ---------------- Manifesto ---------------- */
.tn-manifesto { padding: clamp(6rem, 16vw, 12rem) 0; background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 70%), var(--bg); }
.tn-manifesto__metin { margin-top: 2rem; max-width: 64rem; font: 600 clamp(1.8rem, 4.6vw, 3.9rem)/1.18 var(--f-baslik); letter-spacing: -.035em; color: var(--yazi); }
/* Kelime kelime aydınlanma: --p (0.14 → 1) GSAP ile süzülür; renk temaya göre yazı renginden türer */
.tn-manifesto__metin .tn-k { --p: .14; color: color-mix(in srgb, var(--yazi) calc(var(--p) * 100%), transparent); }
.tn-manifesto__imza { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.tn-manifesto__imza span { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--cizgi-2); background: var(--chip-opt); color: var(--metin-2); font-size: .92rem; }
.tn-manifesto__imza .tn-ikon { color: var(--teal-2); }

/* ---------------- Yatay galeri ---------------- */
.tn-yatay { position: relative; background: linear-gradient(180deg, var(--bg), var(--bg-2) 12%, var(--bg-2) 88%, var(--bg)); }
.tn-yatay__ust { max-width: var(--kap); margin: 0 auto; padding: 4rem 18px 0; display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 700px) { .tn-yatay__ust { padding: 4rem 40px 0; } }
.tn-yatay__ilerleme { flex: 1; height: 1px; background: var(--cizgi-2); display: none; }
.tn-yatay__ilerleme i { display: block; height: 100%; background: var(--teal); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 12px var(--teal); }
.tn-yatay__iz { display: grid; gap: 0; }
.tn-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; max-width: var(--kap); margin: 0 auto; padding: 4rem 18px; }
@media (min-width: 700px) { .tn-panel { padding: 5rem 40px; } }
/* Sanat: karanlıkta ışık saçan maskeli resim; aydınlıkta aynı çizimin şeffaf "mürekkep" sürümü (betikler/tanitim_acik_gorsel_uret.py) kâğıda oturur */
.tn-panel__sanat { position: relative; aspect-ratio: 1; width: 100%; max-width: 620px; margin: 0 auto; }
.tn-panel__sanat::before { content: ""; position: absolute; inset: 14%; z-index: 0; border-radius: 50%; background: var(--gorsel-isik-bg); filter: var(--gorsel-isik-filtre); }
html:not([data-theme="dark"]) .tn-sanat--koyu, html[data-theme="dark"] .tn-sanat--acik { display: none; }
.tn-panel__sanat .tn-sanat { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: var(--gorsel-maske); mask-image: var(--gorsel-maske); }
.tn-panel__no { position: absolute; z-index: 2; left: -.06em; top: -.18em; font: 800 clamp(5rem, 14vw, 11rem)/1 var(--f-baslik); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--kontur-soluk); pointer-events: none; }
.tn-panel__metin h2 { margin-top: 1.1rem; font: 700 clamp(2rem, 5vw, 3.6rem)/1.02 var(--f-baslik); letter-spacing: -.045em; }
.tn-panel__lead { margin-top: 1.1rem; max-width: 34rem; font-size: clamp(1rem, 2vw, 1.12rem); color: var(--soluk); }
.tn-panel__liste { margin-top: 1.75rem; display: grid; gap: .85rem; max-width: 34rem; }
.tn-panel__liste li { display: flex; gap: .75rem; align-items: flex-start; padding-top: .85rem; border-top: 1px solid var(--cizgi); color: var(--metin-3); font-size: .97rem; }
.tn-panel__liste .tn-ikon { margin-top: .2rem; color: var(--teal-ikon); stroke-width: 2.6; }
@media (min-width: 1000px) {
    .tn-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; }
    .tn-panel:nth-child(even) .tn-panel__sanat { order: 2; }
}
/* Yatay mod (JS + geniş ekran) */
html.tn-yatay-aktif .tn-yatay { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
html.tn-yatay-aktif .tn-yatay__ust { padding-top: calc(var(--ust-h) + 1.5rem); width: 100%; }
html.tn-yatay-aktif .tn-yatay__ilerleme { display: block; }
html.tn-yatay-aktif .tn-yatay__iz { display: flex; width: max-content; flex: 1; align-items: center; will-change: transform; }
html.tn-yatay-aktif .tn-panel { flex: none; width: 88vw; max-width: none; height: 100%; margin: 0; padding: 0 5vw 0 6vw; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 4vw; }
html.tn-yatay-aktif .tn-panel:nth-child(even) .tn-panel__sanat { order: 0; }
html.tn-yatay-aktif .tn-panel__sanat { max-width: min(42vw, 68vh); }

/* 2FA kod kartı (sanat üstünde) */
.tn-kod {
    position: absolute; z-index: 3; right: 2%; bottom: 8%; display: grid; gap: .5rem; padding: .9rem 1rem; min-width: 210px; border-radius: 18px;
    background: var(--cam-2); border: 1px solid var(--cizgi-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--golge-kod); color: var(--yazi);
}
.tn-kod__ust { display: flex; align-items: center; gap: .55rem; font-size: .78rem; color: var(--soluk); }
.tn-kod b { font: 700 1.9rem/1 var(--f-kod); letter-spacing: .1em; color: var(--teal-2); }
.tn-kod__bar { height: 4px; border-radius: 99px; background: var(--halka-iz); overflow: hidden; }
.tn-kod__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--mavi)); transform-origin: left; animation: tn-bar 30s linear infinite; }
@keyframes tn-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------- Demo ---------------- */
.tn-demo { padding: clamp(6rem, 14vw, 10rem) 0; background: var(--bg); overflow: hidden; }
.tn-demo__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.5rem; align-items: center; }
@media (min-width: 1000px) { .tn-demo__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.tn-demo__metin h2 { margin-top: 1.1rem; font: 700 clamp(2.6rem, 7vw, 5.6rem)/.98 var(--f-baslik); letter-spacing: -.05em; }
.tn-demo__metin h2 .tn-serif { color: var(--aksan-buyuk); }
.tn-demo__metin > p { margin-top: 1.5rem; max-width: 32rem; color: var(--soluk); font-size: 1.05rem; }
.tn-demo__adim { margin-top: 2rem; display: grid; gap: .65rem; }
.tn-demo__adim li { display: flex; align-items: center; gap: .9rem; color: var(--metin-3); }
.tn-demo__adim b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--kontur-adim); font: 700 .85rem/1 var(--f-baslik); color: var(--teal-2); background: var(--chip-opt); }
.tn-demo__sahne { position: relative; display: grid; place-items: center; min-height: 420px; }
.tn-demo__halo { position: absolute; inset: 10% 6%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--teal) 30%, transparent), color-mix(in srgb, var(--mavi) 14%, transparent) 60%, transparent 100%); }
:root[data-theme="dark"] .tn-demo__halo { background: conic-gradient(from 0deg, rgba(var(--teal-rgb), .0), rgba(var(--teal-rgb), .35), rgba(90, 168, 255, .25), rgba(var(--teal-rgb), 0)); filter: blur(50px); animation: tn-don 14s linear infinite; }
@keyframes tn-don { to { transform: rotate(360deg); } }
.tn-demo__kart {
    position: relative; z-index: 1; width: min(100%, 420px); padding: 1.4rem; border-radius: var(--r-kart); display: grid; gap: 1rem;
    background: linear-gradient(180deg, var(--demo-a, rgba(12, 28, 52, .92)), var(--demo-b, rgba(6, 16, 32, .92))) padding-box, var(--kenar) border-box; border: 1px solid transparent;
    box-shadow: var(--golge-2);
    transform: perspective(1000px) rotateY(-8deg) rotateX(4deg);
}
:root:not([data-theme="dark"]) { --demo-a: #fff; --demo-b: #f4f9fb; }
.tn-demo__bas { display: flex; align-items: center; gap: .8rem; }
.tn-demo__bas .tn-fav { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.tn-demo__bas b { display: block; font-size: 1rem; }
.tn-demo__bas small { color: var(--soluk); font-size: .8rem; }
.tn-demo__durum { margin-left: auto; padding: .35rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--teal-2); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent); }
.tn-demo__alan { display: grid; gap: .35rem; padding: .9rem 1rem; border-radius: 14px; background: var(--ic-zemin); border: 1px solid var(--cizgi); }
.tn-demo__alan small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk-2); }
.tn-demo__alan code { font: 600 1.35rem/1.2 var(--f-kod); letter-spacing: .12em; color: var(--yazi); }
.tn-demo__kisi { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.tn-demo__kisi i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: .8rem; background: linear-gradient(135deg, var(--teal), var(--mavi)); color: var(--murekkep); }
.tn-demo__sonuc { display: flex; align-items: center; gap: .55rem; padding: .85rem 1rem; border-radius: 14px; font-weight: 600; color: var(--ok-yazi); background: var(--ok-bg); border: 1px solid var(--ok-kenar); opacity: .25; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease); }
.tn-demo__sonuc .tn-ikon { color: var(--ok-ikon); }
.tn-demo.is-tamam .tn-demo__sonuc { opacity: 1; transform: none; }

/* ---------------- Bento ---------------- */
.tn-bento { padding: clamp(5rem, 12vw, 9rem) 0; background: linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg)); }
.tn-baslikbas { margin-bottom: 3rem; }
.tn-baslikbas h2 { margin-top: 1rem; font: 700 clamp(2.4rem, 6.4vw, 5.2rem)/.98 var(--f-baslik); letter-spacing: -.05em; }
.tn-baslikbas h2 .tn-serif { color: var(--aksan-buyuk); }
.tn-bento__izgara { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 700px) { .tn-bento__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
    .tn-bento__izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); }
    .tn-tas--kod { grid-column: span 2; grid-row: span 2; }
    .tn-tas--liste { grid-row: span 2; }
    .tn-tas--yontem { grid-column: span 2; }
    .tn-tas--yakinda { grid-column: 1 / -1; }
    .tn-tas--yakinda .tn-yol { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 2.2rem; }
}
.tn-tas {
    --mx: 50%; --my: 0%;
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: 1.6rem; border-radius: var(--r-kart);
    background: radial-gradient(500px circle at var(--mx) var(--my), color-mix(in srgb, var(--teal) 12%, transparent), transparent 45%) padding-box, linear-gradient(180deg, var(--yuzey-a), var(--yuzey-b)) padding-box, var(--kenar) border-box;
    border: 1px solid transparent; box-shadow: var(--golge-kart); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tn-tas:hover { transform: translateY(-4px); box-shadow: var(--golge-kart-ust); }
.tn-tas h3 { font: 700 1.2rem/1.2 var(--f-baslik); letter-spacing: -.03em; }
.tn-tas p { color: var(--soluk); font-size: .92rem; }
.tn-tas .tn-tas__etiket { position: absolute; top: 1.4rem; left: 1.6rem; font: 600 .7rem/1 var(--f-metin); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-2); }
.tn-tas__ikon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: auto; border-radius: 16px; color: var(--teal-2); background: color-mix(in srgb, var(--teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 28%, transparent); box-shadow: var(--ikon-golge, 0 0 30px -8px rgba(var(--teal-rgb), .6)); }
:root:not([data-theme="dark"]) .tn-tas__ikon { --ikon-golge: none; }
.tn-tas__ikon .tn-ikon { width: 24px; height: 24px; }
.tn-tas--kod { justify-content: space-between; min-height: 380px; background: radial-gradient(500px circle at var(--mx) var(--my), color-mix(in srgb, var(--teal) 16%, transparent), transparent 45%) padding-box, radial-gradient(70% 70% at 80% 10%, color-mix(in srgb, var(--teal) 20%, transparent), transparent 60%) padding-box, linear-gradient(180deg, var(--kod-a, rgba(10, 30, 54, .9)), var(--kod-b, rgba(6, 16, 32, .9))) padding-box, var(--kenar) border-box; }
:root:not([data-theme="dark"]) .tn-tas--kod { --kod-a: #fff; --kod-b: #f1f8fa; }
.tn-tas__kod { margin-top: 3.5rem; display: flex; align-items: center; gap: 1.2rem; }
.tn-tas__kod b { font: 700 clamp(2.3rem, 11vw, 5.4rem)/1 var(--f-kod); letter-spacing: .04em; white-space: nowrap; background: var(--grad-kod); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tn-tas--kod h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.tn-ring { width: 54px; height: 54px; flex: none; }
.tn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tn-ring circle { fill: none; stroke: var(--halka-iz); stroke-width: 3; }
.tn-ring .tn-ring__dolu { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 94.25; animation: tn-ring 30s linear infinite; filter: var(--halka-parlak, drop-shadow(0 0 6px var(--teal))); }
:root:not([data-theme="dark"]) .tn-ring .tn-ring__dolu { --halka-parlak: none; }
@keyframes tn-ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 94.25; } }
.tn-mini-kasa { margin: 3rem 0 auto; display: grid; gap: .5rem; }
.tn-mini-kasa li { display: flex; align-items: center; gap: .65rem; padding: .6rem .7rem; border-radius: 12px; background: var(--ic-zemin-2); border: 1px solid var(--cizgi); font-size: .86rem; font-weight: 600; }
.tn-mini-kasa em { margin-left: auto; white-space: nowrap; font-style: normal; font-size: .68rem; font-weight: 600; color: var(--soluk); padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--cizgi-2); }
.tn-mini-kasa .tn-em--teal { color: var(--teal-2); border-color: color-mix(in srgb, var(--teal) 35%, transparent); }
.tn-yontemler { margin: 2.5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tn-yontemler span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 999px; background: var(--chip); border: 1px solid var(--cizgi-2); font-size: .82rem; font-weight: 600; color: var(--metin-3); transition: background-color .25s, border-color .25s; }
.tn-yontemler span:hover { background: var(--chip-vurgu); border-color: color-mix(in srgb, var(--teal) 55%, transparent); }
.tn-yontemler .tn-ikon { color: var(--teal-2); }
.tn-tas--yakinda { justify-content: flex-start; background: linear-gradient(180deg, var(--yol-a, rgba(10, 22, 40, .6)), var(--yol-b, rgba(6, 14, 28, .6))) padding-box, repeating-linear-gradient(135deg, rgba(255, 190, 70, .35) 0 6px, transparent 6px 12px) border-box; }
:root:not([data-theme="dark"]) .tn-tas--yakinda { --yol-a: #fffaf0; --yol-b: #fff6e0; background: linear-gradient(180deg, var(--yol-a), var(--yol-b)) padding-box, repeating-linear-gradient(135deg, rgba(214, 150, 0, .55) 0 6px, transparent 6px 12px) border-box; }
.tn-yol { margin-top: 2.5rem; display: grid; gap: .9rem 1.5rem; }
.tn-yol li { display: flex; gap: .65rem; align-items: flex-start; font-size: .92rem; color: var(--metin-3); }
.tn-yol .tn-ikon { margin-top: .15rem; color: var(--uyari-yazi); }

/* ---------------- Kipri ---------------- */
.tn-kipri { position: relative; overflow: hidden; padding: clamp(6rem, 14vw, 11rem) 0; background: var(--bg); }
.tn-kipri__dev { position: absolute; top: 50%; left: 0; z-index: 0; transform: translateY(-50%); white-space: nowrap; font: 800 clamp(9rem, 30vw, 26rem)/1 var(--f-baslik); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--kontur-dev); pointer-events: none; }
.tn-kipri__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .tn-kipri__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5rem; } }
.tn-kipri__sanat { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 1; }
.tn-kipri__sanat::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: var(--kipri-isik-bg); filter: var(--kipri-isik-filtre); }
.tn-kipri__sanat .tn-sanat { position: relative; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: var(--gorsel-maske); mask-image: var(--gorsel-maske); }
/* Aydınlıkta maskot: kâğıda çizilmiş eskiz gibi; üstte Solid sarısı bant (washi tape) ile tutturulmuş */
:root:not([data-theme="dark"]) .tn-kipri__sanat::after { content: ""; position: absolute; left: 50%; top: 2%; width: 34%; height: 8.5%; transform: translateX(-50%) rotate(-5deg); background: color-mix(in srgb, var(--sari) 88%, transparent); box-shadow: 0 8px 16px -8px rgba(11, 26, 48, .35); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 100% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); }
.tn-kipri__metin h2 { margin-top: 1.1rem; font: 700 clamp(2.4rem, 5.8vw, 4.8rem)/1 var(--f-baslik); letter-spacing: -.05em; }
.tn-kipri__metin h2 .tn-serif { color: var(--aksan-buyuk); }
.tn-kipri__metin > p:last-child { margin-top: 1.5rem; max-width: 34rem; color: var(--metin-2); font-size: 1.1rem; }

/* ---------------- Başla ---------------- */
.tn-basla { padding: clamp(5rem, 12vw, 9rem) 0; background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.tn-basla__liste { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--cizgi-2); }
@media (min-width: 900px) { .tn-basla__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-basla__liste li { position: relative; padding: 2.2rem 0 2.2rem; border-bottom: 1px solid var(--cizgi-2); }
@media (min-width: 900px) { .tn-basla__liste li { padding: 2.5rem 2.5rem 2.5rem 0; border-bottom: 0; } .tn-basla__liste li + li { padding-left: 2.5rem; border-left: 1px solid var(--cizgi-2); } }
.tn-basla__no { display: block; font: 800 clamp(4rem, 9vw, 6.5rem)/1 var(--f-baslik); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--kontur-aksan); }
.tn-basla__liste h3 { margin-top: 1.25rem; font: 700 1.5rem/1.1 var(--f-baslik); letter-spacing: -.03em; }
.tn-basla__liste p { margin-top: .6rem; color: var(--soluk); }

/* ---------------- SSS ---------------- */
.tn-sss { padding: clamp(5rem, 12vw, 9rem) 0; background: var(--bg-2); }
.tn-sss__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
@media (min-width: 1000px) { .tn-sss__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; align-items: start; } .tn-sss__bas { position: sticky; top: calc(var(--ust-h) + 2rem); } }
.tn-sss__bas h2 { margin-top: 1rem; font: 700 clamp(2.8rem, 7vw, 5.8rem)/.95 var(--f-baslik); letter-spacing: -.05em; }
.tn-sss__bas h2 .tn-serif { color: var(--aksan-buyuk); }
.tn-sss__bas > p:last-child { margin-top: 1.5rem; color: var(--soluk); }
.tn-sss__bas a { color: var(--teal-2); border-bottom: 1px solid currentColor; }
.tn-sss__liste { border-top: 1px solid var(--cizgi-2); }
.tn-sss__oge { border-bottom: 1px solid var(--cizgi-2); }
.tn-sss__oge summary { list-style: none; display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 0; cursor: pointer; }
.tn-sss__oge summary::-webkit-details-marker { display: none; }
.tn-sss__no { flex: none; font: 500 .78rem/1 var(--f-metin); letter-spacing: .1em; color: var(--soluk-2); }
.tn-sss__oge summary h3 { flex: 1; font: 600 clamp(1.05rem, 2vw, 1.3rem)/1.3 var(--f-baslik); letter-spacing: -.02em; transition: color .25s; }
.tn-sss__oge summary:hover h3, .tn-sss__oge[open] summary h3 { color: var(--teal-2); }
.tn-sss__oge summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--cizgi-2); transition: transform .4s var(--ease), background-color .3s; }
.tn-sss__oge summary i::before, .tn-sss__oge summary i::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 1.5px; background: var(--yazi); }
.tn-sss__oge summary i::after { transform: rotate(90deg); transition: transform .4s var(--ease); }
.tn-sss__oge[open] summary i { background: var(--teal); border-color: var(--teal); }
.tn-sss__oge[open] summary i::before, .tn-sss__oge[open] summary i::after { background: var(--murekkep); }
.tn-sss__oge[open] summary i::after { transform: rotate(0deg); }
.tn-sss__cevap { padding: 0 3rem 1.6rem 2.6rem; color: var(--soluk); font-size: 1rem; max-width: 46rem; }

/* ---------------- Son ---------------- */
.tn-son { position: relative; isolation: isolate; overflow: hidden; padding: clamp(8rem, 18vw, 14rem) 0; text-align: center; color: var(--yazi); }
.tn-son__sanat { position: absolute; inset: 0; z-index: -1; opacity: var(--son-sanat-op); -webkit-mask-image: radial-gradient(60% 70% at 50% 50%, #000 25%, transparent 78%); mask-image: radial-gradient(60% 70% at 50% 50%, #000 25%, transparent 78%); }
.tn-son__sanat .tn-sanat { width: 100%; height: 100%; object-fit: cover; object-position: 66% 45%; }
.tn-son::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 50%, rgba(var(--bg-rgb), var(--son-ort)), rgba(var(--bg-rgb), var(--son-ort2)) 70%, var(--bg) 100%); }
.tn-son .tn-son__baslik { font: 800 clamp(4rem, 16vw, 14rem)/.88 var(--f-baslik); letter-spacing: -.07em; }
.tn-son__baslik .tn-serif { color: var(--aksan-buyuk); font-size: 1.05em; }
.tn-son p { margin: 1.75rem auto 0; max-width: 34rem; color: var(--metin-3); font-size: 1.12rem; }
/* Aydınlık: kapanış sanatının üstündeki metin okunur kalsın (AA) */
:root:not([data-theme="dark"]) .tn-son p { color: var(--yazi); text-shadow: 0 0 18px rgba(var(--bg-rgb), .95), 0 0 5px rgba(var(--bg-rgb), .9); }
:root:not([data-theme="dark"]) .tn-son__baslik .tn-serif { color: var(--teal-koyu); text-shadow: 0 0 26px rgba(var(--bg-rgb), .9); }
.tn-son__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }

/* ---------------- Alt ---------------- */
.tn-alt { position: relative; overflow: hidden; padding-top: 4.5rem; background: var(--alt-bg); border-top: 1px solid var(--cizgi); color: var(--soluk); font-size: .92rem; }
.tn-alt__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 700px) { .tn-alt__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tn-alt__in { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 3rem; } }
.tn-alt__marka p { max-width: 26rem; line-height: 1.7; }
.tn-alt__kol { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.tn-alt__baslik { margin-bottom: .4rem; font: 600 .72rem/1 var(--f-metin); letter-spacing: .2em; text-transform: uppercase; color: var(--yazi); }
.tn-alt__kol a, .tn-alt__kol address { display: inline-flex; align-items: flex-start; gap: .5rem; font-style: normal; transition: color .2s; }
.tn-alt__kol a:hover { color: var(--teal-2); }
.tn-alt__kol .tn-ikon { margin-top: .2rem; color: var(--teal-ikon); }
.tn-sosyal { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.tn-sosyal a { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--cizgi); border-radius: 50%; color: var(--yazi); transition: color .2s, border-color .2s, transform .25s var(--ease); }
.tn-sosyal a:hover, .tn-sosyal a:focus-visible { color: var(--teal-2); border-color: var(--teal-2); transform: translateY(-2px); }
.tn-sosyal .tn-ikon { width: 1.15rem; height: 1.15rem; margin: 0; color: currentColor; }
.tn-alt__dev {
    margin: 3rem 0 2.5rem; text-align: center; user-select: none;
}
.tn-alt__son { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1.5rem; border-top: 1px solid var(--cizgi); font-size: .82rem; }
.tn-alt__son a { color: var(--yazi); }

/* ---------------- Dokunma ipucu, dalga, sayaç, yapışkan buton (temel) ---------------- */
.tn-h__dokun { display: none; }
.tn-dalga {
    position: absolute; z-index: 2; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
    border: 1.5px solid var(--imlec); box-shadow: var(--dalga-golge);
    animation: tn-dalga .9s cubic-bezier(.15, .7, .2, 1) forwards;
}
@keyframes tn-dalga { to { transform: scale(14); opacity: 0; border-width: .5px; } }
.tn-yatay__sayac { display: none; margin-left: auto; font: 500 .8rem/1 var(--f-metin); letter-spacing: .12em; color: var(--soluk); font-variant-numeric: tabular-nums; }
.tn-yatay__sayac b { color: var(--teal-2); font-weight: 700; }
.tn-yapiskan { display: none; }

/* ---------------- Mobil ve tablet (< 1000px) ---------------- */
@media (max-width: 999px) {
    /* Sahne: kirpi üstte kendi sahnesinde, yazı altında */
    .tn-h {
        --sahne: clamp(300px, 52svh, 470px);
        min-height: 0; justify-content: flex-start;
        padding: calc(var(--sahne) + .25rem) 0 3rem;
    }
    .tn-h__arka {
        inset: 0 0 auto 0; height: calc(var(--sahne) + 30px);
        -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
    }
    .tn-h__yedek { top: calc(var(--ust-h) + .25rem); width: min(78vw, 380px); opacity: var(--yedek-opak); }
    .tn-h__isik { background: var(--isik-ek), radial-gradient(48% 42% at 50% 56%, color-mix(in srgb, var(--teal) calc(var(--glow) * 125%), transparent), transparent 72%); }
    .tn-h__izgara { -webkit-mask-image: radial-gradient(60% 55% at 50% 55%, #000, transparent 75%); mask-image: radial-gradient(60% 55% at 50% 55%, #000, transparent 75%); }
    .tn-h__dokun {
        position: absolute; z-index: 3; left: 50%; top: calc(var(--sahne) - 42px); transform: translateX(-50%);
        display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .45rem .55rem; border-radius: 999px; pointer-events: none;
        font: 600 .74rem/1 var(--f-metin); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-2);
        background: var(--cam); border: 1px solid color-mix(in srgb, var(--teal) 38%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        transition: opacity .5s, transform .5s var(--ease);
    }
    .tn-h__dokun-halka { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); }
    .tn-h__dokun-halka::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--teal); animation: tn-ipucu-halka 1.8s ease-out infinite; }
    @keyframes tn-ipucu-halka { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
    .tn-h.is-dokunuldu .tn-h__dokun { opacity: 0; transform: translate(-50%, 8px); }
    .tn-h__in { pointer-events: auto; }
    .tn-h__ust { margin-bottom: 1rem; }
    .tn-h__baslik { font-size: clamp(1.9rem, 9.2vw, 4.2rem); line-height: 1; }
    .tn-h__alt { margin-top: 1.4rem; gap: 1.4rem; }
    .tn-h__olgular { margin-top: 2rem; }

    /* Bölümler: parmakla kaydırılan kart galerisi */
    .tn-yatay__ust { padding-top: 3.5rem; }
    .tn-yatay__ilerleme, .tn-yatay__sayac { display: block; }
    .tn-yatay__ilerleme i { transition: transform .25s; }
    .tn-yatay__iz {
        display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding: 1.5rem 18px 3.5rem; scroll-padding-inline: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .tn-yatay__iz::-webkit-scrollbar { display: none; }
    .tn-panel {
        flex: 0 0 min(86%, 560px); scroll-snap-align: start; margin: 0; padding: 1.1rem 1.1rem 1.5rem; gap: 1rem; align-content: start; align-items: start;
        border-radius: calc(var(--r-kart) + 2px); background: linear-gradient(180deg, var(--yuzey-a), var(--yuzey-b)) padding-box, var(--kenar) border-box; border: 1px solid transparent; box-shadow: var(--golge-kart);
    }
    .tn-panel__sanat { aspect-ratio: 1.15 / 1; max-width: none; border-radius: 20px; overflow: hidden; }
    .tn-panel__sanat .tn-sanat { -webkit-mask-image: none; mask-image: none; transform: scale(1.12); }
    .tn-panel__sanat::before { inset: 0; border-radius: 0; filter: var(--gorsel-isik-filtre-m); }
    .tn-panel__no { left: .1em; top: .02em; font-size: 4.2rem; -webkit-text-stroke-color: rgba(143, 240, 243, .65); }
    .tn-panel__metin { padding: 0 .3rem; }
    .tn-panel__metin h2 { margin-top: .8rem; font-size: clamp(1.55rem, 6.4vw, 2.2rem); }
    .tn-panel__lead { font-size: .95rem; }
    .tn-panel__liste { margin-top: 1.1rem; gap: .6rem; }
    .tn-panel__liste li { padding-top: .6rem; font-size: .9rem; }
    .tn-kod { right: 6%; bottom: 6%; min-width: 0; padding: .7rem .8rem; }
    .tn-kod b { font-size: 1.45rem; }

    /* Demo kartı ekrana sığsın */
    .tn-demo__kart { transform: perspective(1000px) rotateY(-4deg) rotateX(3deg); }
    .tn-demo__sahne { min-height: 360px; }

    /* SSS */
    .tn-sss__oge summary { gap: .8rem; padding: 1.25rem 0; }
    .tn-sss__oge summary i { width: 32px; height: 32px; }
    .tn-sss__oge summary i::before, .tn-sss__oge summary i::after { left: 9px; right: 9px; top: 15px; }
    .tn-sss__cevap { padding: 0 0 1.4rem 2.2rem; font-size: .95rem; }

    /* Yapışkan buton */
    .tn-yapiskan {
        position: fixed; z-index: 110; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
        display: flex; align-items: center; gap: .5rem; padding: 6px; border-radius: 999px;
        background: var(--cam-2); border: 1px solid var(--cizgi-2); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
        box-shadow: var(--golge-3);
        transform: translateY(calc(100% + 30px)); transition: transform .5s var(--ease);
    }
    .tn-yapiskan.is-gorunur { transform: none; }
    .tn-yapiskan .tn-btn { flex: 1; min-height: 50px; }
    .tn-yapiskan__giris { padding: 0 1.2rem; font-weight: 600; color: var(--yazi); }
    .tn-alt { padding-bottom: 5.5rem; }
}
@media (max-width: 559px) {
    .tn-h__cta { display: grid; grid-template-columns: minmax(0, 1fr); }
    .tn-h__cta .tn-btn { width: 100%; }
    .tn-son__cta { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 .5rem; }
    .tn-btn--xl { min-height: 60px; }
    .tn-demo__kart { transform: none; }
}

/* ================= Solid Medya karakteri — Ceepri yorumu ================= */
.tn-el-yazi { font-family: var(--f-el); font-weight: 700; letter-spacing: 0; }

/* Hero kolajı: uçan ürün parçaları */
.tn-kolaj { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tn-ucan {
    --px: 0; --py: 0;
    position: absolute; display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: 16px;
    background: var(--cam); border: 1px solid var(--cizgi-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: var(--golge-1); white-space: nowrap; will-change: transform; color: var(--yazi);
    animation: tn-ucan-suzul 8s ease-in-out infinite;
}
.tn-ucan > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.tn-ucan small { font-size: .66rem; color: var(--soluk); }
.tn-ucan b { font-size: .86rem; font-weight: 700; }
.tn-mono { font-family: var(--f-kod); letter-spacing: .08em; color: var(--teal-2); }
.tn-ucan__ikon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ikon-mavi-fg); background: var(--ikon-mavi-bg); }
.tn-ucan__ikon--teal { color: var(--ikon-teal-fg); background: var(--ikon-teal-bg); }
.tn-ucan__ikon--sari { color: var(--ikon-sari-fg); background: var(--ikon-sari-bg); }
.tn-ucan__ikon .tn-ikon { width: 16px; height: 16px; }
/* Dev başlık sol ~%70'i kaplar; kartlar sağdaki boşlukta ve başlığın üstünde dolaşır */
.tn-ucan--1 { right: 8%; top: 41%; transform: rotate(-6deg); animation-delay: -1s; }
.tn-ucan--2 { right: 3%; top: 17%; transform: rotate(5deg); animation-delay: -3s; }
.tn-ucan--3 { right: 4%; bottom: 23%; transform: rotate(-4deg); animation-delay: -5s; }
.tn-ucan--4 { right: 13%; bottom: 7%; transform: rotate(7deg); animation-delay: -2s; }
.tn-ucan--5 { right: 27%; top: 9%; transform: rotate(-3deg); animation-delay: -6s; }
@keyframes tn-ucan-suzul { 50% { translate: 0 -12px; } }
html.tn-gsap .tn-ucan { animation: none; }

/* Dönen mühür */
.tn-muhur { position: absolute; z-index: 2; right: 40px; bottom: 44px; width: 132px; height: 132px; display: grid; place-items: center; pointer-events: none; }
.tn-muhur::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--muhur-zemin, transparent); box-shadow: var(--muhur-golge, none); }
:root:not([data-theme="dark"]) .tn-muhur { --muhur-zemin: rgba(255, 255, 255, .82); --muhur-golge: var(--golge-1); }
.tn-muhur__yazi { position: absolute; inset: 0; width: 100%; height: 100%; animation: tn-don 22s linear infinite; }
.tn-muhur__yazi text { font: 700 8.6px/1 var(--f-metin); letter-spacing: .06em; fill: var(--teal-2); }
.tn-muhur__orta { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--murekkep); background: linear-gradient(180deg, var(--btn-ana-a), var(--btn-ana-b)); box-shadow: 0 0 30px color-mix(in srgb, var(--teal) 60%, transparent); }
:root:not([data-theme="dark"]) .tn-muhur__orta { box-shadow: 0 8px 18px -6px rgba(11, 140, 150, .6); }
.tn-muhur__orta .tn-ikon { width: 24px; height: 24px; stroke-width: 2.4; }

/* El yazısı not + ok */
.tn-not { position: absolute; z-index: 2; display: flex; align-items: flex-end; gap: .2rem; pointer-events: none; font: 700 1.55rem/1 var(--f-el); color: var(--teal-2); transform: rotate(-6deg); }
.tn-not svg { width: 86px; height: 50px; color: var(--teal-2); margin-bottom: .8rem; }
.tn-not--sahne { right: 4%; top: 58%; }

/* Ses düğmesi */
.tn-ses {
    position: absolute; z-index: 3; right: 40px; top: calc(var(--ust-h) + 18px); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    color: var(--teal-2); background: var(--cam-ses); border: 1px solid var(--cizgi-2); cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tn-ses .tn-ikon { width: 18px; height: 18px; }
.tn-ses__kapali { display: none !important; }
.tn-ses[aria-pressed="false"] .tn-ses__acik { display: none !important; }
.tn-ses[aria-pressed="false"] .tn-ses__kapali { display: block !important; }

/* Solid Medya rozeti */
.tn-solid { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem; padding: .45rem .9rem .45rem .45rem; border-radius: 999px; border: 1px solid var(--solid-kenar, rgba(255, 188, 0, .28)); background: var(--solid-bg, rgba(255, 188, 0, .06)); font-size: .82rem; color: var(--solid-yazi, #d9dfe8); pointer-events: auto; transition: border-color .25s, background-color .25s; }
:root:not([data-theme="dark"]) .tn-solid { --solid-kenar: rgba(214, 150, 0, .5); --solid-bg: rgba(255, 188, 0, .16); --solid-yazi: #3a3320; }
.tn-solid:hover { border-color: rgba(214, 150, 0, .85); background: rgba(255, 188, 0, .26); }
:root[data-theme="dark"] .tn-solid:hover { border-color: rgba(255, 188, 0, .6); background: rgba(255, 188, 0, .12); }
.tn-solid b { color: var(--sari-metin); }
.tn-solid__yildiz { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sari); color: #1b1300; }
.tn-solid__yildiz .tn-ikon { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.5; }

/* Rakamlarla kirpi */
.tn-rakam { padding: clamp(4.5rem, 10vw, 7rem) 0; background: linear-gradient(180deg, var(--bg), var(--bg-2) 50%, var(--bg)); text-align: center; }
.tn-rakam h2 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1; color: var(--yazi); }
.tn-rakam h2 span { position: relative; color: var(--aksan-buyuk); }
.tn-rakam h2 span::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -.08em; height: .22em; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--teal-rgb), .0), rgba(var(--teal-rgb), .7), color-mix(in srgb, var(--sari) 55%, transparent)); transform: rotate(-2deg); }
.tn-rakam__liste { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
@media (min-width: 900px) { .tn-rakam__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tn-rakam__liste li + li { border-left: 1px solid var(--cizgi-2); } }
.tn-rakam__liste li { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 0 .5rem; }
.tn-rakam__liste b { font: 800 clamp(3.2rem, 9vw, 5.6rem)/1 var(--f-baslik); letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: var(--grad-sayi); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tn-rakam__liste span { font-size: .95rem; color: var(--soluk); }

/* Çapraz güvenlik bantları */
.tn-bantlar { position: relative; height: clamp(170px, 24vw, 260px); overflow: hidden; background: var(--bg); }
.tn-bant { position: absolute; left: -10%; right: -10%; top: 50%; padding: .9rem 0; overflow: hidden; box-shadow: var(--golge-bant, 0 20px 50px -20px rgba(0, 0, 0, .8)); }
:root:not([data-theme="dark"]) .tn-bant { --golge-bant: 0 16px 30px -14px rgba(11, 26, 48, .4); }
.tn-bant--sari { background: var(--sari); color: var(--sari-murekkep); transform: translateY(-50%) rotate(-4.5deg); z-index: 1; }
.tn-bant--teal { background: linear-gradient(90deg, var(--teal), var(--bant-teal-b)); color: var(--murekkep); transform: translateY(-50%) rotate(3.5deg); z-index: 2; }
.tn-bant__iz { display: flex; align-items: center; gap: 1.4rem; width: max-content; font: 800 clamp(1rem, 2.4vw, 1.6rem)/1 var(--f-baslik); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; animation: tn-bant 32s linear infinite; }
.tn-bant__iz--ters { animation-direction: reverse; animation-duration: 36s; }
.tn-bant__iz i { font-style: normal; font-size: .8em; opacity: .7; }
@keyframes tn-bant { to { transform: translateX(-50%); } }

/* Mobil alt menü (uygulama gibi) */
.tn-tab { display: none; }

/* Başa dön + kaydırma ilerlemesi */
.tn-yukari {
    position: fixed; z-index: 105; right: 22px; bottom: 22px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    color: var(--teal-2); background: var(--cam-yukari); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--golge-yukari, none);
    opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .35s, transform .45s var(--ease);
}
:root:not([data-theme="dark"]) .tn-yukari { --golge-yukari: var(--golge-1); }
.tn-yukari.is-gorunur { opacity: 1; transform: none; pointer-events: auto; }
.tn-yukari .tn-ikon { width: 18px; height: 18px; position: relative; z-index: 1; }
.tn-yukari__halka { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tn-yukari__halka circle { fill: none; stroke: var(--cizgi-2); stroke-width: 2; }
.tn-yukari__halka .tn-yukari__dolu { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 125.66; }
:root[data-theme="dark"] .tn-yukari__halka .tn-yukari__dolu { filter: drop-shadow(0 0 4px var(--teal)); }

/* Altbilgi: yörünge, standartlar, slogan */
.tn-yorunge { position: relative; width: 190px; height: 190px; margin-bottom: 1.5rem; display: grid; place-items: center; }
.tn-yorunge img { width: 86px; height: 86px; filter: var(--yorunge-golge, drop-shadow(0 0 24px rgba(var(--teal-rgb), .45))); }
:root:not([data-theme="dark"]) .tn-yorunge { --yorunge-golge: drop-shadow(0 10px 18px rgba(11, 26, 48, .25)); }
.tn-yorunge .tn-yorunge__acik { display: none; }
:root[data-theme="dark"] .tn-yorunge .tn-yorunge__acik { display: block; }
:root[data-theme="dark"] .tn-yorunge .tn-yorunge__renkli { display: none; }
.tn-yorunge__halka { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--yorunge-iz); animation: tn-don 40s linear infinite; }
.tn-yorunge__halka span {
    position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; display: grid; place-items: center; border-radius: 50%;
    color: var(--teal-2); background: var(--yorunge-bg, #0a1a30); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
    transform: rotate(var(--a)) translate(95px) rotate(calc(-1 * var(--a)));
}
:root:not([data-theme="dark"]) .tn-yorunge__halka span { --yorunge-bg: #fff; box-shadow: var(--golge-1); }
.tn-yorunge__halka span .tn-ikon { width: 16px; height: 16px; animation: tn-don 40s linear infinite reverse; }
.tn-standart { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.tn-standart li { padding: .55rem .9rem; border-radius: 10px; background: var(--chip); border: 1px solid var(--cizgi-2); font: 600 .8rem/1 var(--f-metin); letter-spacing: .02em; color: var(--metin-2); }
.tn-alt__dev { position: relative; }
.tn-alt__slogan {
    position: static; display: inline-block; transform: rotate(-3deg); font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: 0;
    -webkit-text-fill-color: var(--sari); color: var(--sari); background: none; text-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}
/* Aydınlıkta slogan: sarı bant (washi tape) üstünde koyu el yazısı — sarı yazı kâğıtta okunmaz */
:root:not([data-theme="dark"]) .tn-alt__slogan { -webkit-text-fill-color: var(--sari-murekkep); color: var(--sari-murekkep); background: var(--sari); padding: .12em .5em .2em; border-radius: 4px; text-shadow: none; box-shadow: 0 10px 20px -10px rgba(11, 26, 48, .4); }

/* Geniş ekranda gizlenen mobil öğeler / mobilde gizlenen masaüstü öğeleri */
@media (max-width: 999px) {
    .tn-not--sahne { display: none; }
    .tn-ucan { padding: .45rem .6rem; border-radius: 13px; gap: .45rem; }
    .tn-ucan small { font-size: .6rem; }
    .tn-ucan b { font-size: .74rem; }
    .tn-ucan__ikon { width: 24px; height: 24px; border-radius: 7px; }
    .tn-ucan--1 { left: 3%; top: calc(var(--ust-h) + 18px); right: auto; bottom: auto; }
    .tn-ucan--2 { right: 3%; left: auto; top: calc(var(--sahne) * .56); bottom: auto; }
    .tn-ucan--3, .tn-ucan--4, .tn-ucan--5 { display: none; }
    .tn-muhur { width: 78px; height: 78px; right: 10px; bottom: auto; top: calc(var(--ust-h) + 6px); }
    .tn-muhur__yazi text { font-size: 9.6px; }
    .tn-muhur__orta { width: 32px; height: 32px; }
    .tn-muhur__orta .tn-ikon { width: 16px; height: 16px; }
    .tn-ses { right: 14px; bottom: auto; top: calc(var(--sahne) - 46px); width: 36px; height: 36px; }
    .tn-solid { font-size: .76rem; }

    .tn-tab {
        position: fixed; z-index: 115; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; height: 64px; padding: 0 6px 8px; border-radius: 22px;
        background: var(--tab-bg); border: 1px solid var(--cizgi-2); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
        box-shadow: var(--golge-3);
        transition: transform .45s var(--ease);
    }
    body.tn-menu-acik .tn-tab { transform: translateY(140%); }
    .tn-tab a { display: flex; flex-direction: column; align-items: center; gap: .3rem; font: 600 .64rem/1 var(--f-metin); color: var(--soluk); transition: color .2s; }
    .tn-tab a .tn-ikon { width: 20px; height: 20px; }
    .tn-tab a.is-aktif { color: var(--teal-2); }
    .tn-tab__fab { position: relative; }
    .tn-tab__fab i {
        display: grid; place-items: center; width: 54px; height: 54px; margin-top: -26px; border-radius: 50%;
        color: var(--murekkep); background: linear-gradient(180deg, var(--btn-ana-a), var(--btn-ana-b)); border: 4px solid var(--tab-halka);
        box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--teal) 90%, transparent);
    }
    .tn-tab__fab i .tn-ikon { width: 24px; height: 24px; stroke-width: 2.6; }
    .tn-tab .tn-tab__fab { color: var(--teal-2); }
    .tn-yukari { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
    .tn-alt { padding-bottom: 6.5rem; }
    .tn-yorunge { width: 160px; height: 160px; }
    .tn-yorunge__halka span { transform: rotate(var(--a)) translate(80px) rotate(calc(-1 * var(--a))); }
}

/* Kelime maskesi (başlık açılışları) */
.tn-kelime { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.tn-kelime__ic { display: inline-block; will-change: transform; }

/* ---------------- Yedek belirme (GSAP yoksa) ---------------- */
html.tn-js.tn-gsap-yok [data-tn-buyu], html.tn-js.tn-gsap-yok .tn-panel, html.tn-js.tn-gsap-yok .tn-tas { animation: tn-belir .9s var(--ease) both; }
@keyframes tn-belir { from { opacity: 0; transform: translateY(24px); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .tn-yukle * { animation-delay: 0s !important; }
    body.tn::after { animation: none; }
}