/* ObsyonX ana sayfa — "Obsidyen ve köz". Renkler uygulamanın bakır tema motoruyla aynı aileden. */
@font-face{font-family:'Sora';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/sora-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/sora-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/manrope-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --o0:#0B0908;--o1:#110D0B;--o2:#17120F;--o3:#201914;
  --cam:rgba(255,236,222,.035);--cam2:rgba(255,236,222,.06);
  --cizgi:rgba(239,232,226,.09);--cizgi2:rgba(239,232,226,.16);
  --metin:#EFE8E2;--metin2:#C9C0B9;--soluk:#9C938C;
  --bakir:#BF7E57;--bakir-acik:#E2A781;--bakir-koyu:#753C1D;--koz:#F3B88F;--uzeri:#140F0C;
  --marka-ust:#CA9777;--marka-orta:#AE663D;--marka-alt:#753C1D;
  --uyari:#E9C170;
  --yumusak:cubic-bezier(.2,.7,.2,1);
  --g2:.62s;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--o0)}
body{margin:0;background:var(--o0);color:var(--metin);font:400 1rem/1.65 'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Sora','Manrope',system-ui,sans-serif;font-weight:600;letter-spacing:-.025em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
::selection{background:rgba(191,126,87,.45);color:#fff}
:focus-visible{outline:2px solid var(--koz);outline-offset:3px;border-radius:8px}
.kap{width:100%;max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,32px)}
.atla{position:absolute;left:12px;top:-60px;background:var(--bakir);color:var(--uzeri);padding:8px 14px;border-radius:8px;font-weight:700;text-decoration:none;z-index:20}
.atla:focus{top:12px}
.ince{color:var(--soluk);font-size:.875rem}
.ust-yazi{display:inline-flex;align-items:center;gap:10px;color:var(--bakir-acik);font-size:.75rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.nabiz{width:8px;height:8px;border-radius:50%;background:var(--koz);box-shadow:0 0 0 0 rgba(243,184,143,.6);animation:nabiz 2.8s var(--yumusak) infinite}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(243,184,143,.55)}70%{box-shadow:0 0 0 12px rgba(243,184,143,0)}100%{box-shadow:0 0 0 0 rgba(243,184,143,0)}}

/* İşaret renkleri */
.mu{stop-color:var(--marka-ust)}.mo{stop-color:var(--marka-orta)}.ma{stop-color:var(--marka-alt)}
.halka{stroke:var(--metin)}
.isaret-kucuk{width:26px;height:26px;display:block;flex:none}

/* ---------- Üst bar ---------- */
.ust{position:fixed;inset:0 0 auto 0;z-index:10;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,rgba(11,9,8,.82),rgba(11,9,8,.55));backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--cizgi)}
.ust-ic{display:flex;align-items:center;gap:24px;min-height:64px}
.marka{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:1.0625rem;letter-spacing:-.02em}
.ust nav{flex:1}
.ust nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.ust nav a{display:block;padding:8px 12px;border-radius:999px;color:var(--metin2);text-decoration:none;font-weight:600;font-size:.9rem;transition:background .3s,color .3s}
.ust nav a:hover{background:var(--cam2);color:var(--metin)}
.ust-eylem{display:flex;align-items:center;gap:10px}
.dil{padding:7px 11px;border-radius:999px;border:1px solid var(--cizgi2);color:var(--metin2);text-decoration:none;font-size:.75rem;font-weight:800;letter-spacing:.08em;transition:color .3s,border-color .3s}
.dil:hover{color:var(--metin);border-color:var(--bakir)}

