/* uleso.com — tasarım kuralları: site-kaynak/DESIGN.md */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/font/inter-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/font/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/font/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --gece: #062520; --gece-2: #0A3029; --orman: #0B3B30; --yesil-koyu: #0F6E56; --yesil: #1D9E75; --nane: #5DCAA5; --nane-acik: #E1F5EE;
  --kagit: #FAF9F6; --kart: #FFFFFF; --murekkep: #10201C; --gri: #5B6B66; --gri-acik: #5F6E69; --cizgi: #E4E8E5; --sicak: #F2B76B;
  --wa: #25D366;
  --yazi: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --r-k: 10px; --r-o: 18px; --r-b: 28px;
  --golge: 0 1px 2px rgba(6, 37, 32, .06), 0 8px 24px -8px rgba(6, 37, 32, .14);
  --golge-b: 0 2px 6px rgba(6, 37, 32, .08), 0 30px 60px -20px rgba(6, 37, 32, .35);
  --ust-yuk: 68px;
}
[lang="ar"] { --yazi: system-ui, 'Segoe UI', 'Noto Sans Arabic', Tahoma, 'Geeza Pro', sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-yuk) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--yazi); font-size: 1.0625rem; line-height: 1.65; color: var(--murekkep); background: var(--kagit);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; color: var(--orman); text-wrap: balance; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--nane); outline-offset: 3px; border-radius: 6px; }
.gizli { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ikon { width: 1.15em; height: 1.15em; flex: none; }
[dir="rtl"] .ikon.yon, [dir="rtl"] .ks-tutamak .ikon { transform: scaleX(-1); }

.kap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.kap.dar { max-width: 820px; }
.atla { position: fixed; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--kart); color: var(--orman); padding: 10px 16px; border-radius: var(--r-k); font-weight: 700; }
.atla:focus { top: 12px; }

/* ---------- Düğmeler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 46px; padding: 0 20px; border-radius: var(--r-k);
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.dugme:hover { transform: translateY(-1px); }
.dugme:active { transform: translateY(0); }
.dugme.ana { color: #fff; background: linear-gradient(180deg, #22B083, var(--yesil-koyu)); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px -8px rgba(29, 158, 117, .7); }
.dugme.ana:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 28px -10px rgba(29, 158, 117, .85); }
.dugme.ikincil { color: var(--orman); background: var(--kart); border-color: var(--cizgi); }
.dugme.ikincil:hover { border-color: var(--yesil); }
.dugme.cam { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); }
.dugme.cam:hover { background: rgba(255, 255, 255, .14); }
.dugme.wa { color: #fff; background: #117A3D; margin-top: 28px; }
.dugme.wa:hover { background: #0E6833; }
.dugme.kucuk { min-height: 40px; padding: 0 16px; font-size: .95rem; }
.dugme.buyuk { min-height: 54px; padding: 0 26px; font-size: 1.0625rem; }
.dugme.genis { width: 100%; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.dugmeler.orta { justify-content: center; }

/* ---------- Üst bant ---------- */
.ust { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--ust-yuk); color: #fff; transition: background-color .3s ease, box-shadow .3s ease, color .3s ease; }
.ust.dolu { background: rgba(250, 249, 246, .86); backdrop-filter: saturate(1.6) blur(14px); color: var(--orman); box-shadow: 0 1px 0 var(--cizgi); }
.ust-ic { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: block; flex: none; }
.logo img { width: 104px; height: auto; }
.logo-acik, .ust.dolu .logo-koyu { display: none; }
.ust.dolu .logo-acik { display: block; }
.ana-menu { display: flex; gap: 4px; margin-inline-start: 12px; }
.ana-menu a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 12px; border-radius: 8px; opacity: .88; }
.ana-menu a:hover { opacity: 1; background: rgba(127, 127, 127, .12); }
.ana-menu .menu-giris { display: none; }
.ust-sag { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.baglanti-giris { font-weight: 600; font-size: .95rem; text-decoration: none; padding: 8px 10px; }
.baglanti-giris:hover { text-decoration: underline; }
.menu-dugme { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 10px; }
.menu-dugme .ikon { width: 24px; height: 24px; }
.dil-menu { position: relative; }
.dil-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: .85rem; }
.dil-menu summary::-webkit-details-marker { display: none; }
.dil-menu summary:hover { background: rgba(127, 127, 127, .12); }
.dil-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); background: var(--kart); color: var(--orman); border-radius: 12px; box-shadow: var(--golge-b); padding: 6px; min-width: 170px; }
.dil-menu a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; font-weight: 500; }
.dil-menu a:hover, .dil-menu a[aria-current] { background: var(--nane-acik); }

/* ---------- Giriş ekranı ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: var(--gece); padding: calc(var(--ust-yuk) + 44px) 0 48px; isolation: isolate; }
.hero-isik { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 75% 30%, rgba(93, 202, 165, .28), transparent 70%),
              radial-gradient(40% 40% at 10% 90%, rgba(29, 158, 117, .25), transparent 70%),
              radial-gradient(30% 30% at 95% 95%, rgba(120, 160, 255, .12), transparent 70%); }
.hero-isik::after { content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(70% 60% at 60% 40%, #000, transparent); }
.hero-ic { display: grid; gap: 48px; align-items: center; }
.rozet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: .875rem; font-weight: 600;
  background: rgba(93, 202, 165, .12); border: 1px solid rgba(93, 202, 165, .35); color: var(--nane); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 3.7vw, 3.55rem); font-weight: 800; margin: 22px 0 20px; letter-spacing: -0.03em; }
.hero h1 span { display: block; }
.vurgu { background: linear-gradient(92deg, #9BF0D2, var(--nane) 45%, #3FBF95); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-alt { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: rgba(255, 255, 255, .78); max-width: 36em; margin-bottom: 30px; }
.hero-not { margin-top: 16px; font-size: .9rem; color: rgba(255, 255, 255, .6); }

.sahne { margin: 0; position: relative; }
.sahne::before { content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(93, 202, 165, .35), transparent); filter: blur(20px); }
.sahne-cerceve { border-radius: var(--r-b); padding: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
.sahne-ust { display: flex; align-items: center; gap: 6px; padding: 4px 8px 10px; font-size: .78rem; color: rgba(255, 255, 255, .7); }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.sahne-etiket { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 10px; font-weight: 700; color: #fff; }
.canli { width: 8px; height: 8px; border-radius: 50%; background: #3DFFB0; box-shadow: 0 0 0 0 rgba(61, 255, 176, .6); animation: canli 1.8s infinite; }
@keyframes canli { 70% { box-shadow: 0 0 0 8px rgba(61, 255, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 255, 176, 0); } }
.sahne-ornek { margin-inline-start: auto; font-size: .62rem; opacity: .45; }
.sahne-tuval { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #F3F0E8; }
.katman { position: absolute; inset: 0; }
.katman img { width: 100%; height: 100%; object-fit: cover; }
.k-kroki { background: #fff; opacity: 0; transition: opacity .8s ease; }
.k-kroki img { clip-path: inset(0 100% 0 0); }
[dir="rtl"] .k-kroki img { clip-path: inset(0 0 0 100%); }
.sahne[data-asama="0"] .k-kroki.aktif { opacity: 1; }
.sahne[data-asama="0"] .k-kroki.aktif img { clip-path: inset(0 0 0 0); transition: clip-path 2.2s cubic-bezier(.45, 0, .2, 1) .2s; }
.k-3d, .k-render { opacity: 0; transition: opacity .9s ease, transform 6s ease; transform: scale(1.06); }
.k-render { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s cubic-bezier(.65, 0, .35, 1), opacity .9s ease, transform 6s ease; }
[dir="rtl"] .k-render { clip-path: inset(0 0 0 100%); }
.tarama { position: absolute; top: 0; bottom: 0; width: 120px; inset-inline-start: -120px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(93, 202, 165, .0) 30%, rgba(160, 255, 220, .55) 85%, #fff 100%); mix-blend-mode: screen; }
[dir="rtl"] .tarama { transform: scaleX(-1); }
.teklif-kart { position: absolute; inset-inline-end: 14px; bottom: 14px; width: min(220px, 52%); padding: 12px; border-radius: 14px; color: var(--murekkep);
  background: rgba(255, 255, 255, .94); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .45); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .6s ease .9s, transform .6s cubic-bezier(.2, .9, .3, 1.2) .9s; font-size: .8rem; }
.tk-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.tk-ust span { color: var(--gri); }
.tk-cizgi { height: 6px; border-radius: 3px; background: var(--cizgi); margin: 6px 0; }
.tk-cizgi.kisa { width: 60%; }
.tk-toplam { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--cizgi); margin-top: 10px; padding-top: 8px; }
.tk-toplam strong { font-size: 1.15rem; color: var(--orman); }
.tk-wa { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 8px; border-radius: 8px; background: #E7F9EE; color: #128C4A; font-weight: 700; font-size: .75rem; }
.tk-wa .ikon:last-child { margin-inline-start: auto; }

/* Aşamalar: 0 kroki · 1 3D · 2 uleso Render · 3 teklif */
.sahne:not([data-asama="0"]) .k-3d.aktif { opacity: 1; transform: scale(1); }
.sahne[data-asama="2"] .k-render.aktif, .sahne[data-asama="3"] .k-render.aktif { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
.sahne[data-asama="2"] .tarama { animation: tarama 2.2s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes tarama { 0% { inset-inline-start: -120px; opacity: 1; } 90% { opacity: 1; } 100% { inset-inline-start: 100%; opacity: 0; } }
.sahne[data-asama="3"] .teklif-kart { opacity: 1; transform: none; }

.sahne-alt { padding: 12px 6px 4px; }
.durum { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #fff; min-height: 1.6em; }
.durum-ikon { color: var(--nane); display: inline-flex; animation: parla 1.6s ease-in-out infinite; }
@keyframes parla { 50% { opacity: .35; transform: scale(.85) rotate(20deg); } }
.adimlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .5); }
.adimlar li { display: flex; align-items: center; gap: 6px; transition: color .4s ease; line-height: 1.25; white-space: nowrap; }
.adimlar em { font-style: normal; color: var(--nane); font-weight: 700; white-space: nowrap; }
.adim-no { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: .68rem; transition: all .4s ease; }
.adimlar li.simdi { color: #fff; }
.adimlar li.simdi .adim-no { border-color: var(--nane); background: var(--nane); color: var(--gece); }
.adimlar li.tamam { color: rgba(255, 255, 255, .82); }
.adimlar li.tamam .adim-no { border-color: var(--yesil); background: var(--yesil); color: #fff; }
.ilerleme { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); margin-top: 10px; overflow: hidden; }
.ilerleme span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yesil), var(--nane)); border-radius: inherit; }

.hero-farklar { display: grid; gap: 12px; margin-top: 48px; }
.hero-farklar a { display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 16px 18px; border-radius: 16px; text-decoration: none;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.hero-farklar a:hover { background: rgba(255, 255, 255, .1); border-color: rgba(93, 202, 165, .5); transform: translateY(-2px); }
.hf-ikon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(93, 202, 165, .16); color: var(--nane); }
.hf-ikon .ikon { width: 22px; height: 22px; }
.hf-yazi strong { display: block; color: #fff; font-size: 1rem; line-height: 1.3; }
.hf-yazi em { font-style: normal; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--sicak); color: #3D2600; vertical-align: 2px; margin-inline-start: 4px; }
.hf-yazi small { display: block; margin-top: 4px; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .66); }
.temsili { position: absolute; bottom: 8px; inset-inline-end: 12px; z-index: 2; font-size: .6rem; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); pointer-events: none; }
.guven { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .92rem; color: rgba(255, 255, 255, .75); }
.guven li { display: flex; align-items: center; gap: 8px; }
.guven .ikon { color: var(--nane); }