/* ---------- Düğmeler ---------- */
.dugme{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font-weight:800;font-size:.95rem;text-decoration:none;isolation:isolate;transition:transform .4s var(--yumusak),box-shadow .4s,background .4s,border-color .4s,color .4s}
.dugme.kucuk{min-height:38px;padding:0 18px;font-size:.85rem}
.birincil{background:linear-gradient(135deg,var(--koz),var(--bakir) 55%,#9A5A35);color:var(--uzeri);box-shadow:0 10px 30px -12px rgba(191,126,87,.7),inset 0 1px 0 rgba(255,255,255,.35)}
.birincil:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(226,167,129,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.parlak::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:soft-light;animation:supur 4.5s ease-in-out infinite;z-index:-1}
@keyframes supur{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.ok{transition:transform .4s var(--yumusak)}
.dugme:hover .ok{transform:translateX(4px)}
.hayalet{border:1px solid var(--cizgi2);color:var(--metin);background:var(--cam)}
.hayalet:hover{border-color:var(--bakir);background:var(--cam2)}
.pasif{border:1px dashed var(--cizgi2);color:var(--soluk);cursor:default;align-self:flex-start}

/* ---------- Kahraman ---------- */
.kahraman{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.magma-yedek{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(60% 50% at 75% 45%,rgba(191,126,87,.22),transparent 70%),
  radial-gradient(40% 35% at 20% 80%,rgba(117,60,29,.25),transparent 70%),
  radial-gradient(120% 90% at 50% 120%,#1a120d,var(--o0) 70%)}
#magma{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 2.4s ease}
#magma.hazir{opacity:1}
/* Metnin arkası sakin: soldan yumuşak karartma; alt kenar şeride yumuşakça erir. */
.tane{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,9,8,.86) 0%,rgba(11,9,8,.62) 34%,rgba(11,9,8,.12) 62%,transparent 78%),
  linear-gradient(180deg,rgba(11,9,8,.35),rgba(11,9,8,0) 22%,rgba(11,9,8,0) 70%,var(--o0) 100%)}
.kahraman-ic{display:grid;grid-template-columns:1.25fr .75fr;gap:32px;align-items:center;padding-block:120px 110px}
.kahraman-metin{display:flex;flex-direction:column;gap:26px;min-width:0}
h1{font-size:clamp(2.5rem,5.2vw,4.7rem);line-height:1.03;letter-spacing:-.04em;font-weight:600}
h1 .satir{display:block}
/* Gradyan metin kelime başına (ayrı katmanda canlanan kelimelere ebeveynin background-clip'i geçmez). */
h1 .satir:nth-child(2) .kelime{background:linear-gradient(100deg,var(--koz),var(--bakir) 45%,var(--marka-ust) 75%,var(--koz));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:belir-kelime 1.1s var(--yumusak) both,akkor 9s ease-in-out infinite alternate}
@keyframes akkor{to{background-position:100% 0}}
.kelime{display:inline-block;animation:belir-kelime 1.1s var(--yumusak) both}
@keyframes belir-kelime{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.kelime:nth-child(1){animation-delay:0.12s}.kelime:nth-child(2){animation-delay:0.19s}.kelime:nth-child(3){animation-delay:0.26s}.kelime:nth-child(4){animation-delay:0.33s}.kelime:nth-child(5){animation-delay:0.40s}.kelime:nth-child(6){animation-delay:0.47s}.kelime:nth-child(7){animation-delay:0.54s}.kelime:nth-child(8){animation-delay:0.61s}.kelime:nth-child(9){animation-delay:0.68s}.kelime:nth-child(10){animation-delay:0.75s}.kelime:nth-child(11){animation-delay:0.82s}.kelime:nth-child(12){animation-delay:0.89s}.kelime:nth-child(13){animation-delay:0.96s}.kelime:nth-child(14){animation-delay:1.03s}.satir:nth-child(2) .kelime:nth-child(1){animation-delay:0.62s}.satir:nth-child(2) .kelime:nth-child(2){animation-delay:0.70s}.satir:nth-child(2) .kelime:nth-child(3){animation-delay:0.78s}.satir:nth-child(2) .kelime:nth-child(4){animation-delay:0.86s}.satir:nth-child(2) .kelime:nth-child(5){animation-delay:0.94s}.satir:nth-child(2) .kelime:nth-child(6){animation-delay:1.02s}.satir:nth-child(2) .kelime:nth-child(7){animation-delay:1.10s}.satir:nth-child(2) .kelime:nth-child(8){animation-delay:1.18s}.satir:nth-child(2) .kelime:nth-child(9){animation-delay:1.26s}.satir:nth-child(2) .kelime:nth-child(10){animation-delay:1.34s}
.giris{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--metin2);max-width:54ch;animation:belir-kelime 1.2s .9s var(--yumusak) both}
.eylemler{display:flex;flex-wrap:wrap;gap:12px;animation:belir-kelime 1.2s 1.1s var(--yumusak) both}
.kahraman-metin .ince{animation:belir-kelime 1.2s 1.3s var(--yumusak) both}
.ust-yazi{animation:belir-kelime 1s .05s var(--yumusak) both}

/* İşaret sahnesi */
.isaret-sahne{--rx:0deg;--ry:0deg;position:relative;justify-self:center;width:min(100%,520px);aspect-ratio:1;perspective:1100px;animation:belir-isaret 2s .2s var(--yumusak) both}
@keyframes belir-isaret{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.isaret-govde{position:absolute;inset:18%;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .2s linear;animation:suzul 9s ease-in-out infinite}
@keyframes suzul{0%,100%{translate:0 0}50%{translate:0 -10px}}
.isaret-buyuk{width:100%;height:100%;display:block;filter:drop-shadow(0 0 28px rgba(191,126,87,.35)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.isaret-parilti{position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,220,195,.22) 50%,transparent 65%);background-size:250% 100%;mix-blend-mode:screen;animation:supur 7s ease-in-out infinite;pointer-events:none}
.hale{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,rgba(191,126,87,0),rgba(191,126,87,.32),rgba(117,60,29,0) 40%,rgba(226,167,129,.25) 70%,rgba(191,126,87,0));filter:blur(38px);animation:don 26s linear infinite,nefes 7s ease-in-out infinite}
@keyframes don{to{rotate:360deg}}
@keyframes nefes{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.06}}
.yorunge{position:absolute;border-radius:50%;border:1px solid rgba(226,167,129,.13)}
.y1{inset:6%;animation:don 38s linear infinite}
.y2{inset:0;border-style:dashed;border-color:rgba(226,167,129,.08);animation:don 64s linear infinite reverse}
.y3{inset:12%;border-color:rgba(226,167,129,.07);animation:don 24s linear infinite}
.parca{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--koz);box-shadow:0 0 14px 3px rgba(243,184,143,.75)}
.y2 .parca{width:5px;height:5px;top:-2.5px;margin-left:-2.5px}
.y2 .p2{top:auto;bottom:-2.5px}
.y3 .parca{width:6px;height:6px;top:auto;bottom:-3px;margin-left:-3px;background:var(--marka-ust)}

.kaydir{position:absolute;left:50%;bottom:28px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--soluk);text-decoration:none;font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.kaydir i{width:1px;height:46px;background:linear-gradient(var(--bakir),transparent);position:relative;overflow:hidden}
.kaydir i::after{content:"";position:absolute;left:0;top:-30%;width:1px;height:30%;background:var(--koz);animation:damla 2.4s var(--yumusak) infinite}
@keyframes damla{to{top:110%}}

/* ---------- Şerit ---------- */
.serit{position:relative;border-block:1px solid var(--cizgi);background:linear-gradient(180deg,var(--o1),var(--o0));overflow:hidden;padding-block:22px;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.serit-ic{display:flex;width:max-content;animation:kay 46s linear infinite}
.serit ul{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0 15px}
.serit li{font-family:'Sora',system-ui,sans-serif;font-size:clamp(1.4rem,3vw,2.4rem);font-weight:600;letter-spacing:-.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(239,232,226,.4)}
.serit li:nth-child(4n+1){color:var(--metin);-webkit-text-stroke:0}
.serit li.x{-webkit-text-stroke:0;color:var(--bakir);font-size:clamp(1rem,2vw,1.4rem)}
@keyframes kay{to{transform:translateX(-50%)}}

/* ---------- Sayılar ---------- */
.sayilar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-block:72px 24px}
.sayi{display:flex;flex-direction:column;gap:6px;padding:26px 24px;border-radius:20px;background:linear-gradient(180deg,var(--cam2),transparent);border:1px solid var(--cizgi)}
.sayi strong{font-family:'Sora',system-ui,sans-serif;font-size:clamp(2rem,4vw,3.25rem);line-height:1;font-weight:600;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,var(--bakir-acik));-webkit-background-clip:text;background-clip:text;color:transparent}
.sayi span{color:var(--metin2);font-weight:600}

/* ---------- Bölümler ---------- */
.bolum{padding-block:clamp(80px,12vw,140px);position:relative}
.bolum h2{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.035em;margin-top:16px;max-width:20ch}
.bolum-alt{color:var(--metin2);margin-top:18px;max-width:58ch;font-size:1.125rem}

/* Mesajın yolculuğu */
.yol{background:radial-gradient(70% 60% at 85% 10%,rgba(117,60,29,.18),transparent 70%)}
.hat{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:durak}
.durak{position:relative;padding:28px 22px 24px;border-radius:22px;background:linear-gradient(180deg,var(--cam2),var(--cam));border:1px solid var(--cizgi);min-width:0;display:flex;flex-direction:column;gap:10px;transition:border-color .5s,transform .5s var(--yumusak)}
.durak:hover{border-color:rgba(226,167,129,.45);transform:translateY(-4px)}
.durak-no{font-family:'Sora',system-ui,sans-serif;font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--bakir-acik)}
.durak-cekirdek{width:42px;height:42px;border-radius:14px;background:radial-gradient(circle at 35% 30%,var(--koz),var(--bakir) 45%,var(--bakir-koyu));box-shadow:0 0 28px -4px rgba(226,167,129,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.durak:nth-child(4) .durak-cekirdek{background:radial-gradient(circle at 35% 30%,#fff2e8,var(--koz) 35%,var(--bakir));animation:nefes 3.6s ease-in-out infinite}
.durak h3{font-size:1.25rem}
.durak p{color:var(--metin2);font-size:.95rem}
.durak:not(:last-child)::after{content:"";position:absolute;top:49px;right:-23px;width:24px;height:2px;background:linear-gradient(90deg,var(--bakir),rgba(191,126,87,.2))}
.akis{position:absolute;top:44px;right:-23px;width:12px;height:12px;border-radius:50%;background:var(--koz);box-shadow:0 0 16px 4px rgba(243,184,143,.8);opacity:0;animation:akis 3.3s var(--yumusak) infinite}
@keyframes akis{0%{transform:translateX(-14px);opacity:0}15%{opacity:1}60%{transform:translateX(20px);opacity:1}75%,100%{transform:translateX(26px);opacity:0}}
.durak:nth-child(1) .akis{animation-delay:0.0s}.durak:nth-child(2) .akis{animation-delay:1.1s}.durak:nth-child(3) .akis{animation-delay:2.2s}
.dallar{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.dal{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:22px;border:1px dashed var(--cizgi2);background:var(--cam);min-width:0}
.dal h3{font-size:1.0625rem}
.dal p{color:var(--soluk);font-size:.9rem}
.kopuk{opacity:.85}
.dal-cizgi{width:46px;height:2px;flex:none;background:repeating-linear-gradient(90deg,var(--soluk) 0 6px,transparent 6px 11px)}
.dal-isaret{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#F2A3A0;border:1px solid rgba(242,163,160,.45);background:rgba(242,163,160,.07)}
.duvar{border-style:solid;border-color:rgba(226,167,129,.25);background:linear-gradient(90deg,rgba(117,60,29,.16),var(--cam))}
.duvar-tugla{flex:none;width:44px;height:44px;border-radius:12px;background:
  linear-gradient(var(--o0) 0 0) 0 33%/100% 2px no-repeat,
  linear-gradient(var(--o0) 0 0) 0 66%/100% 2px no-repeat,
  linear-gradient(90deg,transparent 48%,var(--o0) 48% 52%,transparent 52%) 0 0/100% 33% no-repeat,
  linear-gradient(90deg,transparent 23%,var(--o0) 23% 27%,transparent 27% 73%,var(--o0) 73% 77%,transparent 77%) 0 50%/100% 33% no-repeat,
  linear-gradient(90deg,transparent 48%,var(--o0) 48% 52%,transparent 52%) 0 100%/100% 33% no-repeat,
  linear-gradient(160deg,var(--marka-ust),var(--marka-alt));box-shadow:0 0 24px -6px rgba(191,126,87,.6)}

/* Ürün ızgarası */
.izgara{margin-top:64px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:18px}
.kutu{--px:50%;--py:50%;position:relative;overflow:hidden;border-radius:26px;border:1px solid var(--cizgi);background:linear-gradient(180deg,var(--o2),var(--o1));padding:28px;display:flex;flex-direction:column;gap:22px;min-width:0;isolation:isolate;transition:border-color .5s,transform .6s var(--yumusak)}
.kutu::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--px) var(--py),rgba(226,167,129,.16),transparent 60%);opacity:0;transition:opacity .5s}
.kutu:hover{border-color:rgba(226,167,129,.35);transform:translateY(-4px)}
.kutu:hover::before{opacity:1}
.kutu h3{font-size:1.375rem}
.kutu-metin{display:flex;flex-direction:column;gap:10px}
.kutu-metin p{color:var(--metin2);font-size:.975rem;max-width:52ch}
.k-sohbet{grid-column:span 4;grid-row:span 2;justify-content:space-between}
.k-tasarim{grid-column:span 2;grid-row:span 2}
.k-beceri,.k-dil{grid-column:span 2}
.k-denetim{grid-column:span 2}

.demo-sohbet{display:flex;flex-direction:column;gap:14px;max-width:520px;width:100%;align-self:flex-end}
.balon{align-self:flex-end;max-width:80%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:linear-gradient(135deg,rgba(226,167,129,.24),rgba(191,126,87,.12));border:1px solid rgba(226,167,129,.3);font-weight:600;font-size:.95rem}
.yaziyor{display:flex;gap:6px;padding:10px 14px;border-radius:14px;background:var(--cam2);width:max-content}
.yaziyor i{width:7px;height:7px;border-radius:50%;background:var(--bakir-acik);animation:zipla 1.4s ease-in-out infinite}
.yaziyor i:nth-child(2){animation-delay:.18s}.yaziyor i:nth-child(3){animation-delay:.36s}
@keyframes zipla{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.artefakt{border-radius:18px;border:1px solid var(--cizgi2);background:rgba(11,9,8,.6);overflow:hidden}
.artefakt-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--cizgi)}
.dosya{font-family:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;font-size:.82rem;color:var(--metin2)}
.surumler{display:flex;gap:6px}
.surumler b{font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:999px;border:1px solid var(--cizgi2);color:var(--soluk);animation:surum 6s ease-in-out infinite}
.surumler b:nth-child(2){animation-delay:2s}.surumler b:nth-child(3){animation-delay:4s}
@keyframes surum{0%,8%,34%,100%{background:transparent;color:var(--soluk);border-color:var(--cizgi2)}12%,30%{background:var(--bakir);color:var(--uzeri);border-color:var(--bakir)}}
.fark{display:flex;flex-direction:column;padding:12px 16px;gap:4px;font-family:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;font-size:.8rem}
.eksi{color:#F2A3A0;background:rgba(242,163,160,.07);padding:2px 6px;border-radius:6px}
.arti{color:#9BD8AE;background:rgba(155,216,174,.07);padding:2px 6px;border-radius:6px;animation:yaz 6s steps(1) infinite}
.arti+.arti{animation-delay:.6s}
@keyframes yaz{0%,40%{opacity:.25}41%,100%{opacity:1}}

.demo-tuval{flex:1;display:grid;place-items:center;min-height:220px}
.telefon{width:150px;height:250px;border-radius:26px;padding:14px 12px;display:flex;flex-direction:column;gap:9px;border:1px solid var(--cizgi2);box-shadow:0 30px 60px -30px #000,inset 0 0 0 6px rgba(255,255,255,.02);animation:palet 12s ease-in-out infinite}
.telefon i{display:block;border-radius:8px;animation:palet-oge 12s ease-in-out infinite}
.t-ust{height:12px;width:50%}.t-kahraman{height:80px}.t-satir{height:9px}.kisa{width:62%}.t-dugme{height:26px;width:60%;margin-top:auto;border-radius:999px!important}
@keyframes palet{0%,100%{background:#1d1511}33%{background:#0f1a1c}66%{background:#f3ece4}}
@keyframes palet-oge{0%,100%{background:linear-gradient(135deg,#E2A781,#AE663D)}33%{background:linear-gradient(135deg,#7FC4C0,#2E7D7A)}66%{background:linear-gradient(135deg,#C46A4A,#6B2D1C)}}
.telefon .t-satir,.telefon .t-ust{opacity:.55}

.demo-beceri{display:flex;flex-direction:column;gap:14px}
.skill{align-self:flex-start;font-family:ui-monospace,'Cascadia Code',Menlo,Consolas,monospace;font-size:.85rem;padding:8px 12px;border-radius:10px;background:var(--cam2);border:1px solid var(--cizgi2)}
.demo-beceri ol{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.demo-beceri li{font-size:.8rem;font-weight:800;padding:6px 12px;border-radius:999px;border:1px solid var(--cizgi2);color:var(--soluk);animation:adim 6s ease-in-out infinite}
.demo-beceri li:nth-child(2){animation-delay:2s}.demo-beceri li:nth-child(3){animation-delay:4s}
@keyframes adim{0%,6%,30%,100%{color:var(--soluk);border-color:var(--cizgi2);background:transparent}10%,26%{color:var(--uzeri);border-color:var(--koz);background:var(--koz)}}

.demo-dil{height:3.2rem;overflow:hidden;mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.selamlar{display:flex;flex-direction:column;animation:selam 20s var(--yumusak) infinite}
.selamlar span{display:block;height:3.2rem;line-height:3.2rem;font-family:'Sora',system-ui,sans-serif;font-size:2rem;font-weight:600;letter-spacing:-.03em;background:linear-gradient(90deg,var(--koz),var(--metin));-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes selam{0.00%,7.80%{transform:translateY(0.0rem)}10.00%,17.80%{transform:translateY(-3.2rem)}20.00%,27.80%{transform:translateY(-6.4rem)}30.00%,37.80%{transform:translateY(-9.6rem)}40.00%,47.80%{transform:translateY(-12.8rem)}50.00%,57.80%{transform:translateY(-16.0rem)}60.00%,67.80%{transform:translateY(-19.2rem)}70.00%,77.80%{transform:translateY(-22.4rem)}80.00%,87.80%{transform:translateY(-25.6rem)}90.00%,97.80%{transform:translateY(-28.8rem)}100%{transform:translateY(-32.0rem)}}

.demo-denetim{display:flex;gap:12px}
.anahtar{width:46px;height:26px;border-radius:999px;background:var(--cam2);border:1px solid var(--cizgi2);position:relative}
.anahtar i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--soluk);transition:left .4s}
.anahtar.acik{background:rgba(191,126,87,.35);border-color:var(--bakir)}
.anahtar.acik i{left:23px;background:var(--koz)}

/* Güven kuralları */
.guven{background:linear-gradient(180deg,var(--o0),var(--o1) 40%,var(--o0))}
.kurallar{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kural{position:relative;padding:30px 26px 26px;border-radius:24px;border:1px solid var(--cizgi);background:linear-gradient(180deg,var(--cam2),transparent 70%);display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden;transition:border-color .5s,transform .5s var(--yumusak)}
.kural::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--bakir),transparent);opacity:.5;transition:opacity .5s}
.kural:hover{border-color:rgba(226,167,129,.35);transform:translateY(-4px)}
.kural:hover::before{opacity:1}
.kural-no{font-family:'Sora',system-ui,sans-serif;font-size:3.4rem;line-height:1;font-weight:700;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(226,167,129,.45)}
.kural h3{font-size:1.1875rem}
.kural p{color:var(--metin2);font-size:.95rem}

/* İndir */
.indir-ic{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.indir-kart{position:relative;border-radius:30px;padding:2px;isolation:isolate;overflow:hidden}
.kenar-isik{position:absolute;inset:-50%;z-index:-2;background:conic-gradient(from 0deg,transparent 0 62%,rgba(243,184,143,.9) 74%,transparent 86%);animation:don 7s linear infinite}
.indir-kart::after{content:"";position:absolute;inset:2px;border-radius:28px;background:linear-gradient(180deg,var(--o3),var(--o1));z-index:-1}
.cihaz{margin:34px auto 0;width:min(78%,340px)}
.ekran{aspect-ratio:16/10;border-radius:14px 14px 4px 4px;border:1px solid var(--cizgi2);background:radial-gradient(60% 70% at 50% 50%,rgba(191,126,87,.25),#0b0908 70%);display:grid;place-items:center;box-shadow:0 0 50px -10px rgba(191,126,87,.45)}
.isaret-ekran{width:34%;filter:drop-shadow(0 0 18px rgba(243,184,143,.55));animation:nefes 5s ease-in-out infinite}
.taban{height:12px;margin:0 -8%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#2b221c,#120d0b);border:1px solid var(--cizgi)}
.indir-govde{padding:28px 32px 32px;display:flex;flex-direction:column;gap:14px}
.indir-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.platform{font-family:'Sora',system-ui,sans-serif;font-weight:600;font-size:1.1875rem}
.cip{background:rgba(191,126,87,.14);color:var(--koz);border:1px solid rgba(226,167,129,.35);border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:800;letter-spacing:.04em}
.indir-govde p{color:var(--metin2)}
.indir-bilgi{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.indir-bilgi div{min-width:0}.indir-bilgi .genis{grid-column:1/-1}
.indir-bilgi dt{color:var(--soluk);font-size:.8125rem;font-weight:700}
.indir-bilgi dd{margin:2px 0 0;font-weight:700}
.indir-bilgi code{font-size:.8125rem;overflow-wrap:anywhere}
.uyari{color:var(--uyari)!important}

/* Kapanış */
.kapanis{position:relative;overflow:hidden;padding-block:clamp(120px,16vw,200px) clamp(90px,12vw,150px);text-align:center;isolation:isolate}
.dev-yazi{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:-1;font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:clamp(5rem,22vw,20rem);letter-spacing:-.06em;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(226,167,129,.18);background:linear-gradient(100deg,transparent 30%,rgba(243,184,143,.35) 50%,transparent 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:supur 8s ease-in-out infinite}
.kapanis-ic{display:flex;flex-direction:column;align-items:center;gap:30px}
.kapanis h2{font-size:clamp(2.2rem,5.4vw,4.4rem);letter-spacing:-.04em;line-height:1.04}

/* Sosyal */
.sosyal{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0}
.sosyal a{display:inline-flex;padding:10px 18px;border:1px solid var(--cizgi2);border-radius:999px;text-decoration:none;font-weight:700}

/* Alt bilgi */
.alt{border-top:1px solid var(--cizgi);padding-block:34px calc(34px + env(safe-area-inset-bottom,0px))}
.alt-ic{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.alt-marka{display:flex;align-items:center;gap:10px;font-weight:700}
.alt .ince{flex:1;min-width:220px}
.alt-bag{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.alt-bag a{color:var(--metin2);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Kaydırınca belirme (yalnız JS varken; ekranda olanlar hiç gizlenmez) */
.js [data-belir].bekle{opacity:0;transform:translateY(28px);filter:blur(6px)}
.js [data-belir].belirdi{transition:opacity 1s var(--yumusak),transform 1s var(--yumusak),filter 1s var(--yumusak)}
.kural:nth-child(1).belirdi,.durak:nth-child(1).belirdi,.kutu:nth-child(1).belirdi,.sayi:nth-child(1).belirdi{transition-delay:0.00s}.kural:nth-child(2).belirdi,.durak:nth-child(2).belirdi,.kutu:nth-child(2).belirdi,.sayi:nth-child(2).belirdi{transition-delay:0.08s}.kural:nth-child(3).belirdi,.durak:nth-child(3).belirdi,.kutu:nth-child(3).belirdi,.sayi:nth-child(3).belirdi{transition-delay:0.16s}.kural:nth-child(4).belirdi,.durak:nth-child(4).belirdi,.kutu:nth-child(4).belirdi,.sayi:nth-child(4).belirdi{transition-delay:0.24s}.kural:nth-child(5).belirdi,.durak:nth-child(5).belirdi,.kutu:nth-child(5).belirdi,.sayi:nth-child(5).belirdi{transition-delay:0.32s}.kural:nth-child(6).belirdi,.durak:nth-child(6).belirdi,.kutu:nth-child(6).belirdi,.sayi:nth-child(6).belirdi{transition-delay:0.40s}

/* ---------- Dar ekran ---------- */
@media (max-width: 1024px){
  .hat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .durak:nth-child(2)::after,.durak:nth-child(2) .akis{display:none}
  .izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
  .k-sohbet{grid-column:span 2;grid-row:auto}
  .k-tasarim{grid-column:span 1;grid-row:span 2}
  .k-beceri,.k-dil,.k-denetim{grid-column:span 1}
  .kurallar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .indir-ic{grid-template-columns:1fr;gap:28px}
}
@media (max-width: 760px){
  .ust nav{display:none}
  .ust-ic{justify-content:space-between}
  .kahraman-ic{grid-template-columns:1fr;padding-block:104px 96px;gap:8px}
  .isaret-sahne{order:-1;width:min(70%,280px)}
  .sayilar{grid-template-columns:1fr;padding-block:48px 8px}
  .hat{grid-template-columns:1fr}
  .durak::after,.durak .akis{display:none!important}
  .dallar{grid-template-columns:1fr}
  .izgara{grid-template-columns:1fr}
  .k-sohbet,.k-tasarim,.k-beceri,.k-dil,.k-denetim{grid-column:auto;grid-row:auto}
  .kurallar{grid-template-columns:1fr}
  .kaydir{display:none}
}

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  #magma{opacity:1}
}