/* ---------- Bölümler ---------- */
.bolum { padding: clamp(72px, 10vw, 120px) 0; position: relative; }
.bolum.gri { background: #F1F3EF; }
.bolum.acik-yesil { background: linear-gradient(180deg, var(--nane-acik), #F4FBF8); }
.bolum.koyu { background: var(--gece); color: #fff; overflow: hidden; }
.bolum.koyu h2 { color: #fff; }
.bolum.koyu .bolum-alt { color: rgba(255, 255, 255, .72); }
.bolum.koyu .ust-yazi { color: var(--nane); }
.bolum-bas { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.bolum-bas.orta { margin-inline: auto; text-align: center; }
.ust-yazi { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yesil-koyu); margin-bottom: 14px; }
[lang="ar"] .ust-yazi { letter-spacing: 0; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; }
.bolum-alt { font-size: 1.125rem; color: var(--gri); margin-top: 18px; }
h3 { font-size: 1.25rem; font-weight: 700; }
.kucuk-not { font-size: .85rem; color: var(--gri-acik); margin-top: 18px; }
.kucuk-not.orta, .bolum-bas.orta + .kucuk-not { text-align: center; }
.tik-liste { display: grid; gap: 12px; margin-top: 26px; }
.tik-liste li { display: flex; gap: 12px; align-items: flex-start; }
.tik-liste .ikon { color: var(--yesil); margin-top: .25em; }
.bolum.koyu .tik-liste .ikon { color: var(--nane); }
.iki-sutun { display: grid; gap: 48px; align-items: center; }

/* Farklar mozaiği */
.fark-izgara { display: grid; gap: 16px; }
.fark-kart { position: relative; overflow: hidden; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 28px; box-shadow: var(--golge);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.fark-kart:hover { transform: translateY(-3px); box-shadow: var(--golge-b); border-color: rgba(29, 158, 117, .35); }
.fark-kart h3 { margin: 18px 0 10px; }
.fark-kart p { color: var(--gri); }
.fark-ikon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--yesil-koyu); background: var(--nane-acik); }
.fark-ikon .ikon { width: 24px; height: 24px; }
.rozet-yeni { position: absolute; top: 24px; inset-inline-end: 24px; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #FFF3E0; color: #9A5B00; border: 1px solid #F7D9AE; }
.fark-1 { background: linear-gradient(150deg, var(--orman), var(--gece)); color: #fff; border-color: transparent; }
.fark-1 h3 { color: #fff; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.fark-1 p { color: rgba(255, 255, 255, .75); max-width: 30em; }
.fark-1 .fark-ikon { background: rgba(93, 202, 165, .16); color: var(--nane); }
.mini-render { position: relative; margin-top: 22px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.mini-render img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-render .mr-ust { animation: perde 6s ease-in-out infinite; }
@keyframes perde { 0%, 20% { clip-path: inset(0 100% 0 0); } 50%, 85% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }

/* Toplu yükleme canlı gösterimi */
.toplu-demo { position: relative; border-radius: var(--r-b); padding: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); }
.td-bas { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .85rem; font-weight: 600; margin-bottom: 14px; }
.td-etiket, .td-yz { display: inline-flex; align-items: center; gap: 8px; }
.td-yz { color: var(--nane); padding: 4px 10px; border-radius: 999px; background: rgba(93, 202, 165, .12); border: 1px solid rgba(93, 202, 165, .3); }
.toplu-demo.ayiriyor .td-yz .ikon { animation: parla 1.2s ease-in-out infinite; }
.td-alan { position: relative; height: 380px; }
.td-sutun { position: absolute; top: 0; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .55); opacity: 0; transition: opacity .5s ease; white-space: nowrap; }
.td-sutun b { color: var(--nane); }
.toplu-demo.ayrildi .td-sutun { opacity: 1; }
.td-dosya { position: absolute; top: 0; left: 0; width: var(--g, 86px); border-radius: 10px; overflow: hidden; background: #fff; color: var(--murekkep); font-size: .62rem; line-height: 1.2;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), box-shadow .4s ease; will-change: transform; }
.td-dosya i { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.td-dosya i.urun-ikon { display: grid; place-items: center; background: #EEF2F0; color: var(--yesil-koyu); }
.td-dosya i.urun-ikon svg { width: 40%; height: auto; }
.td-dosya span { display: block; padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-dosya.emin { box-shadow: 0 0 0 2px var(--sicak), 0 8px 18px -8px rgba(0, 0, 0, .6); }
.td-dosya.tarandi { box-shadow: 0 0 0 2px var(--nane), 0 8px 18px -8px rgba(0, 0, 0, .6); }

/* Önce / sonra kaydırıcısı */
.karsilastir { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-b); overflow: hidden; box-shadow: var(--golge-b); background: #ddd; user-select: none; touch-action: pan-y; }
.ks-banyo { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.ks-banyo.secili { opacity: 1; }
.ks-banyo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ks-ust { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--konum)); }
[dir="rtl"] .ks-ust { clip-path: inset(0 var(--konum) 0 0); }
.ks-cizgi { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--konum); width: 2px; margin-inline-start: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .35); pointer-events: none; }
.ks-tutamak { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; color: var(--orman); display: grid; place-items: center; box-shadow: var(--golge-b); }
.ks-tutamak::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); }
.ks-kaydirici { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.ks-kaydirici:focus-visible ~ .ks-cizgi .ks-tutamak, .karsilastir:has(.ks-kaydirici:focus-visible) .ks-tutamak { outline: 3px solid var(--nane); outline-offset: 3px; }
.ks-etiket { position: absolute; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; backdrop-filter: blur(8px); pointer-events: none; }
.ks-etiket.sol { inset-inline-start: 16px; background: rgba(0, 0, 0, .45); color: #fff; }
.ks-etiket.sag { inset-inline-end: 16px; background: rgba(255, 255, 255, .9); color: var(--yesil-koyu); }
.ks-secim { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.ks-secim button { border: 2px solid transparent; padding: 0; background: none; border-radius: 12px; overflow: hidden; cursor: pointer; position: relative; width: 104px; opacity: .65; transition: opacity .2s ease, border-color .2s ease; font: inherit; }
.ks-secim button img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ks-secim button span { position: absolute; inset: auto 0 0; padding: 2px 6px; font-size: .7rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); }
.ks-secim button[aria-pressed="true"], .ks-secim button:hover { opacity: 1; border-color: var(--yesil); }

/* Teklif gösterimi */
.teklif-demo { position: relative; padding-bottom: 40px; }
.belge { position: relative; background: #fff; border-radius: 16px; padding: 22px; box-shadow: var(--golge-b); width: min(100%, 400px); font-size: .85rem; }
.belge-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.belge-bas div { text-align: end; }
.belge-bas strong { display: block; color: var(--orman); font-size: 1rem; }
.belge-bas span { color: var(--gri); font-size: .8rem; }
.belge-resim { border-radius: 10px; aspect-ratio: 16 / 8; object-fit: cover; width: 100%; margin-bottom: 12px; }
.belge table { width: 100%; border-collapse: collapse; }
.belge td { padding: 7px 0; border-bottom: 1px solid var(--cizgi); }
.belge td:last-child { text-align: end; color: var(--gri); white-space: nowrap; }
.belge-toplam { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.belge-toplam strong { font-size: 1.4rem; color: var(--orman); }
.belge-ornek { position: absolute; bottom: 6px; inset-inline-end: 10px; font-size: .58rem; color: var(--gri-acik); }
.telefon { position: absolute; inset-inline-end: 0; top: 70px; width: 200px; padding: 9px; border-radius: 30px; background: #111; box-shadow: var(--golge-b); }
.tel-ekran { border-radius: 22px; overflow: hidden; background: #EFE7DD; min-height: 300px; }
.tel-bas { display: flex; align-items: center; gap: 8px; padding: 12px; background: #075E54; color: #fff; font-weight: 700; font-size: .85rem; }
.balon { margin: 14px 10px; padding: 8px; border-radius: 10px; border-start-start-radius: 2px; background: #fff; font-size: .74rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.balon-link { margin-top: 6px; border-radius: 8px; overflow: hidden; background: #F0F2F1; }
.balon-link img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.balon-link span { display: block; padding: 4px 6px; color: #01658F; font-weight: 600; }
.balon time { display: block; text-align: end; color: #5C6B67; font-size: .65rem; margin-top: 4px; }

/* Nasıl çalışır */
.nasil-liste { display: grid; gap: 16px; counter-reset: n; }
.nasil-liste li { position: relative; padding: 28px; border-radius: var(--r-o); background: var(--kart); border: 1px solid var(--cizgi); }
.nasil-liste h3 { margin: 18px 0 8px; }
.nasil-liste p { color: var(--gri); }
.nasil-no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-weight: 800; font-size: 1.15rem; color: #fff; background: linear-gradient(160deg, var(--yesil), var(--yesil-koyu)); }
.video { margin-top: 40px; border-radius: var(--r-b); overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.video-oynat { position: relative; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; background: none; }
.video-oynat img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-oynat span { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--orman); font-size: 1.6rem; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* Karşılaştırma tablosu */
.tablo-kap { position: relative; overflow-x: auto; border-radius: var(--r-o); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.kars { width: 100%; border-collapse: collapse; min-width: 620px; }
.kars th, .kars td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--cizgi); }
.kars thead th { font-size: .85rem; color: var(--gri); font-weight: 600; vertical-align: bottom; }
.kars tbody th { text-align: start; font-weight: 600; color: var(--orman); }
.kars tr:last-child > * { border-bottom: 0; }
.kars .biz { background: var(--nane-acik); }
.kars thead .biz img { margin: 0 auto; }
.isaret { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.isaret .ikon { width: 16px; height: 16px; }
.isaret.evet { background: var(--yesil); color: #fff; }
.isaret.kismen { background: #EDEFEC; color: var(--gri); }
.isaret.hayir { background: #FBECEA; color: #B4473B; }

/* Gelişim */
.sirada { display: flex; gap: 10px; align-items: center; margin-top: 22px; padding: 12px 16px; border-radius: 12px; background: #FFF6E8; color: #7A4A00; font-weight: 600; font-size: .95rem; }
.zaman { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r-o); padding: 28px; box-shadow: var(--golge); }
.zaman h3 { margin-bottom: 18px; }
.zaman ol { position: relative; display: grid; gap: 22px; padding-inline-start: 22px; }
.zaman ol::before { content: ''; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 5px; width: 2px; background: var(--cizgi); }
.zaman li { position: relative; }
.zaman li::before { content: ''; position: absolute; inset-inline-start: -22px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 0 4px var(--nane-acik); }
.zaman time { font-size: .8rem; color: var(--gri-acik); font-weight: 600; }
.zaman strong { display: block; color: var(--orman); margin: 2px 0 4px; }
.zaman p { color: var(--gri); font-size: .95rem; }

/* Kimler için */
.kim-izgara { display: grid; gap: 20px; }
.kim-kart { border-radius: var(--r-o); overflow: hidden; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.kim-kart img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.kim-kart > div { padding: 26px 28px 30px; }
.kim-kart .tik-liste { margin-top: 16px; }

/* Fiyatlar */
.donem-sec { display: flex; width: fit-content; margin: 0 auto 34px; padding: 4px; border-radius: 12px; background: #EBEEEA; }
.donem-sec button { border: 0; background: none; font: inherit; font-weight: 700; font-size: .95rem; padding: 10px 18px; min-height: 44px; border-radius: 9px; cursor: pointer; color: var(--gri); }
.donem-sec button[aria-pressed="true"] { background: var(--kart); color: var(--orman); box-shadow: var(--golge); }
.fiyat-izgara { display: grid; gap: 18px; align-items: stretch; }
.fiyat-kart { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-o); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.fiyat-kart.populer { border: 2px solid var(--yesil); box-shadow: var(--golge-b); }
.populer-rozet { position: absolute; top: -13px; inset-inline-start: 28px; padding: 4px 12px; border-radius: 999px; background: var(--yesil-koyu); color: #fff; font-size: .78rem; font-weight: 700; }
.fiyat { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 20px; }
.tutar { font-size: 2.8rem; font-weight: 800; color: var(--orman); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.donem { color: var(--gri); }
.fiyat-kart ul { display: grid; gap: 10px; margin-bottom: 28px; flex: 1; font-size: .97rem; }
.fiyat-kart li { display: flex; gap: 10px; align-items: flex-start; }
.fiyat-kart li .ikon { color: var(--yesil); margin-top: .25em; }

/* Sorular */
.sss-liste { display: grid; gap: 10px; }
.sss-liste details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; }
.sss-liste summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 700; color: var(--orman); min-height: 44px; }
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary .ikon { color: var(--yesil); transition: transform .25s ease; }
.sss-liste details[open] summary .ikon { transform: rotate(45deg); }
.sss-liste details p { padding: 0 22px 20px; color: var(--gri); }

/* Son çağrı */
.son { position: relative; overflow: hidden; isolation: isolate; background: var(--gece); color: #fff; text-align: center; padding: clamp(80px, 11vw, 130px) 0; }
.son h2 { color: #fff; max-width: 16em; margin: 0 auto; font-size: clamp(2rem, 4.4vw, 3.3rem); }
.son p { color: rgba(255, 255, 255, .75); margin: 18px 0 32px; font-size: 1.15rem; }

/* Alt bilgi */
.alt { background: #041B17; color: rgba(255, 255, 255, .72); padding: 64px 0 28px; font-size: .95rem; }
.alt-izgara { display: grid; gap: 36px; }
.alt-marka img { width: 110px; margin-bottom: 14px; }
.alt-marka p { max-width: 24em; }
.alt h3 { color: #fff; font-size: .9rem; margin-bottom: 12px; }
.alt nav { display: grid; gap: 0; align-content: start; }
.alt nav a { padding-block: 9px; }
.alt a { text-decoration: none; }
.alt a:hover { color: #fff; text-decoration: underline; }
.sosyal { display: flex; gap: 10px; margin-top: 18px; }
.sosyal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.sosyal a:hover { background: rgba(255, 255, 255, .16); }
.telif { margin-top: 24px; font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* WhatsApp sabit düğme */
.wa-sabit { position: fixed; z-index: 60; inset-inline-end: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #117A3D; color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6), 0 2px 6px rgba(0, 0, 0, .15);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: transform .3s ease, box-shadow .2s ease, opacity .3s ease, visibility .3s; }
.wa-sabit.gorunur { opacity: 1; visibility: visible; transform: none; }
.wa-sabit:hover { transform: translateY(-2px) scale(1.02); }
.wa-sabit .ikon { width: 28px; height: 28px; }

/* Kök (dil seçimi) sayfası */
.kok { background: var(--gece); min-height: 100vh; display: grid; place-items: center; color: #fff; }
.kok-sec { text-align: center; padding: 40px 20px; }
.kok-sec img { margin: 0 auto 30px; }
.dil-listesi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 560px; }
.dil-listesi a { display: block; padding: 10px 16px; border-radius: 10px; background: rgba(255, 255, 255, .08); text-decoration: none; }

/* Görünürken beliren öğeler (yalnızca JavaScript açıksa) */
.js [data-gor] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js [data-gor].gorundu { opacity: 1; transform: none; }
.fark-izgara [data-gor]:nth-child(2), .nasil-liste [data-gor]:nth-child(2) { transition-delay: .08s; }
.fark-izgara [data-gor]:nth-child(3), .nasil-liste [data-gor]:nth-child(3) { transition-delay: .16s; }
.fark-izgara [data-gor]:nth-child(4), .nasil-liste [data-gor]:nth-child(4) { transition-delay: .24s; }
.fark-izgara [data-gor]:nth-child(5) { transition-delay: .32s; } .fark-izgara [data-gor]:nth-child(6) { transition-delay: .4s; }

/* ---------- Ekran genişliğine göre ---------- */
@media (max-width: 999px) {
  .ana-menu { display: none; position: absolute; top: var(--ust-yuk); inset-inline: 12px; flex-direction: column; gap: 2px; margin: 0; padding: 10px;
    background: var(--kart); color: var(--orman); border-radius: 16px; box-shadow: var(--golge-b); }
  .ana-menu.acik { display: flex; }
  .ana-menu a { padding: 12px 14px; font-size: 1rem; }
  .ana-menu .menu-giris { display: block; border-top: 1px solid var(--cizgi); margin-top: 4px; }
  .menu-dugme { display: inline-flex; }
  .baglanti-giris { display: none; }
}
@media (max-width: 560px) {
  .hero { display: flex; flex-direction: column; }
  .hero-ic { display: contents; }
  .hero-yazi { order: 1; padding-inline: 20px; }
  .hero-farklar { order: 2; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
  .hero-farklar a { flex-direction: column; gap: 10px; padding: 14px; }
  .hero-farklar small { display: none; }
  .hf-yazi strong { font-size: .92rem; }
  .sahne { order: 3; margin: 36px 20px 0; }
  .ust-sag .dugme.kucuk { display: none; }
  .hero { padding-top: calc(var(--ust-yuk) + 32px); }
  .hero .dugmeler .dugme { width: 100%; }
  .adimlar { font-size: .66rem; gap: 4px; }
  .adimlar li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .adimlar em { display: none; }
  .teklif-kart { width: 64%; padding: 10px; font-size: .7rem; inset-inline-end: 8px; bottom: 8px; }
  .tk-cizgi { display: none; }
  .guven { justify-content: flex-start; flex-direction: column; gap: 10px; margin-top: 36px; }
  .td-alan { height: 420px; }
  .telefon { position: relative; top: auto; width: 200px; margin: 18px auto 0; }
  [dir="rtl"] .telefon { margin: 18px auto 0; }
  .teklif-demo { padding-bottom: 0; }
  .wa-sabit { padding: 0; width: 58px; justify-content: center; }
  .wa-sabit span { display: none; }
  .ks-etiket { top: 10px; font-size: .72rem; }
}
@media (min-width: 700px) {
  .nasil-liste { grid-template-columns: repeat(2, 1fr); }
  .kim-izgara { grid-template-columns: repeat(2, 1fr); }
  .fiyat-izgara { max-width: 560px; margin-inline: auto; }
  .fark-izgara { grid-template-columns: repeat(2, 1fr); }
  .hero-farklar { grid-template-columns: repeat(2, 1fr); }
  .fark-1 { grid-column: 1 / -1; }
  .alt-izgara { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1000px) {
  .hero-ic { grid-template-columns: 1fr 1.18fr; gap: 56px; }
  .hero-farklar { grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
  .iki-sutun { grid-template-columns: 1fr 1fr; gap: 72px; }
  .iki-sutun.ters > :first-child { order: 2; }
  .nasil-liste { grid-template-columns: repeat(4, 1fr); }
  .fiyat-izgara { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .fark-izgara { grid-template-columns: repeat(3, 1fr); }
  .fark-1 { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-gor] { opacity: 1; transform: none; }
}

/* ---------- Tıklanır fark kartları (kendi sayfası olanlar) ---------- */
.fark-kart.tiklanir { cursor: pointer; }
.fark-kart h3 a { color: inherit; text-decoration: none; }
.fark-kart h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.fark-kart h3 a:focus-visible { outline: none; }
.fark-kart:has(h3 a:focus-visible) { outline: 3px solid var(--nane); outline-offset: 3px; }
.fark-ayrinti { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 700; color: var(--yesil-koyu); }
.fark-ayrinti .ikon { width: 18px; height: 18px; transition: transform .25s ease; }
.fark-kart:hover .fark-ayrinti .ikon { transform: translateX(4px); }
[dir="rtl"] .fark-kart:hover .fark-ayrinti .ikon { transform: scaleX(-1) translateX(4px); }

/* ---------- Mini sürükle-bırak (toplu yükleme kartı): klasör bırakılır, ürünler ayrılır, "hepsi bu kadar" ---------- */
.mini-surukle { position: relative; height: 196px; margin-top: 26px; font-size: .8rem; }
.ms-alan { position: absolute; top: 0; inset-inline-end: 0; width: 62%; height: 150px; display: grid; place-items: center; border-radius: 16px;
  border: 2px dashed rgba(255, 255, 255, .22); animation: ms-alan 8s ease-in-out infinite; }
.ms-birak { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 255, 255, .6); font-weight: 600; text-align: center; animation: ms-birak 8s ease-in-out infinite; }
.ms-birak .ikon { width: 26px; height: 26px; }
.ms-cipler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; width: 100%; }
.ms-cipler li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(93, 202, 165, .16); color: #fff; font-weight: 700;
  opacity: 0; animation: ms-cip 8s ease-out infinite; animation-delay: calc(var(--j) * .25s); }
.ms-cipler .ikon { width: 15px; height: 15px; color: var(--nane); flex: none; }
.ms-klasor { position: absolute; top: 30px; inset-inline-start: 0; z-index: 2; width: 34%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px;
  background: #fff; color: var(--murekkep); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .5); animation: ms-klasor 8s cubic-bezier(.5, 0, .3, 1) infinite; }
.ms-kagitlar { position: relative; height: 34px; }
.ms-kagitlar i { position: absolute; top: 0; inset-inline-start: 0; width: 30px; height: 34px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ms-kagitlar i:nth-child(1) { background: linear-gradient(135deg, #E8E2D6, #CFC6B4); transform: rotate(-10deg); }
.ms-kagitlar i:nth-child(2) { background: linear-gradient(135deg, #9AA5A8, #6F7B7E); transform: translateX(14px) rotate(4deg); }
.ms-kagitlar i:nth-child(3) { background: linear-gradient(135deg, #F4F1EA, #D9D3C6); transform: translateX(28px) rotate(12deg); }
[dir="rtl"] .ms-kagitlar i:nth-child(2) { transform: translateX(-14px) rotate(-4deg); }
[dir="rtl"] .ms-kagitlar i:nth-child(3) { transform: translateX(-28px) rotate(-12deg); }
.ms-ad strong { display: block; font-size: .78rem; line-height: 1.25; }
.ms-ad small { color: var(--gri); font-size: .72rem; }
.ms-imlec { position: absolute; bottom: -12px; inset-inline-end: -10px; width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
[dir="rtl"] .ms-imlec { transform: scaleX(-1); }
.ms-son { position: absolute; bottom: 0; inset-inline: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; font-weight: 800; color: var(--nane);
  opacity: 0; animation: ms-son 8s ease-out infinite; }
.ms-son .ikon { width: 20px; height: 20px; }
@keyframes ms-klasor {
  0% { inset-inline-start: 0; opacity: 0; transform: translateY(10px); }
  6%, 12% { inset-inline-start: 0; opacity: 1; transform: none; }
  28% { inset-inline-start: 52%; opacity: 1; transform: scale(.92) rotate(-3deg); }
  33% { inset-inline-start: 52%; opacity: 0; transform: scale(.5); }
  100% { inset-inline-start: 52%; opacity: 0; transform: scale(.5); } }
@keyframes ms-alan { 0%, 18% { border-color: rgba(255, 255, 255, .22); background: transparent; }
  24%, 34% { border-color: var(--nane); background: rgba(93, 202, 165, .14); }
  42%, 92% { border-color: rgba(93, 202, 165, .4); border-style: solid; background: rgba(93, 202, 165, .06); }
  100% { border-color: rgba(255, 255, 255, .22); background: transparent; } }
@keyframes ms-birak { 0%, 28% { opacity: 1; } 34%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ms-cip { 0%, 36% { opacity: 0; transform: translateY(8px) scale(.9); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ms-son { 0%, 56% { opacity: 0; transform: translateY(6px); } 62%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* ---------- Alt bilgi: dil seçimi tek düğme (yukarı doğru açılır) ---------- */
.alt-son { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.alt-son .telif { margin: 0; }
.alt .dil-menu summary { min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; color: #fff; font-size: .92rem; }
.alt .dil-menu summary .ikon { width: 18px; height: 18px; }
.alt .dil-menu ul { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: 0; z-index: 5; display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); }
.alt .dil-menu a { color: var(--orman); }
.alt .dil-menu a:hover { color: var(--orman); text-decoration: none; }

/* ---------- Alt sayfalar (kişiselleştirme, uleso Render, krokiden banyo) ---------- */
/* Alt sayfa girişi açık renkli: ana sayfanın koyu girişinden hemen ayrılsın. Her sayfanın kendi rengi var (--sayfa). */
.as-kisisel { --sayfa: #9A4A2C; --sayfa-acik: #FBEDE6; }
.as-render { --sayfa: #5B3F8C; --sayfa-acik: #F0EBF8; }
.as-teklif { --sayfa: #117A3D; --sayfa-acik: #E4F5EA; }
.as-kroki { --sayfa: #8A5300; --sayfa-acik: #FFF1DC; }
.sekme-kisisel { --s: #9A4A2C; } .sekme-render { --s: #5B3F8C; } .sekme-teklif { --s: #117A3D; } .sekme-kroki { --s: #8A5300; }
.alt-sayfa .ust { background: rgba(250, 249, 246, .9); backdrop-filter: saturate(1.6) blur(14px); color: var(--orman); box-shadow: 0 1px 0 var(--cizgi); }
.alt-sayfa .ust .logo-koyu { display: none; }
.alt-sayfa .ust .logo-acik { display: block; }
.as-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--ust-yuk) + 24px) 0 clamp(56px, 8vw, 96px);
  background: linear-gradient(180deg, var(--sayfa-acik), var(--kagit) 85%); border-bottom: 1px solid var(--cizgi); }
.as-hero::before { content: ''; position: absolute; z-index: -1; width: 70vw; aspect-ratio: 1; top: -25vw; inset-inline-end: -20vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sayfa) 20%, transparent), transparent); }
.ozellik-sekme { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.ozellik-sekme::-webkit-scrollbar { display: none; }
.ozellik-sekme a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi);
  color: var(--orman); font-weight: 600; font-size: .92rem; text-decoration: none; box-shadow: var(--golge); transition: border-color .2s ease; }
.ozellik-sekme a .ikon { width: 18px; height: 18px; color: var(--s); }
.ozellik-sekme a:hover { border-color: var(--s); }
.ozellik-sekme a[aria-current] { background: var(--s); border-color: var(--s); color: #fff; }
.ozellik-sekme a[aria-current] .ikon { color: #fff; }
.as-hero-ic { display: grid; gap: 48px; align-items: center; margin-top: 28px; }
.as-yazi h1 { color: var(--orman); font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.03em; margin: 18px 0; }
.as-yazi .hero-alt { color: var(--gri); }
.as-rozet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: .875rem; font-weight: 700;
  background: #fff; border: 1px solid color-mix(in srgb, var(--sayfa) 35%, transparent); color: var(--sayfa); }
.as-rozet .ikon { width: 18px; height: 18px; }
.yol-izi { display: flex; gap: 8px; margin-bottom: 16px; font-size: .88rem; color: var(--gri); }
.yol-izi a { color: var(--sayfa); font-weight: 600; text-decoration: none; }
.yol-izi a:hover { text-decoration: underline; }
.as-gorsel { position: relative; margin: 0; }
.as-gorsel::before { content: ''; position: absolute; inset: -30px; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--sayfa) 22%, transparent), transparent); filter: blur(20px); }
.as-teklif .teklif-demo { max-width: 560px; margin-inline: auto; }
@media (min-width: 561px) { .as-teklif .belge { width: calc(100% - 214px); } .as-teklif .telefon { top: 110px; } }
/* Diğer özellikler kartları */
.diger-izgara { display: grid; gap: 16px; }
.diger-kart { position: relative; padding: 28px; border-radius: var(--r-o); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); transition: transform .25s ease, border-color .25s ease; }
.diger-kart:hover { transform: translateY(-3px); border-color: var(--s); }
.diger-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--s) 12%, #fff); color: var(--s); }
.diger-ikon .ikon { width: 24px; height: 24px; }
.diger-kart h3 { margin: 18px 0 8px; }
.diger-kart h3 a { color: inherit; text-decoration: none; }
.diger-kart h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.diger-kart h3 a:focus-visible { outline: none; }
.diger-kart:has(h3 a:focus-visible) { outline: 3px solid var(--nane); outline-offset: 3px; }
.diger-kart p { color: var(--gri); }
.diger-kart .fark-ayrinti { color: var(--s); }
.diger-kart:hover .fark-ayrinti .ikon { transform: translateX(4px); }
.as-bloklar { display: grid; gap: 16px; }
.as-blok { padding: 28px; border-radius: var(--r-o); background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.as-blok h3 { margin: 16px 0 8px; }
.as-blok p { color: var(--gri); }
.as-tik { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--nane-acik); color: var(--yesil-koyu); }
.as-ozel { padding: 28px; border-radius: var(--r-o); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); }
.as-ozel h3 { color: #fff; margin-bottom: 18px; }
.as-ozel ol { display: grid; gap: 14px; counter-reset: oz; }
.as-ozel li { position: relative; padding-inline-start: 48px; min-height: 34px; display: flex; align-items: center; color: rgba(255, 255, 255, .85); font-weight: 600; counter-increment: oz; }
.as-ozel li::before { content: counter(oz); position: absolute; inset-inline-start: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(93, 202, 165, .18); color: var(--nane); font-weight: 800; }
.alt-sayfa .son .dugmeler { margin-top: 32px; }

/* Kişiselleştirme görseli: firmanın rengi sürekli değişir, ürün listesi sizin ürünlerinizle dolar */
@property --vurgu { syntax: '<color>'; inherits: true; initial-value: #0F6E56; }
.as-marka { position: relative; padding: 12px 12px 28px; border-radius: var(--r-b); background: #fff; color: var(--murekkep); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); animation: vurgu 12s infinite; }
@keyframes vurgu { 0%, 22% { --vurgu: #0F6E56; } 25%, 47% { --vurgu: #9A4A2C; } 50%, 72% { --vurgu: #1F3A68; } 75%, 97% { --vurgu: #5B3F8C; } 100% { --vurgu: #0F6E56; } }
.asm-ust { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--vurgu); color: #fff; }
.asm-logo { padding: 6px 10px; border: 2px dashed rgba(255, 255, 255, .7); border-radius: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.asm-ust strong { font-size: .95rem; }
.asm-renkler { display: flex; gap: 6px; margin-inline-start: auto; }
.asm-renkler i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.asm-renkler i:nth-child(1) { background: #0F6E56; } .asm-renkler i:nth-child(2) { background: #9A4A2C; } .asm-renkler i:nth-child(3) { background: #1F3A68; } .asm-renkler i:nth-child(4) { background: #5B3F8C; }
.asm-resim { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; margin-top: 10px; }
.asm-liste { display: grid; gap: 6px; margin-top: 10px; }
.asm-liste li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #F3F6F4; font-size: .85rem; font-weight: 600;
  animation: asm-satir 6s ease-out infinite; animation-delay: calc(var(--j) * .5s); }
.asm-liste .ikon { width: 16px; height: 16px; color: var(--vurgu); flex: none; }
@keyframes asm-satir { 0% { opacity: 0; transform: translateX(-10px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.asm-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.asm-alt span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--cizgi); font-size: .8rem; font-weight: 700; color: var(--vurgu); }
.asm-alt .ikon { width: 15px; height: 15px; }
.as-marka .temsili, .as-sohbet .temsili { color: var(--gri); text-shadow: none; }

/* uleso Render görseli: 3D taslak, üstünde render tarayarak açılır */
.as-render { position: relative; aspect-ratio: 5 / 4; }
.asr-kare { position: absolute; width: 66%; border-radius: 16px; overflow: hidden; border: 4px solid rgba(255, 255, 255, .9); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.asr-kare img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.asr-kare:first-child { top: 0; inset-inline-start: 0; transform: rotate(-2deg); }
.asr-sonra { width: 74%; bottom: 0; inset-inline-end: 0; transform: rotate(1.5deg); background: #6F7B7E; }
.asr-sonra img { animation: asr-ac 7s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes asr-ac { 0%, 10% { clip-path: inset(0 100% 0 0); } 40%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
[dir="rtl"] .asr-sonra img { animation-name: asr-ac-rtl; }
@keyframes asr-ac-rtl { 0%, 10% { clip-path: inset(0 0 0 100%); } 40%, 90% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.asr-etiket { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(6, 37, 32, .8); color: #fff; font-size: .78rem; font-weight: 700; }
.asr-etiket .ikon { width: 14px; height: 14px; color: var(--nane); }
.asr-sure { position: absolute; bottom: 9%; inset-inline-start: 2%; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px;
  background: var(--nane); color: var(--gece); font-weight: 800; box-shadow: 0 10px 30px -6px rgba(93, 202, 165, .7); }
.asr-sure .ikon { width: 16px; height: 16px; }
.as-render .temsili { bottom: -22px; color: var(--gri); text-shadow: none; }

/* Krokiden banyo görseli: yapay zekâ asistanıyla sohbet; mesajlar sırayla gelir */
.as-sohbet { position: relative; max-width: 420px; margin-inline: auto; padding-bottom: 14px; border-radius: var(--r-b); background: #EEF3F1; color: var(--murekkep); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); overflow: hidden; }
.ass-bas { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--cizgi); }
.ass-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, var(--yesil), var(--orman)); color: #fff; }
.ass-avatar .ikon { width: 18px; height: 18px; }
.ass-akis { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ass-balon { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; max-width: 85%; padding: 9px 13px; border-radius: 14px; border-start-start-radius: 4px; background: #fff;
  font-size: .88rem; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); opacity: 0; }
.ass-balon .ikon { width: 15px; height: 15px; color: var(--yesil); flex: none; }
.ass-balon.ben { align-self: flex-end; flex-direction: column; align-items: stretch; padding: 6px; border-radius: 14px; border-start-end-radius: 4px; background: #D9F5E8; font-size: .78rem; }
.ass-balon.ben img { width: 150px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.ass-balon.ben span { padding: 2px 4px; }
.ass-balon.sonuc { padding: 6px; }
.ass-balon.sonuc img { width: 210px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.ass-akis > :nth-child(1) { animation: ass-0 12s ease-out infinite; }
.ass-akis > :nth-child(2) { animation: ass-1 12s ease-out infinite; }
.ass-akis > :nth-child(3) { animation: ass-2 12s ease-out infinite; }
.ass-akis > :nth-child(4) { animation: ass-3 12s ease-out infinite; }
.ass-akis > :nth-child(5) { animation: ass-4 12s ease-out infinite; }
.ass-akis > :nth-child(6) { animation: ass-5 12s ease-out infinite; }
@keyframes ass-0 { 0%, 3% { opacity: 0; transform: translateY(10px); } 7%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ass-1 { 0%, 16% { opacity: 0; transform: translateY(10px); } 20%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ass-2 { 0%, 26% { opacity: 0; transform: translateY(10px); } 30%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ass-3 { 0%, 36% { opacity: 0; transform: translateY(10px); } 40%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ass-4 { 0%, 48% { opacity: 0; transform: translateY(10px); } 52%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ass-5 { 0%, 56% { opacity: 0; transform: translateY(10px) scale(.96); } 62%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

@media (min-width: 700px) {
  .as-bloklar { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .as-hero-ic { grid-template-columns: 1fr 1fr; gap: 64px; }
  .as-bloklar { grid-template-columns: repeat(3, 1fr); }
  .nasil-liste.uc { grid-template-columns: repeat(3, 1fr); }
  .diger-izgara { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .ms-alan { width: 60%; }
  .ms-klasor { width: 38%; padding: 10px; }
  .ms-cipler { grid-template-columns: 1fr; gap: 5px; padding: 8px; }
  .ms-cipler li { padding: 5px 8px; font-size: .74rem; }
  .ass-balon.sonuc img { width: 180px; }
}
/* Hareket istemeyenlerde son hâl gösterilir */
@media (prefers-reduced-motion: reduce) {
  .ms-klasor, .ms-birak { display: none; }
  .ms-cipler li, .ms-son, .asm-liste li, .ass-balon { opacity: 1; animation: none; }
  .ms-alan { border-style: solid; border-color: rgba(93, 202, 165, .4); animation: none; }
  .asr-sonra img { animation: none; }
}