:root {
  --lacivert: #112A43;
  --lacivert-koyu: #0A1B2C;
  --lacivert-orta: #1B4064;
  --yesil: #5FA524;
  --yesil-koyu: #3E7C1F;
  --yesil-acik: #7DC94E;
  --yesil-neon: #9BE15D;
  --zemin: #FFFFFF;
  --zemin-2: #F4F7FA;
  --kenar: #DCE4EC;
  --gri: #6B7A8C;
  --metin: #112A43;
  --metin-acik: #EAF1F8;
  --soluk: #9FB4C9;
  --kose: 12px;
  --kose-b: 22px;
  --golge: 0 10px 30px rgba(17, 42, 67, .10), 0 2px 6px rgba(17, 42, 67, .06);
  --golge-b: 0 40px 80px rgba(10, 27, 44, .35), 0 12px 24px rgba(10, 27, 44, .2);
  --gecis: .7s cubic-bezier(.22, 1, .36, 1);
  --genislik: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: 1.6;
  color: var(--metin); background: var(--zemin); overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--yesil-koyu); text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4 { line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.025em; font-weight: 800; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }
.ic { width: min(var(--genislik), 100% - 32px); margin-inline: auto; }
.etiket {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
   color: var(--yesil-koyu); margin-bottom: .9rem;
}
.etiket::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--yesil); }
.soluk-metin { color: var(--gri); }
.vurgu { background: linear-gradient(90deg, var(--yesil-acik), var(--yesil-neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.buyuk { font-size: 1.2rem; }

/* Düğmeler */
.dugme {
  display: inline-flex; align-items: center; gap: .55rem; padding: .95rem 1.6rem; border-radius: 999px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space: nowrap;
}
.dugme:hover { transform: translateY(-2px); }
.dugme-yesil { background: linear-gradient(135deg, var(--yesil), var(--yesil-acik)); color: #fff; box-shadow: 0 10px 26px rgba(95, 165, 36, .4); }
.dugme-yesil:hover { box-shadow: 0 16px 34px rgba(95, 165, 36, .5); }
.dugme-cerceve { border-color: var(--kenar); color: var(--metin); background: #fff; }
.dugme-cerceve:hover { border-color: var(--lacivert); }
.dugme-acik { border-color: rgba(255, 255, 255, .3); color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); }
.dugme-acik:hover { background: rgba(255, 255, 255, .14); }
.dugme svg { width: 18px; height: 18px; }

/* Üst çubuk */
.ust { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.ust.koyu-ust { background: rgba(10, 27, 44, .55); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ust.kaydi { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--kenar); box-shadow: 0 6px 24px rgba(17, 42, 67, .06); }
.ust .ic { display: flex; align-items: center; gap: 1.5rem; height: 70px; width: min(1320px, 100% - 32px); }
.ust .logo img { height: 36px; width: auto; }
.ust .logo .acik-logo { display: block; }
.ust .logo .koyu-logo { display: none; }
.ust.kaydi .logo .acik-logo { display: none; }
.ust.kaydi .logo .koyu-logo { display: block; }
.ust nav { display: flex; gap: .2rem; margin-left: auto; align-items: center; }
.ust nav a { padding: .55rem .95rem; border-radius: 999px; color: #fff; font-weight: 600; font-size: .95rem; transition: background .2s, color .2s; }
.ust nav a:hover { background: rgba(255, 255, 255, .1); }
.ust nav a.aktif { background: rgba(125, 201, 78, .18); color: var(--yesil-neon); }
.ust.kaydi nav a { color: var(--metin); }
.ust.kaydi nav a:hover { background: var(--zemin-2); }
.ust.kaydi nav a.aktif { background: rgba(95, 165, 36, .12); color: var(--yesil-koyu); }
.ust nav a.dugme { padding: .6rem 1.2rem; margin-left: .6rem; color: #fff; }
/* Ürün grubu: dört ürün bağlantısı, üstünde küçük SürüPlan etiketiyle çerçeve içinde */
.urun-grubu { position: relative; display: flex; gap: .15rem; align-items: center; margin: 0 .4rem; padding: .25rem .3rem; border-radius: 999px; background: linear-gradient(120deg, rgba(155,225,93,.12), rgba(255,255,255,.04) 45%, rgba(107,168,255,.12)); box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: background .3s, box-shadow .3s; }
.urun-grubu::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(155,225,93,.8), rgba(255,255,255,.18) 50%, rgba(107,168,255,.7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.urun-grubu i { position: absolute; top: -.45rem; left: 50%; transform: translateX(-50%); padding: 0 .4rem; font-style: normal; line-height: 1.4; background: var(--lacivert-koyu); border-radius: 999px; box-shadow: 0 0 0 1px rgba(155,225,93,.35); transition: background .3s, box-shadow .3s; }
.urun-grubu i b { display: block; font-size: .5rem; font-weight: 800; letter-spacing: .18em; line-height: 1.5;  background: linear-gradient(90deg, var(--yesil-neon), #8CC8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ust nav .urun-grubu a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem .4rem .6rem; --urun-renk: var(--yesil-neon); }
.ust nav .urun-grubu a[data-urun="yem"] { --urun-renk: #F5B942; }
.ust nav .urun-grubu a[data-urun="besleme"] { --urun-renk: #5CD6C0; }
.ust nav .urun-grubu a[data-urun="fizibilite"] { --urun-renk: #7FB3FF; }
.urun-grubu a svg { width: 15px; height: 15px; color: var(--urun-renk); transition: transform .25s var(--gecis); }
.urun-grubu a:hover svg { transform: scale(1.18) rotate(-6deg); }
.ust nav .urun-grubu a.aktif { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urun-renk) 55%, transparent), 0 0 18px color-mix(in srgb, var(--urun-renk) 35%, transparent); }
.ust.kaydi .urun-grubu { background: linear-gradient(120deg, rgba(95,165,36,.08), rgba(17,42,67,.02) 45%, rgba(45,108,223,.07)); box-shadow: 0 6px 18px rgba(17,42,67,.08); }
.ust.kaydi .urun-grubu::before { background: linear-gradient(120deg, rgba(95,165,36,.6), var(--kenar) 50%, rgba(45,108,223,.5)); }
.ust.kaydi .urun-grubu i { background: #fff; box-shadow: 0 0 0 1px rgba(95,165,36,.3); }
.ust.kaydi .urun-grubu i b { background: linear-gradient(90deg, var(--yesil-koyu), #2D6CDF); -webkit-background-clip: text; background-clip: text; }
.ust.kaydi nav .urun-grubu a { --urun-renk: var(--yesil-koyu); }
.ust.kaydi nav .urun-grubu a[data-urun="yem"] { --urun-renk: #C4820E; }
.ust.kaydi nav .urun-grubu a[data-urun="besleme"] { --urun-renk: #1E9E87; }
.ust.kaydi nav .urun-grubu a[data-urun="fizibilite"] { --urun-renk: #2D6CDF; }
.ust.kaydi nav .urun-grubu a.aktif { background: linear-gradient(135deg, #fff, var(--zemin-2)); color: var(--lacivert); }
.menu-dugme { display: none; margin-left: auto; background: none; border: 0; font-size: 1.7rem; cursor: pointer; color: #fff; }
.ust.kaydi .menu-dugme { color: var(--lacivert); }

/* Koyu bölüm */
.koyu { position: relative; background: var(--lacivert-koyu); color: var(--metin-acik); overflow: hidden; }
.koyu h1, .koyu h2, .koyu h3 { color: #fff; }
.koyu .etiket { color: var(--yesil-neon); }
.koyu .etiket::before { background: var(--yesil-neon); }
.koyu .soluk-metin { color: var(--soluk); }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; animation: yuz 14s ease-in-out infinite alternate; }
.blob.b1 { width: 620px; height: 620px; background: #1B4064; top: -200px; right: -120px; }
.blob.b2 { width: 520px; height: 520px; background: rgba(95, 165, 36, .55); bottom: -220px; left: -160px; animation-delay: -6s; }
.blob.b3 { width: 320px; height: 320px; background: #2D6CDF; top: 40%; left: 45%; opacity: .25; animation-delay: -3s; }
@keyframes yuz { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.08); } }
.izgara { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 70%); pointer-events: none; }

/* Hero */
.hero { margin-top: -70px; padding: 150px 0 90px; }
.hero .ic { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.hero .metin p.giris { font-size: 1.2rem; color: var(--soluk); max-width: 50ch; line-height: 1.65; }
.hero .dugmeler { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero .kimlik { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.hero .kimlik img { height: 46px; width: auto; }
.hero .kimlik .rozet { font-size: .78rem; font-weight: 800; letter-spacing: .18em; padding: .35rem .8rem; border: 1px solid rgba(155, 225, 93, .5); color: var(--yesil-neon); border-radius: 999px; background: rgba(95, 165, 36, .12); }
.hero .alt-not { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.6rem; font-size: .9rem; color: var(--soluk); }
.hero .alt-not span { display: inline-flex; align-items: center; gap: .4rem; }
.hero .alt-not svg { width: 16px; height: 16px; color: var(--yesil-neon); }

/* Cihaz çerçevesi */
.cihaz { position: relative; border-radius: 16px; background: #0d1f31; box-shadow: var(--golge-b); border: 1px solid rgba(255, 255, 255, .12); overflow: hidden; }
/* 23 Eki: Mustafa — pencere çubuğu ince ve sade; macOS tuşları tek renk, işaretsiz; başlık kutusuz */
.cihaz-bar { position: relative; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: linear-gradient(180deg, #16324e, #10263b); border-bottom: 1px solid rgba(255,255,255,.07); }
.cihaz-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }
.cihaz-bar i:nth-child(2), .cihaz-bar i:nth-child(3) { background: rgba(255,255,255,.2); }
.cihaz-bar span { position: absolute; left: 64px; right: 64px; text-align: center; font: 500 .69rem/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; background: none; border-radius: 0; }
.cihaz img { width: 100%; display: block; cursor: zoom-in; }
.hero .sahne { position: relative; perspective: 1400px; }
.hero .sahne .cihaz { transform: rotateY(-8deg) rotateX(3deg); transition: transform .8s var(--gecis); }
.hero .sahne:hover .cihaz { transform: rotateY(-3deg) rotateX(1deg); }
.hero .sahne .cihaz.arka { position: absolute; right: -6%; top: -8%; width: 70%; transform: rotateY(-10deg) translateZ(-120px); opacity: .55; filter: blur(.5px); }
.hero .sahne .cihaz.on { position: relative; width: 92%; margin-top: 60px; }
.cip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border-radius: 14px; background: rgba(255,255,255,.92); color: var(--lacivert); font-weight: 700; font-size: .85rem; box-shadow: 0 16px 40px rgba(10, 27, 44, .35); backdrop-filter: blur(10px); animation: sal 6s ease-in-out infinite; }
.cip small { display: block; font-weight: 500; color: var(--gri); font-size: .72rem; }
.cip b { font-size: 1.05rem; display: block; line-height: 1.1; }
.cip .nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 0 4px rgba(95,165,36,.25); }
.cip.c1 { left: -4%; top: 14%; animation-delay: -1s; }
.cip.c2 { right: -3%; bottom: 14%; animation-delay: -3s; }
.cip.c3 { left: 6%; bottom: -4%; animation-delay: -5s; }
@keyframes sal { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Bölümler */
section.bolum { padding: 100px 0; position: relative; }
section.bolum.acik-zemin { background: var(--zemin-2); }
.bolum-baslik { max-width: 64ch; margin-bottom: 3rem; }
.bolum-baslik.orta { margin-inline: auto; text-align: center; }
.bolum-baslik.orta .etiket { justify-content: center; }
.bolum-baslik p { color: var(--gri); font-size: 1.15rem; }
.koyu .bolum-baslik p { color: var(--soluk); }

/* Bento / kartlar */
.bento { display: grid; gap: 1.2rem; grid-template-columns: repeat(12, 1fr); }
.bento > * { grid-column: span 4; }
.bento .genis { grid-column: span 8; }
.bento .yari { grid-column: span 6; }
.kartlar { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.kart {
  background: #fff; border: 1px solid var(--kenar); border-radius: var(--kose-b); padding: 1.8rem; box-shadow: var(--golge);
  transition: transform .4s var(--gecis), box-shadow .4s, border-color .3s; position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.kart:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(17, 42, 67, .14); border-color: rgba(95,165,36,.4); }
.kart .ikon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(95, 165, 36, .18), rgba(27, 64, 100, .12)); color: var(--yesil-koyu); margin-bottom: 1.1rem; flex: none; }
.kart .ikon svg { width: 26px; height: 26px; }
.kart h3 { margin-bottom: .45rem; }
.kart p { color: var(--gri); margin: 0; }
.kart .rozet { font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--yesil-koyu);  margin-bottom: .4rem; }
.kart.urun { padding: 0; }
.kart.urun .gorsel { aspect-ratio: 16 / 9; overflow: hidden; background: var(--lacivert); position: relative; }
.kart.urun .gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .8s var(--gecis); }
.kart.urun:hover .gorsel img { transform: scale(1.04); }
.kart.urun .gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17,42,67,.55)); }
.kart.urun .icerik { padding: 1.5rem 1.6rem 1.6rem; }
.kart.urun .ok { margin-top: 1rem; color: var(--yesil-koyu); font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; transition: gap .3s; }
.kart.urun:hover .ok { gap: .8rem; }
.koyu .kart { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); color: var(--metin-acik); box-shadow: none; backdrop-filter: blur(6px); }
.koyu .kart:hover { border-color: rgba(155,225,93,.4); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.koyu .kart p { color: var(--soluk); }
.koyu .kart h3 { color: #fff; }
.koyu .kart .ikon { background: rgba(125, 201, 78, .16); color: var(--yesil-neon); }
.koyu .kart .rozet { color: var(--yesil-neon); }

/* Sayılar */
.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.2rem; }
.sayi { padding: 1.6rem 1.2rem; border-radius: var(--kose-b); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); text-align: center; }
.sayi b { display: block; font-size: 2.6rem; color: #fff; line-height: 1; font-weight: 800; letter-spacing: -.03em; }
.sayi b em { font-style: normal; color: var(--yesil-neon); }
.sayi span { color: var(--soluk); font-size: .92rem; display: block; margin-top: .5rem; }
.bolum:not(.koyu) .sayi { background: #fff; border-color: var(--kenar); box-shadow: var(--golge); }
.bolum:not(.koyu) .sayi b { color: var(--lacivert); }
.bolum:not(.koyu) .sayi b em { color: var(--yesil-koyu); }
.bolum:not(.koyu) .sayi span { color: var(--gri); }

/* Akış (döngü) */
.akis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; position: relative; counter-reset: akis; }
.akis .adim { position: relative; background: #fff; border: 1px solid var(--kenar); border-radius: var(--kose-b); padding: 1.6rem; box-shadow: var(--golge); color: var(--metin); transition: transform .4s var(--gecis), border-color .3s; overflow: hidden; }
.akis .adim:hover { transform: translateY(-5px); border-color: var(--yesil); }
.akis .adim::before { counter-increment: akis; content: counter(akis, decimal-leading-zero); position: absolute; right: 1.1rem; top: .7rem; font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, var(--yesil-acik), var(--yesil-koyu)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; letter-spacing: -.04em; }
.akis .adim .ikon { width: 46px; height: 46px; border-radius: 12px; background: var(--lacivert); color: var(--yesil-neon); display: grid; place-items: center; margin-bottom: 1rem; }
.akis .adim .ikon svg { width: 24px; height: 24px; }
.akis .adim h3 { font-size: 1.15rem; }
.akis .adim p { color: var(--gri); font-size: .95rem; margin: 0; }
.akis .adim .kucuk { display: block; margin-top: .8rem; font-size: .8rem; font-weight: 700; color: var(--yesil-koyu); }
.akis-cizgi { height: 6px; border-radius: 6px; margin-top: 1.6rem; background: linear-gradient(90deg, var(--yesil), var(--yesil-neon), var(--lacivert-orta)); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--gecis); }
.akis-cizgi.gorunur { transform: scaleX(1); }

/* Kayan bant */
.bant { overflow: hidden; border-block: 1px solid rgba(255,255,255,.08); padding: 1rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bant .satir { display: flex; gap: .8rem; width: max-content; animation: kay 60s linear infinite; }
.bant:hover .satir { animation-play-state: paused; }
.bant .oge { padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); font-size: .9rem; font-weight: 600; white-space: nowrap; color: var(--metin-acik); }
.bant .oge b { color: var(--yesil-neon); margin-right: .4rem; font-weight: 800; }
@keyframes kay { to { transform: translateX(-50%); } }

/* Modül keşfi */
.kesif { display: grid; grid-template-columns: 300px 1fr; gap: 1.6rem; align-items: start; }
.kesif-liste { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; padding-right: .4rem; scrollbar-width: thin; scrollbar-color: var(--kenar) transparent; display: flex; flex-direction: column; gap: .3rem; }
.kesif-liste .grup { font-size: .7rem; font-weight: 800; letter-spacing: .16em;  color: var(--gri); margin: 1rem .6rem .35rem; }
.kesif-liste .grup:first-child { margin-top: 0; }
.kesif-oge { text-align: left; border: 1px solid transparent; background: transparent; border-radius: 14px; padding: .7rem .9rem; cursor: pointer; display: grid; grid-template-columns: 34px 1fr; gap: .7rem; align-items: center; color: var(--metin); transition: background .2s, border-color .2s, transform .2s; }
.kesif-oge:hover { background: #fff; border-color: var(--kenar); }
.kesif-oge.aktif { background: #fff; border-color: rgba(95,165,36,.5); box-shadow: 0 10px 24px rgba(17,42,67,.08); }
.kesif-oge .no { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--zemin-2); color: var(--gri); transition: background .2s, color .2s; }
.kesif-oge.aktif .no { background: var(--yesil); color: #fff; }
.kesif-oge b { display: block; font-size: .95rem; line-height: 1.2; }
.kesif-oge span { display: block; font-size: .78rem; color: var(--gri); line-height: 1.3; margin-top: .15rem; }
.kesif-sahne { position: relative; min-height: 520px; }
.kesif-panel { display: none; animation: gel .5s var(--gecis); }
.kesif-panel.aktif { display: block; }
@keyframes gel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.kesif-panel .cihaz { box-shadow: 0 30px 60px rgba(17, 42, 67, .18); }
.kesif-metin { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem; margin-top: 1.4rem; align-items: start; }
.kesif-metin h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.kesif-metin .aciklama { color: var(--gri); font-size: 1.05rem; margin: 0; }
.kesif-metin ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.kesif-metin li { position: relative; padding-left: 1.7rem; font-size: .96rem; }
.kesif-metin li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 16px; height: 16px; border-radius: 50%; background: rgba(95,165,36,.15); box-shadow: inset 0 0 0 2px var(--yesil); }
.kesif-metin li b { color: var(--lacivert); }
.kesif-nav { display: flex; gap: .6rem; margin-top: 1.4rem; justify-content: flex-end; }
.kesif-nav button { border: 1px solid var(--kenar); background: #fff; border-radius: 999px; padding: .55rem 1rem; cursor: pointer; font-weight: 600; color: var(--metin); display: inline-flex; align-items: center; gap: .4rem; transition: border-color .2s, transform .2s; }
.kesif-nav button:hover { border-color: var(--lacivert); transform: translateY(-1px); }
.kesif-nav button svg { width: 16px; height: 16px; }

/* Vitrin (görsel + metin) */
.vitrin { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.vitrin.ters .gorsel { order: -1; }
.vitrin .metin h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.vitrin .metin p { color: var(--gri); font-size: 1.08rem; }
.vitrin .madde { display: grid; gap: .9rem; margin-top: 1.4rem; }
.vitrin .madde div { display: flex; gap: .8rem; align-items: flex-start; }
.vitrin .madde svg { width: 22px; height: 22px; flex: none; color: var(--yesil); margin-top: .15rem; }
.vitrin .madde b { display: block; }
.vitrin .madde span { color: var(--gri); font-size: .95rem; }
.vitrin .gorsel { perspective: 1200px; }
.vitrin .gorsel .cihaz { transition: transform .8s var(--gecis); }
.vitrin .gorsel:hover .cihaz { transform: rotateY(-4deg) rotateX(2deg); }
.koyu .vitrin .metin p, .koyu .vitrin .madde span { color: var(--soluk); }
.koyu .vitrin .madde svg { color: var(--yesil-neon); }
.koyu .vitrin .madde b { color: #fff; }

/* Adımlar */
.adimlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; counter-reset: adim; }
.adimlar .adim { counter-increment: adim; background: #fff; border-radius: var(--kose-b); padding: 1.6rem; border: 1px solid var(--kenar); box-shadow: var(--golge); }
.adimlar .adim::before { content: counter(adim, decimal-leading-zero); display: inline-block; font-size: .85rem; font-weight: 800; color: var(--yesil-koyu); background: rgba(95,165,36,.12); padding: .3rem .7rem; border-radius: 999px; margin-bottom: .9rem; letter-spacing: .1em; }
.adimlar .adim h3 { font-size: 1.1rem; }
.adimlar .adim p { color: var(--gri); font-size: .95rem; margin: 0; }
.koyu .adimlar .adim { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
.koyu .adimlar .adim p { color: var(--soluk); }
.koyu .adimlar .adim::before { color: var(--yesil-neon); background: rgba(125,201,78,.15); }

/* Tablo */
table.kiyas { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--kose-b); overflow: hidden; box-shadow: var(--golge); border: 1px solid var(--kenar); }
table.kiyas th, table.kiyas td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--kenar); }
table.kiyas th { background: var(--lacivert); color: #fff; font-weight: 700; font-size: .9rem; }
table.kiyas th.biz { background: var(--yesil-koyu); }
table.kiyas tr:last-child td { border-bottom: 0; }
table.kiyas td.evet { color: var(--yesil-koyu); font-weight: 800; }
table.kiyas td.hayir { color: #C0392B; font-weight: 700; }
table.kiyas td.biz { background: rgba(95,165,36,.06); }

/* CTA */
.cta { padding: 110px 0; text-align: center; }
.cta h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 22ch; margin-inline: auto; }
.cta p { color: var(--soluk); max-width: 56ch; margin: 0 auto 2rem; font-size: 1.15rem; }
.cta .dugmeler { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta .kutu { margin: 3rem auto 0; max-width: 720px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--kose-b); padding: 1.6rem 1.8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; text-align: left; }
.cta .kutu div span { display: block; color: var(--soluk); font-size: .78rem;  letter-spacing: .12em; font-weight: 700; }
.cta .kutu div a, .cta .kutu div strong { color: #fff; font-weight: 600; font-size: .98rem; }
.cta .not { font-size: .85rem; color: var(--soluk); margin: 1.4rem auto 0; max-width: 60ch; }

/* Alt bilgi */
footer { background: #071523; color: var(--soluk); padding: 2.4rem 0; font-size: .9rem; border-top: 1px solid rgba(255,255,255,.06); }
footer .ic { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-left: auto; }
footer a { color: var(--metin-acik); font-weight: 500; }
footer a:hover { color: var(--yesil-neon); }

/* Belirme animasyonu */
.belir { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--gecis), transform .8s var(--gecis); transition-delay: var(--gecikme, 0s); }
.belir.soldan { transform: translateX(-36px); }
.belir.sagdan { transform: translateX(36px); }
.belir.buyu { transform: scale(.94); }
.belir.gorunur { opacity: 1; transform: none; }

/* Lightbox */
.buyut { position: fixed; inset: 0; z-index: 100; background: rgba(7, 21, 35, .94); display: grid; place-items: center; padding: 24px; cursor: zoom-out; opacity: 0; pointer-events: none; transition: opacity .3s; }
.buyut.acik { opacity: 1; pointer-events: auto; }
.buyut img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: var(--golge-b); transform: scale(.95); transition: transform .35s var(--gecis); }
.buyut.acik img { transform: none; }

/* Duyarlılık */
@media (max-width: 1000px) {
  .bento > *, .bento .genis, .bento .yari { grid-column: span 6; }
  .akis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { padding: 120px 0 60px; }
  .hero .ic, .vitrin, .kesif-metin { grid-template-columns: 1fr; }
  .vitrin.ters .gorsel { order: 0; }
  .hero .sahne .cihaz.arka { display: none; }
  .hero .sahne .cihaz.on { width: 100%; margin-top: 0; transform: none; }
  .cip { display: none; }
  .kesif { grid-template-columns: 1fr; }
  .kesif-liste { position: sticky; top: 70px; z-index: 40; max-height: none; flex-direction: row; overflow-x: auto; gap: .4rem; padding: .6rem 16px; margin-inline: -16px; background: rgba(244,247,250,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kenar); }
  .kesif-liste .grup { display: none; }
  .kesif-oge { flex: none; grid-template-columns: auto; padding: .5rem .9rem; border-color: var(--kenar); background: #fff; border-radius: 999px; }
  .kesif-oge .no, .kesif-oge span { display: none; }
  .kesif-oge.aktif { background: var(--yesil); border-color: var(--yesil); color: #fff; }
  .kesif-sahne { min-height: 0; }
  .ust nav { display: none; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; align-items: stretch; background: #0f2439; border-bottom: 1px solid rgba(255,255,255,.1); padding: .8rem 16px 1.2rem; gap: .3rem; }
  .ust.kaydi nav { background: #fff; border-bottom-color: var(--kenar); }
  .ust.acik nav { display: flex; }
  .ust nav a.dugme { margin: .6rem 0 0; justify-content: center; }
  .urun-grubu { flex-direction: column; align-items: stretch; margin: .9rem 0 .5rem; padding: 1rem .4rem .4rem; border-radius: 16px; }
  .urun-grubu i { left: 50%; }
  .ust nav .urun-grubu a { padding: .55rem .95rem; }
  .menu-dugme { display: block; }
  section.bolum { padding: 64px 0; }
  .cta { padding: 72px 0; }
}
@media (max-width: 600px) {
  .bento > *, .bento .genis, .bento .yari { grid-column: span 12; }
  .akis { grid-template-columns: 1fr; }
  h1 { font-size: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .belir { opacity: 1; transform: none; transition: none; }
  .akis-cizgi { transform: none; transition: none; }
  .blob, .cip, .bant .satir { animation: none; }
  .kesif-panel { animation: none; }
  .kart, .akis .adim, .dugme, .cihaz { transition: none; }
}

/* Pil listesi ("ve dahası") */
.pil-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.pil-liste span { padding: .45rem .95rem; border-radius: 999px; background: #fff; border: 1px solid var(--kenar); font-size: .88rem; font-weight: 600; color: var(--metin); }
.pil-liste .baslik { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.koyu .pil-liste span { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--metin-acik); }

/* "Tek" vurgusu */
.tek { padding: 110px 0; text-align: center; }
.tek h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 26ch; margin: 0 auto 1rem; }
.tek p.giris { color: var(--soluk); font-size: 1.15rem; max-width: 60ch; margin: 0 auto 3rem; }
.tek .kanit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; text-align: left; }
.tek .kanit div { padding: 1.5rem; border-radius: var(--kose-b); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.tek .kanit b { display: block; color: #fff; font-size: 1.1rem; margin-bottom: .3rem; }
.tek .kanit span { color: var(--soluk); font-size: .95rem; }
.tek .kanit svg { width: 28px; height: 28px; color: var(--yesil-neon); margin-bottom: .8rem; }

/* Animasyonlu marka: S soldan, P sağdan yanaşır */
.marka-anim { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.6rem; }
.marka-anim .amblem { position: relative; width: 132px; height: 132px; flex: none; }
.marka-anim .amblem img { position: absolute; inset: 0; width: 100%; height: 100%; }
.marka-anim .amblem .s { animation: gelS 1.5s cubic-bezier(.22, 1, .36, 1) both; }
.marka-anim .amblem .p { animation: gelP 1.5s cubic-bezier(.22, 1, .36, 1) both; }
.marka-anim .amblem::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(155,225,93,.55), transparent 65%); opacity: 0; animation: parla 1.2s ease-out 1.05s both; pointer-events: none; }
.marka-anim .yazi { height: 46px; width: auto; animation: yaziGel 1s cubic-bezier(.22, 1, .36, 1) .9s both; }
@keyframes gelS { from { transform: translateX(-220px) rotate(-14deg) scale(.9); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes gelP { from { transform: translateX(220px) rotate(14deg) scale(.9); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes parla { 0% { opacity: 0; transform: scale(.4); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes yaziGel { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.marka-anim.tekrar .s, .marka-anim.tekrar .p, .marka-anim.tekrar .yazi, .marka-anim.tekrar .amblem::after { animation: none; }
@media (max-width: 900px) { .marka-anim .amblem { width: 96px; height: 96px; } .marka-anim .yazi { height: 34px; } }
@media (prefers-reduced-motion: reduce) { .marka-anim .amblem .s, .marka-anim .amblem .p, .marka-anim .yazi, .marka-anim .amblem::after { animation: none; opacity: 1; transform: none; } }

.dipnot { font-size: .78rem; color: var(--soluk); margin: 1.1rem 0 0; max-width: 60ch; line-height: 1.5; }
.dipnot em { color: var(--metin-acik); font-style: normal; font-weight: 600; }

/* Kazanç hesaplayıcı */
.hesap-alan { display: grid; gap: 1rem; margin-top: 1.4rem; }
.hesap-alan label { display: grid; gap: .35rem; font-size: .92rem; color: var(--metin-acik); font-weight: 500; }
.hesap-alan output { float: right; font-weight: 800; color: var(--yesil-neon); }
.hesap-alan input[type=range] { width: 100%; accent-color: var(--yesil); }
.sonuc-kutu { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--kose-b); padding: 2rem; backdrop-filter: blur(8px); }
.sonuc-kutu span { display: block; font-size: .78rem; letter-spacing: .12em;  color: var(--soluk); font-weight: 700; margin-top: 1.2rem; }
.sonuc-kutu span:first-child { margin-top: 0; }
.sonuc-kutu b { display: block; font-size: 2rem; color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sonuc-kutu b.vurgu { font-size: 2.8rem; }
.sonuc-kutu .cubuk { height: 10px; border-radius: 10px; background: rgba(255,255,255,.1); margin-top: 1.4rem; overflow: hidden; }
.sonuc-kutu .cubuk i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yesil), var(--yesil-neon)); transition: width .4s var(--gecis); }
.sonuc-kutu small { display: block; margin-top: .5rem; color: var(--soluk); }
.urun-etki .kart { padding: 1.2rem 1.3rem; }
.urun-etki .kart h3 { font-size: 1rem; }
.urun-etki .kart p { font-size: .9rem; }
.urun-etki .gorsel { align-self: start; position: sticky; top: 100px; }
@media (max-width: 900px) { .urun-etki .gorsel { position: static; } }

/* İş akışı görselleştirmesi */
.akis-duzen { display: grid; grid-template-columns: 1.35fr .65fr; gap: 2.5rem; align-items: center; }
.akis-sahne { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--kose-b); padding: 1rem; }
.akis-svg { width: 100%; height: auto; display: block; font-family: Inter, system-ui, sans-serif; }
.akis-svg .yol { fill: none; stroke-width: 3; stroke-linecap: round; marker-end: url(#ok); }
.akis-svg .yol.ana { stroke: rgba(155,225,93,.55); color: rgba(155,225,93,.9); stroke-dasharray: 10 8; animation: yol-ak 1.2s linear infinite; }
.akis-svg .yol.geri { stroke: rgba(91,147,232,.55); color: rgba(91,147,232,.9); stroke-dasharray: 4 8; animation: yol-ak 1.6s linear infinite reverse; }
@keyframes yol-ak { to { stroke-dashoffset: -18; } }
.akis-svg .yol-etiket { fill: #9FB4C9; font-size: 15px; text-anchor: middle; font-weight: 500; }
.akis-svg .paket { filter: url(#isik); }
.akis-svg .paket.yesil { fill: #9BE15D; }
.akis-svg .paket.mavi { fill: #5B93E8; }
.akis-svg .dugum rect { fill: #112A43; stroke: rgba(255,255,255,.18); stroke-width: 2; transition: stroke .3s; }
.akis-svg .dugum .ad { fill: #fff; font-size: 26px; font-weight: 800; text-anchor: middle; letter-spacing: -.02em; }
.akis-svg .dugum .alt { fill: #9FB4C9; font-size: 14px; text-anchor: middle; font-weight: 600; letter-spacing: .08em;  }
.akis-svg .dugum { animation: dugum-vurgu 8s infinite; transform-box: fill-box; transform-origin: center; }
.akis-svg .dugum.d1 { animation-delay: 0s; } .akis-svg .dugum.d2 { animation-delay: 2s; } .akis-svg .dugum.d3 { animation-delay: 4s; } .akis-svg .dugum.d4 { animation-delay: 6s; }
@keyframes dugum-vurgu { 0%, 30%, 100% { filter: none; } 8%, 22% { filter: drop-shadow(0 0 18px rgba(155,225,93,.9)); } }
.akis-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: akis; }
.akis-adimlar li { position: relative; padding: .9rem 1rem .9rem 3.2rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); animation: adim-vurgu 8s infinite; }
.akis-adimlar li::before { counter-increment: akis; content: counter(akis); position: absolute; left: 1rem; top: .95rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: rgba(255,255,255,.08); color: #fff; }
.akis-adimlar li.a1 { animation-delay: 0s; } .akis-adimlar li.a2 { animation-delay: 2s; } .akis-adimlar li.a3 { animation-delay: 4s; } .akis-adimlar li.a4 { animation-delay: 6s; }
.akis-adimlar b { display: block; color: #fff; }
.akis-adimlar span { color: var(--soluk); font-size: .92rem; line-height: 1.45; }
@keyframes adim-vurgu { 0%, 30%, 100% { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.03); } 8%, 22% { border-color: rgba(155,225,93,.6); background: rgba(155,225,93,.08); } }
/* Gün akışı */
.gun-akisi { margin-top: 3.5rem; }
.gun-baslik .etiket { margin-bottom: 1.4rem; }
.zaman { position: relative; }
.zaman .cizgi { position: absolute; left: 0; right: 0; top: 14px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.zaman .cizgi i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--yesil), var(--yesil-neon)); transform-origin: left; animation: gun-ilerle 14s linear infinite; }
@keyframes gun-ilerle { from { transform: scaleX(0); } 90% { transform: scaleX(1); } to { transform: scaleX(1); } }
.anlar { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; }
.an { position: relative; padding-top: 34px; }
.an::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #0A1B2C; border: 3px solid rgba(255,255,255,.3); animation: an-yan 14s linear infinite; }
.an.z1::before { animation-delay: 0s; } .an.z2::before { animation-delay: 2s; } .an.z3::before { animation-delay: 4s; } .an.z4::before { animation-delay: 6s; } .an.z5::before { animation-delay: 8s; } .an.z6::before { animation-delay: 10s; } .an.z7::before { animation-delay: 12s; }
@keyframes an-yan { 0%, 4% { border-color: rgba(255,255,255,.3); box-shadow: none; } 6%, 100% { border-color: var(--yesil-neon); box-shadow: 0 0 0 5px rgba(155,225,93,.2); } }
.an b { display: block; color: #fff; font-size: .95rem; }
.an span { display: block; color: var(--metin-acik); font-size: .85rem; line-height: 1.35; }
.an small { display: inline-block; margin-top: .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--yesil-neon); }
@media (max-width: 1000px) { .akis-duzen { grid-template-columns: 1fr; } .anlar { grid-template-columns: repeat(4, 1fr); } .zaman .cizgi { display: none; } .an::before { display: none; } .an { padding-top: 0; padding: .8rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } }
@media (max-width: 600px) { .anlar { grid-template-columns: 1fr 1fr; } .akis-svg .yol-etiket { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .akis-svg .yol, .akis-svg .dugum, .akis-adimlar li, .zaman .cizgi i, .an::before { animation: none; } .zaman .cizgi i { transform: none; } }

/* Çizimler (iş akışı sayfası) */
.cizim { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: var(--golge-b); font-family: Inter, system-ui, sans-serif; }
.acik-zemin .cizim, .bolum:not(.koyu) .cizim { box-shadow: 0 30px 60px rgba(17, 42, 67, .16); }
.cizim .bk { font: 600 11px Inter, sans-serif; fill: #6B7A8C; }
.cizim .bb { font: 800 14px Inter, sans-serif; fill: #112A43; }
.cizim .kuyruk { transform-box: fill-box; transform-origin: top right; animation: kuyruk 2.4s ease-in-out infinite; }
@keyframes kuyruk { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
.cizim .kupe { transform-box: fill-box; transform-origin: center; animation: kupe 2s ease-in-out infinite; }
@keyframes kupe { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.18); filter: drop-shadow(0 0 8px #F2C94C); } }
.cizim .teker { animation: don 2.2s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.cizim .vagon:not(.buyuk) { animation: vagon-git 9s ease-in-out infinite alternate; }
@keyframes vagon-git { from { transform: translate(30px, 330px); } to { transform: translate(120px, 330px); } }
.cizim .balon { animation: balon-sal 5s ease-in-out infinite; }
@keyframes balon-sal { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.cizim .balon.b-2 { animation-delay: -2.5s; }
.cizim .gunes { transform-box: fill-box; transform-origin: center; animation: gunes 6s ease-in-out infinite; }
@keyframes gunes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.cizim .cubuklar rect { transform-box: fill-box; transform-origin: bottom; animation: cubuk 3.2s ease-in-out infinite; }
.cizim .cubuklar rect:nth-child(2) { animation-delay: .2s; } .cizim .cubuklar rect:nth-child(3) { animation-delay: .4s; } .cizim .cubuklar rect:nth-child(4) { animation-delay: .6s; } .cizim .cubuklar rect:nth-child(5) { animation-delay: .8s; } .cizim .cubuklar rect:nth-child(6) { animation-delay: 1s; }
@keyframes cubuk { 0% { transform: scaleY(.2); } 40%, 100% { transform: scaleY(1); } }
.cizim .dolum { transform-box: fill-box; transform-origin: left; animation: dolum 4s ease-in-out infinite; }
@keyframes dolum { 0% { transform: scaleX(.1); } 80%, 100% { transform: scaleX(.98); } }
/* Açık zeminde gün çizelgesi */
.gun-akisi.acik { margin-top: 0; }
.gun-akisi.acik .zaman .cizgi { background: var(--kenar); }
.gun-akisi.acik .an::before { background: #fff; border-color: var(--kenar); }
.gun-akisi.acik .an b { color: var(--lacivert); font-size: 1.15rem; }
.gun-akisi.acik .an span { color: var(--metin); }
.gun-akisi.acik .an small { color: var(--yesil-koyu); }
@media (max-width: 1000px) { .gun-akisi.acik .an { background: #fff; border-color: var(--kenar); } }
/* Menü yedi öğeye sığsın */
@media (min-width: 901px) and (max-width: 1180px) { .ust nav a { padding: .5rem .6rem; font-size: .88rem; } .ust nav a.dugme { padding: .55rem .9rem; } .ust .logo img { height: 30px; } }
@media (prefers-reduced-motion: reduce) { .cizim * { animation: none !important; } }

/* Yerli rozet */
.yerli-rozet { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .06em;  background: rgba(227, 10, 23, .08); color: #B3261E; border: 1px solid rgba(227, 10, 23, .25); margin: 0 .6rem .9rem 0; }
.yerli-rozet .bayrak { width: 27px; height: 18px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.koyu .yerli-rozet { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25); }
.hero .kimlik .yerli-rozet { margin: 0; }

/* Menü sekiz öğe */
.ust nav a { padding: .5rem .75rem; font-size: .92rem; white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1280px) { .ust nav a { padding: .45rem .5rem; font-size: .84rem; } .ust nav a.dugme { padding: .5rem .8rem; margin-left: .3rem; } .ust .logo img { height: 28px; } .ust .ic { gap: .8rem; } }
.koyu .sayi b { font-size: 1.9rem; }
/* Düzeltmeler */
.koyu .akis .adim h3 { color: var(--lacivert); }
.vitrin .madde > div > div { display: block; }
.vitrin .madde > div > div b { margin-bottom: .1rem; }

/* Kullanım kolaylığı */
.kartlar.kolay { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kartlar.kolay .kart { padding: 1.5rem; }
.kartlar.kolay .kart h3 { font-size: 1.1rem; }
.kartlar.kolay .kart p { font-size: .95rem; }

/* Teklif formu */
.teklif-form { max-width: 720px; margin: 2.5rem auto 0; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--kose-b); padding: 1.8rem; backdrop-filter: blur(8px); display: grid; gap: 1rem; scroll-margin-top: 100px; }
.teklif-form h3 { margin: 0; color: #fff; font-size: 1.4rem; }
.teklif-form .satirlar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.teklif-form label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--metin-acik); }
.teklif-form input:not([type=checkbox]), .teklif-form textarea { font: inherit; font-weight: 400; padding: .7rem .9rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(10,27,44,.6); color: #fff; width: 100%; }
.teklif-form input:focus, .teklif-form textarea:focus { outline: 2px solid var(--yesil-acik); outline-offset: 1px; }
.teklif-form.eksik input[name=ad]:invalid { border-color: #F0715F; }
.teklif-form .urunler { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.teklif-form .urunler > span { font-size: .85rem; font-weight: 600; color: var(--metin-acik); margin-right: .4rem; }
.teklif-form .secim { display: inline-flex; grid-auto-flow: column; cursor: pointer; }
.teklif-form .secim input { position: absolute; opacity: 0; }
.teklif-form .secim span { padding: .45rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); font-weight: 700; font-size: .9rem; transition: all .2s; }
.teklif-form .secim input:checked + span { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.teklif-form .secim input:focus-visible + span { outline: 2px solid var(--yesil-neon); }
.teklif-form button { justify-self: start; border: 0; }
.teklif-form .not { margin: 0; text-align: left; max-width: none; }
@media (max-width: 600px) { .teklif-form .satirlar { grid-template-columns: 1fr; } .teklif-form button { justify-self: stretch; justify-content: center; } }

/* Yapay zekâ kartı */
.bento .tam { grid-column: 1 / -1; }
.kart.yapay-zeka { border-color: rgba(155,225,93,.45); background: linear-gradient(120deg, rgba(95,165,36,.18), rgba(45,108,223,.16)) , rgba(255,255,255,.04); }
.kart.yapay-zeka h3 { font-size: 1.5rem; }
.kart.yapay-zeka p { font-size: 1.02rem; max-width: 90ch; }
.rozet.yakinda { align-self: flex-start; background: var(--yesil-neon); color: #0A1B2C !important; padding: .25rem .7rem; border-radius: 999px; letter-spacing: .12em; }

/* Maliyet sözlüğü */
.sozluk { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.terim { padding: 1.3rem 1.4rem; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--yesil-acik); transition: background .3s, transform .4s var(--gecis), opacity .8s var(--gecis); }
.terim:hover { background: rgba(255,255,255,.09); }
.terim h4 { margin: 0 0 .45rem; color: #fff; font-size: 1.05rem; letter-spacing: -.01em; }
.terim p { margin: 0; font-size: .92rem; line-height: 1.5; }
.terim .nedir { color: var(--soluk); }
.terim .fayda { color: var(--metin-acik); margin-top: .6rem; }
.terim .fayda b { color: var(--yesil-neon); font-weight: 700; }

.yerli-alt { display: inline-flex; align-items: center; gap: .45rem; color: var(--soluk); }
.yerli-alt .bayrak { width: 20px; height: 13px; border-radius: 2px; }

/* Ana sayfa sloganı */
.hero h1.slogan { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.8rem); line-height: 1.04; letter-spacing: -.02em; font-variation-settings: "opsz" 144; }
.hero h1.slogan .vurgu { font-style: italic; font-weight: 600; }

/* Ana sayfa ürün vitrini (otomatik geçişli) */
.urun-vitrin { position: relative; }
.vitrin-sahne { position: relative; min-height: 480px; }
.vitrin-slayt { position: absolute; inset: 0; opacity: 0; transform: translateX(28px) scale(.98); transition: opacity .7s var(--gecis), transform .7s var(--gecis); pointer-events: none; }
.vitrin-slayt.aktif { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }
.vitrin-slayt .cihaz { width: 92%; margin-left: auto; transform: rotateY(-6deg) rotateX(2deg); }
.vitrin-sahne { perspective: 1400px; }
.vitrin-kart { position: absolute; left: -2%; bottom: -8px; width: min(340px, 78%); background: #F3F6EE; color: var(--metin); border-radius: 18px; padding: 1.1rem 1.2rem 1.1rem; box-shadow: 0 24px 50px rgba(10, 27, 44, .4); text-decoration: none; display: grid; gap: .3rem; transition: transform .3s var(--gecis); }
.vitrin-kart:hover { transform: translateY(-4px); }
.vitrin-kart .ust-satir { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.vitrin-kart .ikon { width: 40px; height: 40px; border-radius: 10px; background: #E3EDD9; color: var(--yesil-koyu); display: grid; place-items: center; }
.vitrin-kart .ikon svg { width: 20px; height: 20px; }
.vitrin-kart .no { font-size: .78rem; color: var(--gri); font-weight: 600; }
.vitrin-kart .rozet { font-size: .7rem; font-weight: 800; letter-spacing: .14em;  color: var(--yesil-koyu); }
.vitrin-kart h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; color: var(--lacivert); }
.vitrin-kart p { font-size: .88rem; color: var(--gri); margin: 0; }
.vitrin-kart .ok { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--lacivert); margin-top: .5rem; border-bottom: 2px solid var(--kenar); width: max-content; padding-bottom: .15rem; }
.vitrin-sekmeler { display: flex; gap: .5rem; margin-top: 1.6rem; justify-content: flex-end; }
.vitrin-sekme { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--metin-acik); border-radius: 999px; padding: .5rem 1rem .5rem 1.6rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.vitrin-sekme i { position: absolute; left: .7rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: rgba(255,255,255,.35); }
.vitrin-sekme.aktif { background: rgba(155,225,93,.14); color: #fff; border-color: rgba(155,225,93,.5); }
.vitrin-sekme.aktif i { background: var(--yesil-neon); }
.vitrin-sekme::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--yesil-neon); transform: scaleX(0); transform-origin: left; }
.vitrin-sekme.aktif::after { animation: sekme-dol var(--sure, 6s) linear forwards; }
.urun-vitrin.duraklat .vitrin-sekme.aktif::after { animation-play-state: paused; }
@keyframes sekme-dol { to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .vitrin-sahne { min-height: 0; perspective: none; }
  .vitrin-slayt { position: relative; display: none; transform: none; }
  .vitrin-slayt.aktif { display: block; }
  .vitrin-slayt .cihaz { width: 100%; transform: none; }
  .vitrin-kart { position: static; width: 100%; margin-top: 1rem; }
  .vitrin-sekmeler { justify-content: flex-start; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .vitrin-slayt { transition: none; } .vitrin-sekme.aktif::after { animation: none; transform: scaleX(1); } }

/* Sık sorulan sorular */
.sss-hero { padding-bottom: 60px; }
.sss-hero .ic { grid-template-columns: 1fr; }
.sss-hero .dugmeler .dugme { padding: .7rem 1.2rem; font-size: .9rem; }
.sss-duzen { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; }
.sss-baslik { position: sticky; top: 100px; }
.sss-baslik h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.sss-baslik p { color: var(--gri); max-width: 34ch; }
.sss-madde { border-bottom: 1px solid var(--kenar); padding: .3rem 0; }
.sss-madde summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-weight: 700; font-size: 1.08rem; color: var(--lacivert); }
.sss-madde summary::-webkit-details-marker { display: none; }
.sss-madde .isaret { position: relative; width: 22px; height: 22px; flex: none; }
.sss-madde .isaret::before, .sss-madde .isaret::after { content: ""; position: absolute; left: 3px; top: 10px; width: 16px; height: 2px; background: var(--lacivert); border-radius: 2px; transition: transform .3s var(--gecis); }
.sss-madde .isaret::after { transform: rotate(90deg); }
.sss-madde[open] .isaret::after { transform: rotate(0); }
.sss-madde p { margin: 0 0 1.2rem; color: var(--gri); line-height: 1.65; max-width: 70ch; }
.sss-madde[open] summary { color: var(--yesil-koyu); }
@media (max-width: 900px) { .sss-duzen { grid-template-columns: 1fr; gap: 1.5rem; } .sss-baslik { position: static; } }
@media (min-width: 901px) and (max-width: 1320px) { .ust nav a, .ust nav .urun-grubu a { padding: .45rem .45rem; font-size: .82rem; } .ust nav a.dugme { padding: .5rem .75rem; } .ust .logo img { height: 26px; } .urun-grubu { margin: 0 .2rem; } }

/* WhatsApp düğmesi (sabit, sağ alt) — sitenin kendi düğme biçimi ve mekanizması (.dugme: soldaki kutu + yazı, üstüne gelince kutu düğmeyi doldurur, simge sağa kayar);
   renkler WhatsApp'ın: koyu yeşil zemin #075E54, parlak yeşil kutu #25D366 (11 Eki 2026) */
.dugme.wa-dugme { position: fixed; right: 20px; bottom: 20px; z-index: 60; background: #075E54; color: #fff; box-shadow: 0 12px 30px rgba(37, 211, 102, .35); }
.dugme.wa-dugme::before { background: #25D366; }
.dugme.wa-dugme .ok { color: #075E54; }
.dugme.wa-dugme .ok svg { width: 22px; height: 22px; }
.dugme.wa-dugme:hover { box-shadow: 0 16px 34px rgba(37, 211, 102, .5); }
.dugme.wa-dugme:hover .metin { color: #075E54; }
.dugme.wa-dugme:focus-visible { outline-color: #25D366; }
@media (max-width: 640px) { .dugme.wa-dugme { right: 14px; bottom: 14px; min-height: 52px; width: 52px; padding: 0; } .dugme.wa-dugme .ok { left: 6px; } .dugme.wa-dugme:hover .ok { left: 6px; } .dugme.wa-dugme .metin { display: none; } }

/* İnek animasyonu: baş sallama, göz kırpma, kulak, çiğneme */
.cizim .inek .kafa { transform-box: fill-box; transform-origin: 20% 80%; animation: kafa-salla 4.2s ease-in-out infinite; }
@keyframes kafa-salla { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(5deg) translateY(4px); } 65% { transform: rotate(-2deg); } }
.cizim .inek .goz { transform-box: fill-box; transform-origin: center; animation: kirp 4.6s ease-in-out infinite; }
@keyframes kirp { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.cizim .inek .kulak { transform-box: fill-box; transform-origin: right center; animation: kulak 5.2s ease-in-out infinite; }
@keyframes kulak { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-22deg); } 94% { transform: rotate(6deg); } }
.cizim .inek .agiz { transform-box: fill-box; transform-origin: center; animation: cigne 1.1s ease-in-out infinite; }
@keyframes cigne { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(-3deg); } }

/* Altbilgi sosyal medya simgeleri */
footer .sosyal { display: flex; gap: .5rem; flex-basis: 100%; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.06); }
footer .sosyal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--soluk); transition: transform .25s var(--gecis), background .2s, color .2s, border-color .2s; }
footer .sosyal a svg { width: 20px; height: 20px; }
footer .sosyal a:hover { transform: translateY(-3px); background: rgba(155,225,93,.12); border-color: rgba(155,225,93,.45); color: var(--yesil-neon); }

/* Üst iletişim şeridi (menünün üstünde; kaydırınca gider) */
.ust-serit { background: #071523; color: var(--soluk); font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.ust-serit .ic { display: flex; align-items: center; gap: 1.4rem; height: 38px; }
.ust-serit .serit-il { display: inline-flex; align-items: center; gap: .4rem; color: var(--soluk); font-weight: 500; }
.ust-serit .serit-il:hover { color: #fff; }
.ust-serit .serit-il svg { width: 15px; height: 15px; color: var(--yesil-neon); }
.ust-serit .sosyal { display: flex; gap: .15rem; margin-left: auto; }
.ust-serit .sosyal a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--soluk); transition: color .2s, background .2s; }
.ust-serit .sosyal a svg { width: 16px; height: 16px; }
.ust-serit .sosyal a:hover { color: var(--yesil-neon); background: rgba(255,255,255,.06); }
@media (max-width: 640px) { .ust-serit .serit-il span { display: none; } .ust-serit .ic { gap: .8rem; } }

/* Dar ekran güvenceleri: uzun düğmeler sarsın, hiçbir öğe görünür alanı aşmasın */
@media (max-width: 480px) { .dugme { white-space: normal; text-align: center; justify-content: center; } .hero .dugmeler .dugme { width: 100%; } }
img, svg, video, iframe, table { max-width: 100%; }

/* Üst çubuk logosu: katmanlı ve animasyonlu (S soldan, P sağdan gelir, yazı belirir) */
.ust .logo.marka-ust { display: flex; align-items: center; gap: calc(var(--lh) * 0.158); --lh: 52px; }
.ust .logo.marka-ust .amblem { position: relative; width: calc(var(--lh) * 1.584); height: var(--lh); flex: none; }
.ust .logo.marka-ust .amblem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ust .logo.marka-ust .yazi { height: var(--lh); width: auto; }
.ust .logo.marka-ust .s { animation: gelS-ust 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.ust .logo.marka-ust .p { animation: gelP-ust 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.ust .logo.marka-ust .yazi { animation: yaziGel 1s cubic-bezier(.22, 1, .36, 1) .85s both; }
.ust .logo.marka-ust .amblem::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle, rgba(155,225,93,.6), transparent 65%); opacity: 0; animation: parla 1.1s ease-out 1s both; pointer-events: none; }
@keyframes gelS-ust { from { transform: translateX(-300%) rotate(-14deg) scale(.9); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes gelP-ust { from { transform: translateX(300%) rotate(14deg) scale(.9); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (min-width: 901px) and (max-width: 1320px) { .ust .logo.marka-ust { --lh: 42px; } }
@media (prefers-reduced-motion: reduce) { .ust .logo.marka-ust .s, .ust .logo.marka-ust .p, .ust .logo.marka-ust .yazi, .ust .logo.marka-ust .amblem::after { animation: none; opacity: 1; transform: none; } }

.ust .logo.marka-ust .yazi-kutu { position: relative; height: var(--lh); display: block; }
.ust .logo.marka-ust .yazi-kutu .koyu-logo { position: absolute; left: 0; top: 0; }
.ust .logo.marka-ust .acik-logo, .ust .logo.marka-ust .koyu-logo { display: block; }
.ust .logo.marka-ust .koyu-logo { visibility: hidden; }
.ust.kaydi .logo.marka-ust .acik-logo { visibility: hidden; }
.ust.kaydi .logo.marka-ust .koyu-logo { visibility: visible; }

/* Sözlük: kapalıyken ilk 6 terim */
.sozluk.kapali .terim:nth-child(n+7) { display: none; }
/* KVKK onay kutusu (formdaki hap seçimlerden farklı: düz satır) */
.teklif-form .secim.onay { display: flex; align-items: flex-start; gap: .6rem; margin: .2rem 0 1.1rem; padding: 0; background: none; border: 0; border-radius: 0; font-size: .88rem; color: var(--soluk); cursor: pointer; }
.teklif-form .secim.onay input { position: static; opacity: 1; width: 16px; height: 16px; margin: .2rem 0 0; flex: none; accent-color: var(--yesil); }
.teklif-form .secim.onay a { color: var(--yesil-neon); text-decoration: underline; }
.teklif-form.eksik .secim.onay:has(input:not(:checked)) { color: #F5B942; }
/* Düz metin sayfaları (KVKK) */
.yazi-govde { max-width: 760px; }
.yazi-govde h3 { margin: 2rem 0 .5rem; font-size: 1.15rem; }
.yazi-govde p { color: var(--gri); line-height: 1.75; }
/* Kıyas: rakip "yok" hücreleri daha yumuşak */
table.kiyas td.hayir { color: #9E4B45; font-weight: 600; }
.teklif-form .secim.onay span { padding: 0; border: 0; border-radius: 0; background: none; font-weight: 500; font-size: inherit; }
.teklif-form .secim.onay input:checked + span { background: none; border-color: transparent; color: var(--metin-acik); }

/* Kısa masaüstü ekranlarda hero'yu sıkıştır ki bir sonraki bölümün başı görünsün */
@media (min-width: 901px) and (max-height: 780px) { .hero { padding: 120px 0 84px; } .vitrin-sahne { min-height: 420px; } }

/* 901–1180 px: üst çubuk sıkı düzen (yazı ve logo küçülür, tek satırda kalır) */
@media (min-width: 901px) and (max-width: 1180px) { .ust nav a, .ust nav .urun-grubu a { padding: .45rem .42rem; font-size: .82rem; } .ust nav a.dugme { padding: .5rem .7rem; } .ust .logo.marka-ust { --lh: 36px; } .urun-grubu { margin: 0 .15rem; } }
@media (min-width: 901px) and (max-width: 1000px) { .ust nav a, .ust nav .urun-grubu a { padding: .4rem .3rem; font-size: .74rem; } .ust nav a.dugme { padding: .45rem .55rem; margin-left: .1rem; } .ust .ic { gap: .6rem; } .ust .logo.marka-ust { --lh: 30px; } .urun-grubu { margin: 0 .1rem; padding: .2rem .2rem; } }

@media (max-width: 900px) { .ust .logo.marka-ust { --lh: 40px; } }

/* Kaydırma ipucu: ekranın alt-ortasında cam görünümlü hap; "Keşfedin" + nabız halkalı yeşil ok (site.js ekler) */
.kaydir-ipucu { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: .7rem; padding: .35rem .4rem .35rem 1rem; border-radius: 999px; background: rgba(10,27,44,.62); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 12px 36px rgba(0,0,0,.35); color: var(--metin-acik); font-size: .78rem; font-weight: 700; letter-spacing: .12em;  text-decoration: none; opacity: 1; transition: opacity .4s, transform .4s, background .2s; }
.kaydir-ipucu:hover { background: rgba(10,27,44,.8); color: #fff; }
.kaydir-ipucu i { position: relative; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--yesil), var(--yesil-acik)); display: grid; place-items: center; color: #fff; flex: none; }
.kaydir-ipucu i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(155,225,93,.55); animation: ipucu-halka 2.2s ease-out infinite; }
.kaydir-ipucu i svg { width: 16px; height: 16px; animation: ipucu-ok 1.6s ease-in-out infinite; }
@keyframes ipucu-halka { to { box-shadow: 0 0 0 12px rgba(155,225,93,0); } }
@keyframes ipucu-ok { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.kaydir-ipucu.gizli { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
@media (max-width: 900px) { .kaydir-ipucu { bottom: 16px; font-size: .7rem; gap: .5rem; padding: .3rem .3rem .3rem .85rem; } .kaydir-ipucu i { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .kaydir-ipucu i::before, .kaydir-ipucu i svg { animation: none; } }

/* ============================================================
   REVİZYON 24 Eyl 2026 — üst çubuk + kulak animasyonu + hero slider
   ============================================================ */

:root { --egri: cubic-bezier(.22, 1, .36, 1); }
/* --- Üst çubuk: kaydırınca gizlen/yukarı kaydırınca gel --- */
.ust { transition: background .3s, box-shadow .3s, transform .38s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.ust.gizli:not(.acik) { transform: translateY(-100%); box-shadow: none; }
.ust .ic { gap: 1.2rem; }
.ust .logo.marka-ust { --lh: 34px; }
.ust nav.ana-nav { margin-left: auto; margin-right: auto; }
.ust-sag { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.ust nav.ana-nav + .ust-sag { margin-left: 0; }
.ust .ust-sag a.dugme.teklif { padding: .6rem 1.2rem; margin: 0; color: #fff; font-size: .92rem; }

/* Hamburger düğmesi: üç çizgi, açıkken çarpı */
.menu-dugme { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; border-radius: 12px; margin: 0; padding: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; }
.menu-dugme i { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--egri), opacity .2s; }
.menu-dugme i + i { margin-top: 4px; }
.menu-dugme:hover { background: rgba(255,255,255,.12); }
.ust.kaydi .menu-dugme { color: var(--lacivert); background: var(--zemin-2); border-color: var(--kenar); }
.ust.acik .menu-dugme i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ust.acik .menu-dugme i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.ust.acik .menu-dugme i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menü paneli: masaüstünde sağa dayalı cam kutu, mobilde tam genişlik */
.menu-panel { display: none; position: absolute; right: max(16px, (100% - 1320px) / 2); top: calc(100% + 10px); min-width: 240px; padding: .5rem; border-radius: 18px; background: rgba(12, 31, 49, .78); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); z-index: 60; }
.ust.acik .menu-panel { display: block; animation: panel-gel .28s var(--egri) both; }
@keyframes panel-gel { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.menu-panel > a { display: block; padding: .7rem 1rem; border-radius: 12px; color: #fff; font-weight: 600; font-size: .95rem; transition: background .2s; }
.menu-panel > a:hover { background: rgba(255,255,255,.1); }
.menu-panel > a.aktif { background: rgba(125, 201, 78, .18); color: var(--yesil-neon); }
.ust.kaydi .menu-panel { background: rgba(255,255,255,.92); border-color: var(--kenar); box-shadow: 0 24px 60px rgba(17,42,67,.18); }
.ust.kaydi .menu-panel > a { color: var(--metin); }
.ust.kaydi .menu-panel > a:hover { background: var(--zemin-2); }
.ust.kaydi .menu-panel > a.aktif { background: rgba(95,165,36,.12); color: var(--yesil-koyu); }
.menu-urunler { display: none; }

@media (max-width: 900px) {
  .ust nav.ana-nav, .ust.acik nav.ana-nav { display: none; }
  .ust .ust-sag a.dugme.teklif { padding: .5rem .9rem; font-size: .84rem; }
  .menu-panel { left: 16px; right: 16px; top: calc(100% + 8px); padding: .6rem; background: rgba(12, 31, 49, .93); }
  .ust.kaydi .menu-panel { background: rgba(255,255,255,.97); }
  .menu-urunler { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem .3rem .6rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .menu-urunler b { grid-column: 1 / -1; font-size: .7rem; letter-spacing: .16em;  color: var(--soluk); padding: .3rem .7rem 0; }
  .menu-urunler a { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem .8rem; border-radius: 12px; color: #fff; font-weight: 600; font-size: .92rem; }
  .menu-urunler a svg { width: 18px; height: 18px; }
  .menu-urunler a.aktif { background: rgba(125,201,78,.18); color: var(--yesil-neon); }
  .ust.kaydi .menu-urunler { border-bottom-color: var(--kenar); }
  .ust.kaydi .menu-urunler a { color: var(--metin); }
  .ust.kaydi .menu-urunler a.aktif { background: rgba(95,165,36,.12); color: var(--yesil-koyu); }
  .ust .logo.marka-ust { --lh: 30px; }
}
@media (max-width: 420px) { .ust .ust-sag a.dugme.teklif { display: none; } }

/* --- Kulak animasyonu: amblem katmanları (maske + renk) ---
   Katmanlar: img/marka/kulak/*.png (alfa maskesi). Renk CSS'ten gelir:
   koyu zeminde beyaz (dişi), açık zeminde lacivert; P yeşile "dolar". */
.ust { --amblem-renk: #fff; --amblem-yesil: #4E8920; }
.ust.kaydi { --amblem-renk: var(--lacivert); }
.kulak-anim { position: relative; display: block; }
.kulak-anim .s-grup, .kulak-anim .p-grup, .kulak-anim .k-dik, .kulak-anim .k-kulak { position: absolute; inset: 0; display: block; }
.kulak-anim .k { position: absolute; inset: 0; display: block; background: var(--amblem-renk); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: background .3s; }
.kulak-anim .k.s_kulak { -webkit-mask-image: url(../img/marka/kulak/s_kulak-beyaz.png); mask-image: url(../img/marka/kulak/s_kulak-beyaz.png); }
.kulak-anim .k.burun { -webkit-mask-image: url(../img/marka/kulak/burun-beyaz.png); mask-image: url(../img/marka/kulak/burun-beyaz.png); }
.kulak-anim .k.p_goz { -webkit-mask-image: url(../img/marka/kulak/p_goz-beyaz.png); mask-image: url(../img/marka/kulak/p_goz-beyaz.png); }
.kulak-anim .k.p_dik { -webkit-mask-image: url(../img/marka/kulak/p_dik-yesil.png); mask-image: url(../img/marka/kulak/p_dik-yesil.png); }
.kulak-anim .k.p_kulak { -webkit-mask-image: url(../img/marka/kulak/p_kulak-yesil.png); mask-image: url(../img/marka/kulak/p_kulak-yesil.png); }
.kulak-anim .k.yesil { background: var(--amblem-yesil); clip-path: inset(4% 0 0 0); }
/* Kulak pivotu: kıvrımın kafayla birleştiği nokta (540x349 kanvasta 351,112) */
.kulak-anim .k-kulak { transform-origin: 65% 32.1%; }
/* Giriş: S soldan, P sağdan; sonra kulak sallanır ve yeşile dolar; parıltı */
.ust .logo.marka-ust .s-grup { animation: gelS-ust 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.ust .logo.marka-ust .p-grup { animation: gelP-ust 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.ust .logo.marka-ust .k-kulak { animation: kulak-salla .62s cubic-bezier(.4, 0, .2, 1) 1.45s both; }
.ust .logo.marka-ust .k.yesil { animation: kulak-dol .7s cubic-bezier(.22, 1, .36, 1) 1.7s both; }
.ust .logo.marka-ust .amblem::after { animation-delay: 1.85s; }
/* Üstüne gelince yalnız kulak oynar (renk sabit) */
.ust .logo.marka-ust.salla .k-kulak { animation: kulak-salla .62s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes kulak-salla { 0% { transform: skewY(0); } 18% { transform: skewY(-10deg); } 40% { transform: skewY(8deg); } 62% { transform: skewY(-5deg); } 82% { transform: skewY(3deg); } 100% { transform: skewY(0); } }
@keyframes kulak-dol { from { clip-path: inset(81% 0 0 0); } to { clip-path: inset(4% 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .ust .logo.marka-ust .s-grup, .ust .logo.marka-ust .p-grup, .ust .logo.marka-ust .k-kulak, .ust .logo.marka-ust .k.yesil, .ust .logo.marka-ust.salla .k-kulak { animation: none; transform: none; } .kulak-anim .k.yesil { clip-path: inset(4% 0 0 0); } }

/* --- Hero slider --- */
.hero.hero-slider { position: relative; margin-top: -70px; padding: 0; min-height: min(100svh, 920px); display: grid; align-items: stretch; background: var(--lacivert-koyu); }
.hero-arka { position: absolute; inset: 0; overflow: hidden; }
.hero-arka picture, .hero-arka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-arka img { animation: hero-nefes 22s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes hero-nefes { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-perde { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,22,36,.94) 0%, rgba(8,22,36,.84) 34%, rgba(8,22,36,.52) 62%, rgba(8,22,36,.36) 100%), linear-gradient(180deg, rgba(8,22,36,.55) 0%, rgba(8,22,36,0) 28%, rgba(8,22,36,0) 70%, var(--lacivert-koyu) 100%); }
.slaytlar { position: relative; z-index: 1; display: grid; }
.slayt { grid-area: 1 / 1; display: grid; align-items: center; padding: 130px 0 110px; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .7s var(--egri), transform .7s var(--egri), visibility 0s .7s; }
.slayt.aktif { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--egri), transform .7s var(--egri), visibility 0s; }
.slayt.cikis { transform: translateX(-40px); }
.slayt .ic { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.slayt h1 { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-weight: 800; font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; color: #fff; max-width: 14ch; margin-bottom: 1.2rem; text-wrap: balance; }
.slayt .daktilo { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--metin-acik); max-width: 52ch; min-height: 3lh; margin: 0; }
.slayt .daktilo .imlec { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--yesil-neon); animation: imlec-yan 1s steps(2, start) infinite; }
@keyframes imlec-yan { to { visibility: hidden; } }
.slayt .dugmeler { margin-top: 1.9rem; }
.slayt .dugme-acik { border-color: rgba(255,255,255,.35); }

/* Cam panel: iOS tarzı — arkadaki fotoğraf silinmez, öndeki öğeler okunur kalır */
.cam { position: relative; border-radius: 26px; padding: clamp(1rem, 1.6vw, 1.5rem); background: linear-gradient(160deg, rgba(20,44,68,.46), rgba(10,27,44,.58)); backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%); border: 1px solid rgba(255,255,255,.17); box-shadow: 0 40px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2); }
.cam::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.10), transparent 60%); pointer-events: none; }
.cam-baslik { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .2rem .3rem 1rem; }
.cam-baslik b { font-size: .82rem; font-weight: 700; color: #fff; }
.cam-baslik span { font-size: .78rem; color: var(--soluk); }
.cam-baslik i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--yesil-neon); margin-right: .45rem; box-shadow: 0 0 0 0 rgba(155,225,93,.6); animation: ipucu-halka 2.4s ease-out infinite; vertical-align: 1px; }

/* Sistem diyagramı */
.sistem { width: 100%; height: auto; display: block; font-family: Inter, system-ui, sans-serif; }
.sistem .izgara-nokta { fill: rgba(255,255,255,.07); }
.sistem .yol { fill: none; stroke-width: 2.2; stroke-linecap: round; marker-end: url(#s-ok); transition: opacity .35s, stroke-width .35s; }
.sistem .yol.ana { stroke: rgba(155,225,93,.55); color: rgba(155,225,93,.95); stroke-dasharray: 9 7; animation: yol-ak 1.2s linear infinite; }
.sistem .yol.geri { stroke: rgba(122,178,255,.5); color: rgba(122,178,255,.95); stroke-dasharray: 3 8; animation: yol-ak 1.6s linear infinite reverse; }
.sistem .yol-etiket { fill: #BFD0E0; font-size: 12.5px; font-weight: 500; text-anchor: middle; transition: opacity .35s; }
.sistem .paket { transition: opacity .35s; }
.sistem .paket.yesil { fill: #9BE15D; filter: url(#s-isik); }
.sistem .paket.mavi { fill: #7AB2FF; filter: url(#s-isik); }
.sistem .dugum { cursor: pointer; }
.sistem .dugum rect.govde { fill: rgba(17,42,67,.72); stroke: rgba(255,255,255,.2); stroke-width: 1.2; transition: stroke .35s, fill .35s; }
.sistem .dugum rect.ust-cizgi { fill: rgba(255,255,255,.14); transition: fill .35s; }
.sistem .dugum .ikon { color: #BFD0E0; transition: color .35s; }
.sistem .dugum .ad { fill: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sistem .dugum .alt { fill: #9FB4C9; font-size: 10.5px; font-weight: 600; letter-spacing: .1em;  }
.sistem .dugum .halka { fill: none; stroke: var(--yesil-neon); stroke-width: 1.5; opacity: 0; transition: opacity .35s; transform-box: fill-box; transform-origin: center; }
.sistem .dugum.aktif rect.govde { stroke: rgba(155,225,93,.9); fill: rgba(27,64,100,.85); }
.sistem .dugum.aktif rect.ust-cizgi { fill: var(--yesil-neon); }
.sistem .dugum.aktif .ikon { color: var(--yesil-neon); }
.sistem .dugum.aktif .halka { opacity: 1; animation: halka-yay 2.4s ease-out infinite; }
@keyframes halka-yay { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
.sistem.odak .yol:not(.ilgili), .sistem.odak .yol-etiket:not(.ilgili), .sistem.odak .paket:not(.ilgili) { opacity: .22; }
.sistem.odak .yol.ilgili { stroke-width: 3; }

/* Akış lejantı: yalnız mobilde (etiketler SVG'de sığmıyor) */
.akis-lejant { display: none; grid-template-columns: 1fr; gap: .3rem; margin: .8rem .2rem 0; padding: 0; list-style: none; font-size: .8rem; color: var(--metin-acik); }
.akis-lejant li { display: flex; align-items: baseline; gap: .5rem; }
.akis-lejant li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9BE15D; transform: translateY(-1px); }
.akis-lejant li.geri::before { background: #7AB2FF; }
.akis-lejant b { font-weight: 700; color: #fff; }

/* Program seçim hapları (4 program) */
.programlar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.program { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--metin-acik); border-radius: 999px; padding: .5rem 1rem .5rem .8rem; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.program i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .2s; }
.program:hover { background: rgba(255,255,255,.12); }
.program.aktif { background: rgba(155,225,93,.14); color: #fff; border-color: rgba(155,225,93,.5); }
.program.aktif i { background: var(--yesil-neon); box-shadow: 0 0 10px rgba(155,225,93,.8); }
.program::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--yesil-neon); transform: scaleX(0); transform-origin: left; }
.program.aktif::after { animation: sekme-dol var(--sure, 3600ms) linear forwards; }
.cam.duraklat .program.aktif::after { animation-play-state: paused; }

/* Slayt gezinme */
.slayt-nav { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; pointer-events: none; }
.slayt-nav .ic { display: flex; align-items: center; gap: 1rem; }
.slayt-noktalar { display: flex; gap: .45rem; pointer-events: auto; }
.slayt-nokta { position: relative; height: 34px; padding: 0 .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(10,27,44,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--soluk); font-size: .74rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.slayt-nokta:hover { color: #fff; }
.slayt-nokta.aktif { color: #fff; border-color: rgba(155,225,93,.6); background: rgba(155,225,93,.14); }
.slayt-nokta.aktif::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--yesil-neon); margin-right: .45rem; vertical-align: 1px; }
.slayt-oklar { display: flex; gap: .4rem; margin-left: auto; pointer-events: auto; }
.slayt-ok { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,27,44,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.slayt-ok:hover { background: rgba(255,255,255,.14); }
.slayt-ok svg { width: 18px; height: 18px; }
.hero-slider .kaydir-ipucu { display: none; }

/* Yer tutucu slaytlar (2–5): ürün logoları onaylanınca tasarlanacak */
.slayt.tutucu .ic { grid-template-columns: 1fr; text-align: left; }
.slayt.tutucu .tutucu-kutu { max-width: 560px; padding: 1.4rem 1.6rem; border-radius: 20px; border: 1px dashed rgba(255,255,255,.3); background: rgba(10,27,44,.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.slayt.tutucu .tutucu-kutu b { display: block; color: #fff; font-size: 1.4rem; margin-bottom: .3rem; }
.slayt.tutucu .tutucu-kutu p { margin: 0; color: var(--soluk); }

@media (max-width: 1100px) {
  .slayt .ic { grid-template-columns: 1fr; gap: 2rem; }
  .slayt h1 { max-width: 18ch; }
  .cam { max-width: 720px; }
}
@media (max-width: 900px) {
  .hero.hero-slider { min-height: 0; }
  .slayt { padding: 110px 0 96px; }
  .slayt .daktilo { min-height: 4lh; }
  .sistem .yol-etiket { font-size: 15px; }
  .slayt-nav { bottom: 26px; }
  .slayt-nokta { padding: 0 .55rem; font-size: .68rem; height: 30px; }
}
@media (max-width: 600px) {
  .slayt { padding: 100px 0 96px; }
  .slayt h1 { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
  .sistem .yol-etiket { display: none; }
  .sistem .dugum .ad { font-size: 24px; } .sistem .dugum .alt { font-size: 13px; }
  .akis-lejant { display: grid; }
  .cam-baslik { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .programlar { gap: .35rem; }
  .program { padding: .42rem .8rem .42rem .7rem; font-size: .8rem; }
  .slayt-noktalar { gap: .3rem; }
  .slayt-nokta span { display: none; }
  .slayt-nokta { width: 30px; padding: 0; }
  .slayt-nokta.aktif::before { margin-right: .35rem; }
  .slayt-nokta.aktif { width: auto; padding: 0 .6rem; white-space: nowrap; }
  .slayt-nokta.aktif span { display: inline; }
  .hero-arka img { object-position: 56% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-arka img, .cam-baslik i, .sistem .yol, .sistem .dugum.aktif .halka, .program.aktif::after, .slayt .daktilo .imlec { animation: none; }
  .slayt { transition: none; }
}

/* --- Ürün slaytları (2–5): yüzen parçalar kaydırınca aşağıdaki ürün kartına iner --- */
.hero.hero-slider { overflow: visible; }
.slayt .urun-rozet { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem .4rem .7rem; border-radius: 999px; border: 1px solid rgba(155,225,93,.45); background: rgba(95,165,36,.14); color: var(--yesil-neon); font-size: .8rem; font-weight: 700; letter-spacing: .06em; margin-bottom: 1.1rem; }
.slayt .urun-rozet svg { width: 16px; height: 16px; }
.slayt .giris { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--metin-acik); max-width: 46ch; margin: 0; }
.ucan-sahne { position: relative; aspect-ratio: 5 / 4; }
.ucan { position: absolute; will-change: transform; transform-origin: 0 0; transform: rotate(var(--egim, 0deg)); }
.ucan-ekran { left: 4%; top: 6%; width: 92%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14); background: #0d1f31; }
.ucan-ekran img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.ucan-cip { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 16px; background: rgba(255,255,255,.94); color: var(--lacivert); font-weight: 700; font-size: .9rem; box-shadow: 0 20px 50px rgba(0,0,0,.4); white-space: nowrap; }
.ucan-cip .ikon { width: 36px; height: 36px; border-radius: 10px; background: #E3EDD9; color: var(--yesil-koyu); display: grid; place-items: center; flex: none; }
.ucan-cip .ikon svg { width: 18px; height: 18px; }
.ucan-cip small { display: block; font-weight: 600; color: var(--gri); font-size: .72rem; letter-spacing: .04em; }
.ucan-cip b { display: block; font-size: .95rem; line-height: 1.1; }
.ucan-cip svg { width: 16px; height: 16px; }
.cip-rol { left: -6%; top: 62%; }
.cip-ok { right: -2%; bottom: 4%; color: var(--yesil-koyu); }
.ucan.indi { opacity: 0; }
.ucan.olcum { transform: none !important; transition: none !important; }
@media (max-width: 1100px) { .ucan-sahne { width: 100%; max-width: 640px; margin-inline: auto; } }
@media (max-width: 600px) { .ucan-cip { display: none; } .ucan-sahne { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .ucan { transform: none !important; } }

/* ============================================================
   REVİZYON TURU 2 (24 Eyl 2026, akşam) — Mustafa'nın maddeleri
   ============================================================ */

/* --- Üst çubuk: parıltı yok; kulak sallama JS zamanlayıcısıyla (3,5 sn sonra, 10 sn'de bir) --- */
.ust .logo.marka-ust .amblem::after { display: none; }
.ust .logo.marka-ust .k-kulak { animation: none; }
.ust .logo.marka-ust .k.yesil { animation: kulak-dol .7s cubic-bezier(.22, 1, .36, 1) 1.5s both; }
.ust .logo.marka-ust.salla .k-kulak { animation: kulak-salla .62s cubic-bezier(.4, 0, .2, 1) both; }

/* Mobil: ürün grubu çubukta kalır (≤600 yalnız ikon), hamburger en sağda, Teklif panele iner */
.menu-panel .teklif-panel { display: none; }
@media (max-width: 900px) {
  .ust nav.ana-nav, .ust.acik nav.ana-nav { display: flex; position: static; flex-direction: row; align-items: center; width: auto; background: none; border: 0; padding: 0; margin: 0 .4rem 0 auto; gap: 0; }
  .ust nav .urun-grubu { flex-direction: row; align-items: center; padding: .2rem .25rem; margin: 0; border-radius: 999px; }
  .ust nav .urun-grubu i { top: -9px; }
  .ust nav .urun-grubu a { padding: .45rem .55rem .45rem .5rem; font-size: .8rem; gap: .3rem; }
  .ust nav .urun-grubu a svg { width: 16px; height: 16px; }
  .ust .ust-sag a.dugme.teklif { display: none; }
  .ust-sag { margin-left: 0; }
  .menu-panel > a.dugme.teklif-panel { display: inline-flex; padding: 6px 22px 6px 56px; margin: .4rem .5rem .3rem; border-radius: 999px; }
  .ust .ic { gap: .6rem; }
}
@media (max-width: 600px) {
  .slayt h1.slogan-v { max-width: none; }
  .ust nav .urun-grubu a span { display: none; }
  .ust nav .urun-grubu a { padding: .5rem .5rem; }
  .ust nav .urun-grubu i { display: none; }
  .ust .logo.marka-ust { --lh: 28px; }
  .ust .logo.marka-ust .yazi-kutu { display: none; }
}

/* --- Düğme sistemi (makro tarzı, SürüPlan kimliğiyle): lacivert hap + yeşil ok kutusu;
       üstüne gelince yeşil soldan sağa kaplar, ok sağ uca kayar, yazı laciverte döner --- */
.dugme { position: relative; overflow: hidden; isolation: isolate; gap: 0; padding: 6px 22px 6px 56px; min-height: 52px; border-radius: 999px; border: 1px solid transparent; background: var(--lacivert); color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.1; box-shadow: 0 10px 26px rgba(17, 42, 67, .28); transition: padding .5s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, transform .25s; }
.dugme::before { content: ""; position: absolute; z-index: 0; left: 5px; top: 5px; bottom: 5px; width: 40px; border-radius: 15px; background: var(--yesil-acik); transition: width .5s cubic-bezier(.22, 1, .36, 1), left .5s cubic-bezier(.22, 1, .36, 1), top .5s, bottom .5s, border-radius .5s; }
.dugme .ok { position: absolute; z-index: 1; left: 5px; top: 5px; width: 40px; height: calc(100% - 10px); display: grid; place-items: center; color: var(--lacivert); transition: left .5s cubic-bezier(.22, 1, .36, 1); }
.dugme .ok svg { width: 18px; height: 18px; }
.dugme .metin { position: relative; z-index: 1; transition: color .3s; white-space: nowrap; }
.dugme:hover { transform: none; padding: 6px 56px 6px 22px; box-shadow: 0 14px 30px rgba(95, 165, 36, .35); }
.dugme:hover::before { left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; }
.dugme:hover .ok { left: calc(100% - 45px); }
.dugme:hover .metin { color: var(--lacivert); }
.dugme:focus-visible { outline: 2px solid var(--yesil-neon); outline-offset: 3px; }
.dugme-yesil, .dugme-yesil:hover { background: var(--lacivert); color: #fff; }
.dugme-acik { background: rgba(10, 27, 44, .45); border-color: rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: none; }
.dugme-acik:hover { background: rgba(10, 27, 44, .45); }
.dugme-cerceve { background: #fff; border-color: var(--kenar); color: var(--metin); box-shadow: 0 6px 18px rgba(17, 42, 67, .08); }
.dugme-cerceve:hover { border-color: transparent; }
.koyu .dugme-yesil { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.dugme.kucuk, .ust .ust-sag a.dugme.teklif { min-height: 42px; padding: 4px 16px 4px 46px; font-size: .9rem; }
.dugme.kucuk::before, .ust .ust-sag a.dugme.teklif::before { left: 4px; top: 4px; bottom: 4px; width: 34px; }
.dugme.kucuk .ok, .ust .ust-sag a.dugme.teklif .ok { left: 4px; top: 4px; width: 34px; }
.dugme.kucuk:hover, .ust .ust-sag a.dugme.teklif:hover { padding: 4px 46px 4px 16px; }
.dugme.kucuk:hover .ok, .ust .ust-sag a.dugme.teklif:hover .ok { left: calc(100% - 38px); }
.ust.kaydi .ust-sag a.dugme.teklif { background: var(--lacivert); }
.hero .dugmeler .dugme, .slayt .dugmeler .dugme { min-height: 54px; }
@media (max-width: 480px) { .dugme { justify-content: flex-start; } .hero .dugmeler .dugme { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .dugme, .dugme::before, .dugme .ok, .dugme .metin { transition: none; } }

/* --- Hero slayt 1: etiket, başlık varyantları, düğmeler mobilde panelin altında --- */
.slayt .ic { grid-template-areas: "metin cam" "dugmeler cam"; grid-template-rows: auto 1fr; align-items: center; }
.slayt .metin { grid-area: metin; align-self: end; }
.slayt .cam, .slayt .ucan-sahne { grid-area: cam; }
.slayt .dugmeler { grid-area: dugmeler; align-self: start; margin-top: 1.6rem; }
.slayt .etiket { color: var(--yesil-neon); margin-bottom: 1rem; }
.slayt .etiket::before { background: var(--yesil-neon); }
.slayt h1.slogan-v { font-weight: 800; max-width: 15ch; }
.slayt h1.slogan-v em { font-style: normal; }
/* A (varsayılan): ilk satır beyaz kalın, ikinci satır yeşil kalın */
.slayt h1.slogan-v .k3 { color: var(--yesil-neon); }
/* B: "Çiftliğiniz" ince beyaz, gerisi kalın; ikinci satır yeşil */
.baslik-b .slayt h1.slogan-v .k1 { font-weight: 300; }
/* C: tümü beyaz normal ağırlık; "hâkim," ve "hazır." yeşil kalın */
.baslik-c .slayt h1.slogan-v { font-weight: 400; }
.baslik-c .slayt h1.slogan-v .k3 { color: #fff; }
.baslik-c .slayt h1.slogan-v em { font-weight: 800; color: var(--yesil-neon); }
/* D: ilk satır ince beyaz, ikinci satır kalın beyaz; yalnız "hazır." yeşil */
.baslik-d .slayt h1.slogan-v { font-weight: 300; }
.baslik-d .slayt h1.slogan-v .k3 { font-weight: 800; color: #fff; }
.baslik-d .slayt h1.slogan-v .k3 em { color: var(--yesil-neon); }
@media (max-width: 1100px) {
  .slayt .ic { grid-template-areas: "metin" "cam" "dugmeler"; grid-template-rows: auto auto auto; }
  .slayt .dugmeler { margin-top: .4rem; }
}

/* --- Mobil diyagram: etiketler SVG'nin içinde, iki satır --- */
.sistem .yol-etiket.m { display: none; }
@media (max-width: 600px) {
  .sistem .yol-etiket.d { display: none; }
  .sistem .yol-etiket.m { display: block; font-size: 17px; }
  .sistem .dugum .ad { font-size: 22px; } .sistem .dugum .alt { font-size: 12px; }
  .cam-baslik { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* --- Slayt 2–5: cihaz çerçevesi + vitrin kartı, 3B açı (açı.png referansı: yatay eksende döner, arkada katman yankıları) --- */
.ucan-sahne { perspective: 1400px; aspect-ratio: 5 / 4; }
.ucan-cihaz { left: 6%; top: 4%; width: 90%; transform-origin: 0 0; transform: rotateY(-24deg) rotateX(5deg); transform-style: preserve-3d; }
.ucan-cihaz .cihaz { box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); }
.ucan-cihaz .cihaz img { cursor: default; }
.ucan-cihaz .yanki { position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(17,42,67,.55); transform: translateZ(-70px) translateX(26px); opacity: var(--yanki, 1); }
.ucan-cihaz .yanki.y2 { transform: translateZ(-140px) translateX(52px); background: rgba(17,42,67,.4); }
.ucan-cihaz.indi .yanki { opacity: 0; }
/* Vitrin kartı = alttaki bilgi kartının kendisi (.aile-bilgi sınıfı, aynı işaretleme; 11 Eki 2026). Görünen genişlik buradan,
   gerçek genişlik JS'te hedef kartla eşitlenir ve taban ölçeğiyle küçültülür → satır kırılımı aynı, iniş birebir. */
.ucan-kart { left: -4%; bottom: -2%; width: min(340px, 76%); }
.ucan.indi { opacity: 0; transition: opacity .25s; }
@media (max-width: 1100px) { .ucan-kart { left: 0; } }
@media (max-width: 600px) { .ucan-sahne { aspect-ratio: 5 / 4; } .ucan-cihaz { left: 4%; width: 92%; } .ucan-kart { width: min(300px, 82%); bottom: 10%; } }
@media (prefers-reduced-motion: reduce) { .ucan-cihaz, .ucan-kart { transform: none !important; } }

/* ============================================================
   REVİZYON TURU 3 (24 Eyl 2026, gece) — Mustafa'nın maddeleri
   ============================================================ */

/* --- Tipografi: ana başlıklar Georgia Regular, vurgu yeşil italik; Inter geri kalanda --- */
h1, h2, .slayt h1 { font-family: Georgia, "Times New Roman", "Iowan Old Style", serif; font-weight: 400; letter-spacing: -.012em; line-height: 1.06; }
h1 em, h2 em, .slayt h1 em { font-style: italic; font-weight: 400; color: var(--yesil-neon); }
.acik-zemin h2 em, section.bolum:not(.koyu) h2 em { color: var(--yesil-koyu); }
.vurgu { font-style: italic; }
.slayt h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); max-width: 16ch; }
.slayt h1.slogan-v .k3 { color: inherit; }

/* --- Daktilo: hız ayarları JS'te (harf 19–34 ms; ; 0,8 sn · , 0,4 sn · . 2 sn) --- */

/* --- Düğmeler: daha az yuvarlak (buttons.mov), daha ince yazı, dikeyde ortalı --- */
.dugme { border-radius: 18px; font-weight: 500; line-height: 1; height: 52px; min-height: 0; padding: 0 22px 0 56px; align-items: center; }
.dugme::before { border-radius: 12px; }
.dugme:hover { padding: 0 56px 0 22px; }
.dugme:hover::before { border-radius: 18px; }
.dugme .ok { border-radius: 12px; }
.dugme .metin { line-height: 1; padding-bottom: 1px; }
.dugme.kucuk, .ust .ust-sag a.dugme.teklif { height: 42px; padding: 0 16px 0 46px; border-radius: 14px; }
.dugme.kucuk::before, .ust .ust-sag a.dugme.teklif::before { border-radius: 10px; }
.dugme.kucuk:hover, .ust .ust-sag a.dugme.teklif:hover { padding: 0 46px 0 16px; }
.dugme.kucuk:hover::before, .ust .ust-sag a.dugme.teklif:hover::before { border-radius: 14px; }
.menu-panel > a.dugme.teklif-panel { padding: 0 22px 0 56px; border-radius: 18px; }
.hero .dugmeler .dugme, .slayt .dugmeler .dugme { height: 54px; min-height: 0; }
@media (max-width: 480px) { .hero .dugmeler .dugme { width: 100%; } }

/* --- Diyagram etiketleri: düz, iki satır, çizgiye ortalı; arkasında hale --- */
.sistem .yol-etiket { font-size: 12px; font-weight: 500; fill: #D3E0EC; paint-order: stroke fill; stroke: rgba(14, 33, 53, .92); stroke-width: 7px; stroke-linejoin: round; text-anchor: middle; }
.sistem .yol-etiket.m, .sistem .yol-etiket.d { display: block; }
@media (max-width: 600px) { .sistem .yol-etiket { font-size: 16px; stroke-width: 9px; } }

/* --- Ürün ailesi (bungee.framer.website formu): yatay ray, kadrajdan taşan kartlar --- */
section.bolum.aile { padding: 90px 0 100px; overflow: hidden; }
.aile-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; }
.aile-baslik h2 { margin: 0; max-width: 20ch; }
.aile-baslik .etiket { margin-bottom: .6rem; }
.aile-link { display: inline-flex; align-items: center; gap: .6rem; color: var(--metin); font-weight: 600; font-size: .95rem; white-space: nowrap; padding-bottom: .3rem; border-bottom: 1px solid var(--kenar); }
.aile-link b { font-weight: 400; font-size: 1.2rem; line-height: 1; }
.aile-link:hover { border-color: var(--lacivert); }
.aile-kaydirak { position: relative; }
.aile-ray { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(16px, (100vw - var(--genislik)) / 2) 2.5rem; cursor: grab; scroll-behavior: smooth; }
.aile-ray::-webkit-scrollbar { display: none; }
.aile-ray.surukle { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.aile-kart { position: relative; flex: 0 0 auto; width: min(470px, 84vw); border-radius: 28px; padding: 1.5rem 1.6rem 1.6rem; scroll-snap-align: start; background: linear-gradient(160deg, var(--ton) 0%, var(--ton2) 100%); display: grid; grid-template-rows: auto 1fr auto; gap: 1.2rem; min-height: 560px; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
.aile-ust { display: flex; justify-content: space-between; align-items: center; }
.aile-no { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; letter-spacing: .12em; color: var(--gri); }
.aile-ad { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--lacivert); letter-spacing: .02em; }
.aile-ad svg { width: 16px; height: 16px; color: var(--yesil-koyu); }
.aile-orta { display: grid; place-items: center; perspective: 1100px; padding: .4rem 0; }
.aile-ekran { width: 92%; transform: rotateX(7deg) translateY(0); transform-origin: 50% 100%; filter: drop-shadow(0 34px 34px rgba(17,42,67,.22)) drop-shadow(0 10px 14px rgba(17,42,67,.16)) drop-shadow(0 2px 3px rgba(17,42,67,.12)); transition: transform .6s var(--egri), filter .6s var(--egri); }
.aile-kart:hover .aile-ekran { transform: rotateX(3deg) translateY(-8px); filter: drop-shadow(0 44px 44px rgba(17,42,67,.24)) drop-shadow(0 12px 16px rgba(17,42,67,.16)) drop-shadow(0 2px 3px rgba(17,42,67,.12)); }
.aile-ekran .cihaz { box-shadow: none; border-color: rgba(17,42,67,.12); }
.aile-ekran .cihaz img { cursor: zoom-in; }
.aile-alt h3 { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 1.15rem; line-height: 1.3; margin: 0 0 .4rem; color: var(--lacivert); max-width: 30ch; }
.aile-alt p { font-size: .92rem; color: var(--gri); margin: 0 0 .8rem; max-width: 42ch; }
.aile-git { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--lacivert); border-bottom: 2px solid rgba(17,42,67,.15); padding-bottom: .15rem; }
.aile-git svg { width: 15px; height: 15px; }
.aile-git:hover { border-color: var(--yesil); }
.aile-ok { position: absolute; top: 50%; transform: translateY(-60%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--kenar); background: rgba(255,255,255,.92); color: var(--lacivert); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 26px rgba(17,42,67,.16); z-index: 2; transition: opacity .25s, background .2s; backdrop-filter: blur(8px); }
.aile-ok svg { width: 20px; height: 20px; }
.aile-ok:hover { background: #fff; }
.aile-ok.geri { left: max(8px, (100vw - var(--genislik)) / 2 - 23px); }
.aile-ok.ileri { right: max(8px, (100vw - var(--genislik)) / 2 - 23px); }
.aile-ok[disabled] { opacity: .35; cursor: default; }
@media (max-width: 900px) {
  section.bolum.aile { padding: 64px 0 72px; }
  .aile-baslik { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .aile-kart { min-height: 0; width: min(420px, 84vw); padding: 1.2rem 1.3rem 1.3rem; border-radius: 22px; }
  .aile-ok { display: none; }
}
@media (prefers-reduced-motion: reduce) { .aile-ekran, .aile-kart:hover .aile-ekran { transition: none; transform: none; } .aile-ray { scroll-behavior: auto; } }

/* ============================================================
   REVİZYON TURU 4 (25 Eyl 2026) — Mustafa'nın maddeleri
   ============================================================ */

/* --- Düğme: yazı okla aynı hizada (dikeyde ortalı, motor bağımsız), yeşil hale yok, kayma transform ile --- */
.dugme { display: inline-flex; align-items: stretch; padding: 0 40px 0 56px; transition: box-shadow .3s; box-shadow: 0 10px 26px rgba(17, 42, 67, .22); }
.dugme .metin { display: inline-flex; align-items: center; height: 100%; line-height: 1.15; padding: 0; transform: translateX(0); transition: color .3s, transform .5s cubic-bezier(.22, 1, .36, 1); }
.dugme:hover { padding: 0 40px 0 56px; box-shadow: 0 10px 26px rgba(17, 42, 67, .22); }
.dugme:hover .metin { transform: translateX(-16px); }
.koyu .dugme-yesil, .koyu .dugme-yesil:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.dugme-acik, .dugme-acik:hover { box-shadow: none; }
.dugme.kucuk, .ust .ust-sag a.dugme.teklif { padding: 0 30px 0 46px; }
.dugme.kucuk:hover, .ust .ust-sag a.dugme.teklif:hover { padding: 0 30px 0 46px; }
.dugme.kucuk:hover .metin, .ust .ust-sag a.dugme.teklif:hover .metin { transform: translateX(-14px); }
.menu-panel > a.dugme.teklif-panel { padding: 0 40px 0 56px; }
.dugme::before { transition: width .5s cubic-bezier(.22, 1, .36, 1), left .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s; }

/* --- Ürün ailesi: ekran görüntüleri açısız; iki görsel (ana + ikinci) bulut düzeninde; altta vitrin paneli --- */
.aile-orta { position: relative; display: block; perspective: none; padding: 0; aspect-ratio: 16 / 11; }
.aile-ekran, .aile-ekran2 { position: absolute; transform: none !important; filter: drop-shadow(0 26px 30px rgba(17,42,67,.20)) drop-shadow(0 8px 12px rgba(17,42,67,.14)) drop-shadow(0 2px 3px rgba(17,42,67,.10)); }
.aile-ekran { left: 0; top: 0; width: 82%; }
.aile-ekran2 { right: 0; bottom: 0; width: 54%; z-index: 1; }
.aile-kart:hover .aile-ekran { transform: none !important; }
.aile-ekran2 .cihaz { box-shadow: none; border-color: rgba(17,42,67,.12); }
.aile-alt { background: #F3F6EE; border-radius: 18px; padding: 1.1rem 1.2rem; display: grid; gap: .3rem; box-shadow: 0 10px 26px rgba(17,42,67,.10); }
.aile-alt .ust-satir { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.aile-alt .ikon { width: 40px; height: 40px; border-radius: 10px; background: #E3EDD9; color: var(--yesil-koyu); display: grid; place-items: center; }
.aile-alt .ikon svg { width: 20px; height: 20px; }
.aile-alt .no { font-size: .78rem; color: var(--gri); font-weight: 600; }
.aile-alt .rozet { font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: var(--yesil-koyu); }
.aile-alt h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.aile-alt p { font-size: .88rem; margin: 0 0 .5rem; }
.aile-kart { gap: 1rem; }

/* --- Hero slayt 2–5: ikinci yüzen cihaz --- */
.ucan-cihaz { left: 4%; top: 0; width: 84%; }
.ucan-cihaz2 { right: -3%; bottom: 14%; width: 52%; transform-origin: 0 0; transform: rotateY(-18deg) rotateX(4deg); z-index: 2; }
.ucan-cihaz2 .cihaz { box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14); }
.ucan-cihaz2 .cihaz img { cursor: default; }
.ucan-kart { z-index: 3; }
@media (max-width: 600px) { .ucan-cihaz2 { right: 0; bottom: 30%; } .ucan-kart { bottom: 4%; } }
@media (prefers-reduced-motion: reduce) { .ucan-cihaz2 { transform: none !important; } }
/* Küçük düğme (üst çubuk Teklif): hover yayılması özgüllük yüzünden uygulanmıyordu → yazı lacivert zeminde kayboluyordu */
.dugme.kucuk:hover::before, .ust .ust-sag a.dugme.teklif:hover::before, .menu-panel > a.dugme.teklif-panel:hover::before { left: 0; top: 0; bottom: 0; width: 100%; border-radius: 14px; }
.menu-panel > a.dugme.teklif-panel:hover::before { border-radius: 18px; }

/* ============================================================
   REVİZYON TURU 5 (25 Eyl 2026) — Mustafa'nın maddeleri
   ============================================================ */

/* --- Slayt 2–5: ürüne özel arka plan (üç boyut) --- */
.slayt { position: relative; }
.slayt-arka { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.slayt-arka picture, .slayt-arka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.slayt-arka .hero-perde { position: absolute; inset: 0; }
.slaytlar { isolation: isolate; }
.hero.hero-slider .slaytlar { z-index: 1; }
.urun-slayt .metin, .urun-slayt .dugmeler, .urun-slayt .ucan-sahne { position: relative; z-index: 1; }

/* --- Düğme: yeşil kaplayınca zemin beyaza döner; ok kutusu kendi yeşilini taşır --- */
.dugme .ok { background: var(--yesil-acik); }
.dugme::before { transition: width .5s cubic-bezier(.22, 1, .36, 1), left .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s, background .35s; }
.dugme:hover::before { background: #fff; transition: width .5s cubic-bezier(.22, 1, .36, 1), left .5s cubic-bezier(.22, 1, .36, 1), border-radius .5s, background .35s .5s; }
.dugme:hover .metin { color: var(--lacivert); }
.dugme-cerceve:hover { border-color: var(--kenar); }

/* --- Ürün ailesi: yeşil tonlar, ana görsel hero fotoğrafı, küçük ekranlar kartın içinde, ad sol üstte --- */
.aile-ust { justify-content: flex-start; }
.aile-ad { font-size: .9rem; }
.aile-orta { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #DCE8CF; }
.aile-foto { position: absolute; inset: 0; }
.aile-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aile-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,42,67,0) 45%, rgba(17,42,67,.28) 100%); }
.aile-ekran, .aile-ekran2 { filter: drop-shadow(0 18px 22px rgba(17,42,67,.28)) drop-shadow(0 4px 6px rgba(17,42,67,.18)); }
.aile-ekran { left: 5%; top: auto; bottom: 7%; width: 52%; }
.aile-ekran2 { right: 5%; bottom: 20%; width: 40%; }
.aile-kart { background: linear-gradient(160deg, var(--ton) 0%, var(--ton2) 100%); }
.aile-baslik h2 .duz { font-style: normal; color: var(--lacivert); }
@media (max-width: 600px) { .aile-ekran { width: 56%; } .aile-ekran2 { width: 42%; } }
/* Küçük cihaz çerçevelerinde üst bilgi tek satır (kırılmasın) */
.aile-ekran .cihaz-bar span, .aile-ekran2 .cihaz-bar span, .ucan-cihaz2 .cihaz-bar span, .ucan-cihaz .cihaz-bar span { font-size: .6rem; left: 46px; right: 46px; }
.aile-ekran .cihaz-bar, .aile-ekran2 .cihaz-bar { height: 20px; padding: 0 8px; gap: 4px; }
.aile-ekran .cihaz-bar i, .aile-ekran2 .cihaz-bar i { width: 6px; height: 6px; }

/* ============================================================
   REVİZYON TURU 6 (25 Eyl 2026)
   ============================================================ */
/* Ürün kartları: ekran görüntüleri yukarıda ve küçük; fotoğrafın odak noktası (alt/sağ) açık kalır */
.aile-ekran { left: 5%; top: 6%; bottom: auto; width: 46%; }
.aile-ekran2 { right: 6%; top: 12%; bottom: auto; width: 36%; }
.aile-foto::after { background: linear-gradient(180deg, rgba(17,42,67,.22) 0%, rgba(17,42,67,0) 40%, rgba(17,42,67,.18) 100%); }
/* Kart zemini: lacivertin tintleri */
.aile-orta { background: #D6E0EA; }
.aile-alt { background: #F4F7FA; }
.aile-alt .ikon { background: #DCE6F0; color: var(--lacivert); }
/* Hero: arka katmanlar yok; ekran görüntülerinde iOS tarzı şeffaflık (arka plan hafif geçer) */
.ucan-cihaz .yanki { display: none; }
.ucan-cihaz .cihaz, .ucan-cihaz2 .cihaz { background: rgba(13,31,49,.42); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-color: rgba(255,255,255,.22); }
.ucan-cihaz .cihaz-bar, .ucan-cihaz2 .cihaz-bar { background: rgba(21,48,75,.55); }
.ucan-cihaz .cihaz img, .ucan-cihaz2 .cihaz img { opacity: .84; }
.ucan-cihaz.indi .cihaz img, .ucan-cihaz2.indi .cihaz img { opacity: 1; }
@media (max-width: 600px) { .aile-ekran { width: 52%; top: 5%; } .aile-ekran2 { width: 40%; top: 12%; } }

/* ============================================================
   REVİZYON TURU 7 (25 Eyl 2026)
   ============================================================ */
/* Ürün kartları: zemin kimlik laciverti (tint yok); üst yazı beyaz, alt panel açık kalır */
.aile-kart { background: var(--lacivert); box-shadow: none; }
.aile-ad { color: #fff; }
.aile-ad svg { color: var(--yesil-neon); }
.aile-orta { background: #0C1F31; }
.aile-foto::after { background: linear-gradient(180deg, rgba(12,31,49,.18) 0%, rgba(12,31,49,0) 40%, rgba(12,31,49,.22) 100%); }
/* Hero cihazları: iOS menü camı — buzlu açık panel, arkadaki fotoğraf bulanık geçer, görsel yarı saydam */
.ucan-cihaz .cihaz, .ucan-cihaz2 .cihaz { background: rgba(255,255,255,.22); backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%); border-color: rgba(255,255,255,.38); box-shadow: 0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.ucan-cihaz .cihaz-bar, .ucan-cihaz2 .cihaz-bar { background: rgba(21,48,75,.42); border-bottom-color: rgba(255,255,255,.18); }
.ucan-cihaz .cihaz img, .ucan-cihaz2 .cihaz img { opacity: .66; transition: opacity .3s; }
.ucan-cihaz.indi .cihaz img, .ucan-cihaz2.indi .cihaz img { opacity: 1; }

/* ============================================================
   ÜRÜN PİKTOGRAMLARI (25 Eyl 2026) — marka ikon ailesi, sprite img/ikon/urun.svg
   ============================================================ */
svg.pk { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.2em; flex: none; --pk-vurgu: #4E8920; }
.koyu svg.pk, .ust svg.pk, .slayt svg.pk, .aile-ad svg.pk, .ucan-kart .ikon svg.pk { --pk-vurgu: #9BE15D; }
.ust.kaydi svg.pk, .ucan-kart .ikon svg.pk, .aile-alt .ikon svg.pk, .vitrin-kart .ikon svg.pk, .kart .ikon svg.pk { --pk-vurgu: #4E8920; }
.ust nav .urun-grubu a svg.pk { width: 20px; height: 20px; color: currentColor; }
.menu-urunler a svg.pk { width: 20px; height: 20px; }
.slayt .urun-rozet svg.pk { width: 18px; height: 18px; }
.ucan-kart .ikon svg.pk, .aile-alt .ikon svg.pk, .vitrin-kart .ikon svg.pk { width: 24px; height: 24px; }
.kart .ikon svg.pk { width: 30px; height: 30px; }
.aile-ad svg.pk { width: 20px; height: 20px; color: #fff; }
.sistem .dugum svg.ikon.pk { color: #BFD0E0; --pk-vurgu: #9BE15D; }
.sistem .dugum.aktif svg.ikon.pk { color: #fff; }
.slayt-nokta svg.pk, .program svg.pk { width: 16px; height: 16px; }

/* ============================================================
   REVİZYON TURU 9 (25 Eyl 2026)
   ============================================================ */
/* Kart fotoğrafları: odak noktası ekran görüntülerinin altındaki boşluğa gelecek şekilde yakınlaştırıldı */
.aile-foto img { transition: transform .8s var(--egri); }
.aile-kart[data-urun="hesap"] .aile-foto img { transform: scale(1.32); transform-origin: 48% 78%; }
.aile-kart[data-urun="yem"] .aile-foto img { transform: scale(1.38); transform-origin: 68% 66%; }
.aile-kart[data-urun="besleme"] .aile-foto img { transform: scale(1.4); transform-origin: 82% 88%; }
.aile-kart[data-urun="fizibilite"] .aile-foto img { transform: scale(1.15); transform-origin: 70% 70%; }
/* Hero cihazları: imleç üstündeyken neon ince çizgi + hafif ışıma, görsel %20 daha saydam */
.ucan-cihaz .cihaz, .ucan-cihaz2 .cihaz { transition: box-shadow .35s var(--egri), border-color .35s; }
.ucan-cihaz:hover .cihaz, .ucan-cihaz2:hover .cihaz { border-color: rgba(155,225,93,.95); box-shadow: 0 0 0 1px rgba(155,225,93,.9), 0 0 14px rgba(155,225,93,.55), 0 0 36px rgba(155,225,93,.25), 0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45); }
.ucan-cihaz:hover .cihaz img, .ucan-cihaz2:hover .cihaz img { opacity: .53; }
.ucan-cihaz:hover .cihaz-bar, .ucan-cihaz2:hover .cihaz-bar { border-bottom-color: rgba(155,225,93,.35); }
@media (prefers-reduced-motion: reduce) { .aile-foto img { transition: none; } }
/* Besleme: kâseler kartın alt yarısına (ekranların altına) gelsin */
.aile-kart[data-urun="besleme"] .aile-foto img { object-position: 60% 0; transform: translateY(9%) scale(1.35); transform-origin: 60% 0; }
/* Alt panel ve vitrin kartı: piktogram kutusuz, kutu boyunda (40 px), lacivert */
.aile-alt .ikon, .ucan-kart .ikon { background: none; width: 44px; height: 44px; }
.aile-alt .ikon svg.pk, .ucan-kart .ikon svg.pk { width: 44px; height: 44px; color: var(--lacivert); --pk-vurgu: #4E8920; }

/* Slayt 2–5 alt metinleri de daktiloyla; yükseklik sabit */
.slayt .giris.daktilo { min-height: 3lh; }
@media (max-width: 900px) { .slayt .giris.daktilo { min-height: 5lh; } }

/* ============================================================
   REVİZYON TURU 11 (25 Eyl 2026)
   ============================================================ */
/* Hero cihazları: şeffaflık geri alındı (opak); imleçte öne çıkar, ortada düz durur; vitrin kartı aynı açıda */
.ucan-cihaz .cihaz, .ucan-cihaz2 .cihaz { background: #0d1f31; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255,255,255,.12); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.14); }
.ucan-cihaz .cihaz-bar, .ucan-cihaz2 .cihaz-bar { background: linear-gradient(180deg, #15304b, #0f2439); }
.ucan-cihaz .cihaz img, .ucan-cihaz2 .cihaz img, .ucan-cihaz:hover .cihaz img, .ucan-cihaz2:hover .cihaz img { opacity: 1; }
.ucan.odak, .ucan.donus { transition: transform .55s var(--egri); }
.ucan.odak { z-index: 20; }
.ucan-cihaz2 { transform: rotateY(-24deg) rotateX(5deg); }
.ucan-kart { transform: rotateY(-24deg) rotateX(5deg); }

/* Odaktayken diğer yüzen parçalar imleci almaz (titreme önlemi) */
.ucan-sahne.odakli .ucan:not(.odak) { pointer-events: none; }

/* ============================================================
   MOBİL KOMPAKT HERO + DÜZ YÜZEN PARÇALAR (26 Eyl 2026)
   ============================================================ */
@media (max-width: 900px) {
  .ust-serit { display: none; }                       /* 38 px kazanç: sosyal şerit mobilde yok */
  .hero.hero-slider { margin-top: -70px; }
  .slayt { padding: 92px 0 64px; }
  .slayt .ic { gap: 1rem; }
  .slayt .etiket { margin-bottom: .5rem; font-size: .7rem; }
  .slayt h1 { font-size: clamp(1.9rem, 8.2vw, 2.5rem); margin-bottom: .6rem; }
  .slayt .daktilo, .slayt .giris.daktilo { font-size: .95rem; line-height: 1.5; min-height: 4lh; }
  .cam { padding: .8rem; border-radius: 20px; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
  .cam-baslik { margin: 0 .2rem .5rem; flex-direction: row; align-items: center; }
  .cam-baslik span { display: none; }
  .programlar { display: none; }                      /* düğümler dokunulabilir; hap satırı yer kaplıyordu */
  .slayt .dugmeler { margin-top: .2rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero .dugmeler .dugme, .slayt .dugmeler .dugme { width: auto; height: 48px; font-size: .9rem; padding: 0 12px 0 46px; }
  .slayt .dugmeler .dugme::before, .slayt .dugmeler .dugme .ok { width: 34px; left: 4px; top: 4px; bottom: 4px; }
  .slayt .dugmeler .dugme:hover { padding: 0 12px 0 46px; }
  .slayt-nav { bottom: 18px; }
  /* Slayt 2–5: ekranlar düz yüzer, vitrin kartı mobilde yok (başlıkla aynı metni taşıyordu) */
  .ucan-sahne { aspect-ratio: 16 / 10; perspective: none; }
  .ucan-cihaz, .ucan-cihaz2, .ucan-kart { transform: none; }
  .ucan-cihaz { left: 0; top: 0; width: 74%; }
  .ucan-cihaz2 { right: 0; top: 34%; bottom: auto; width: 54%; }
  .ucan-kart { display: none; }
}
@media (max-width: 600px) {
  .ucan-cihaz { width: 76%; } .ucan-cihaz2 { width: 56%; }
  .sistem .dugum .ad { font-size: 20px; } .sistem .dugum .alt { font-size: 11px; }
}
/* Mobil: slayt gezinmesi akışta (düğmelerle çakışmasın), hero tek ekrana yakın */
@media (max-width: 900px) {
  .slayt-nav { position: static; padding: 0 0 14px; }
  .slayt-nav .ic { justify-content: space-between; }
  .slayt { padding: 92px 0 18px; }
  .hero.hero-slider { display: flex; flex-direction: column; }
  .slaytlar { flex: 1; }
}
/* Mobil: sağ alttaki WhatsApp düğmesi ok düğmelerinin üstüne biniyordu → oklar sola, noktalar sağda WhatsApp'a pay bırakır */
@media (max-width: 900px) {
  .slayt-nav .ic { padding-right: 72px; }
  .slayt-oklar { order: -1; margin-left: 0; }
}
/* WhatsApp düğmesi: ilk ekranda görünmez, kaydırınca gelir */
.wa-dugme.gizli { opacity: 0; transform: translateY(24px); pointer-events: none; }
.dugme.wa-dugme { transition: opacity .35s var(--egri), transform .35s var(--egri), box-shadow .25s, padding .5s cubic-bezier(.22, 1, .36, 1); }
/* Mobilde slayt 2–5 fotoğrafları: özne, metinle ekran görüntüleri arasındaki banda gelir */
@media (max-width: 700px) {
  .slayt-arka img { transform-origin: 50% 50%; }
  .slayt[data-urun="hesap"] .slayt-arka img { transform: translateY(-11%) scale(1.25); transform-origin: 34% 66%; }
  .slayt[data-urun="yem"] .slayt-arka img { transform: translateY(-6%) scale(1.15); transform-origin: 32% 60%; }
  .slayt[data-urun="besleme"] .slayt-arka img { transform: translateY(-15%) scale(1.28); transform-origin: 42% 72%; }
  .slayt[data-urun="fizibilite"] .slayt-arka img { transform: translateY(-12%) scale(1.2); transform-origin: 64% 72%; }
}
/* iPad yatay / 13" (iki sütun): özne ekran görüntülerinin arkasında kalıyordu → metinle cihazlar arasındaki boşluğa ve alt banda gelir;
   öznenin olduğu noktada perde hafifçe açılır (--ozne-x/y) */
@media (min-width: 1101px) and (max-width: 1440px) {
  .slayt[data-urun="hesap"] .slayt-arka img { object-position: 60% 0; transform: scale(1.45); transform-origin: 89% 0; }
  .slayt[data-urun="yem"] .slayt-arka img { transform: scale(1.45); transform-origin: 92% 10%; }
  .slayt[data-urun="besleme"] .slayt-arka img { transform: scale(1.34); transform-origin: 85% 0; }
  .slayt[data-urun="fizibilite"] .slayt-arka img { transform: scale(1.15); transform-origin: 60% 0; }
  .urun-slayt .slayt-arka .hero-perde { -webkit-mask-image: radial-gradient(ellipse 26% 30% at var(--ozne-x, 55%) var(--ozne-y, 86%), rgba(0,0,0,.4) 0%, rgba(0,0,0,.4) 25%, #000 100%); mask-image: radial-gradient(ellipse 26% 30% at var(--ozne-x, 55%) var(--ozne-y, 86%), rgba(0,0,0,.4) 0%, rgba(0,0,0,.4) 25%, #000 100%); }
  .slayt[data-urun="hesap"] { --ozne-x: 50%; --ozne-y: 84%; }
  .slayt[data-urun="yem"] { --ozne-x: 50%; --ozne-y: 86%; }
  .slayt[data-urun="besleme"] { --ozne-x: 62%; --ozne-y: 90%; }
  .slayt[data-urun="fizibilite"] { --ozne-x: 66%; --ozne-y: 90%; }
}
/* iPad dikey (tek sütun): özne, cihazların sağ üstündeki boşluğa gelir; 901–1100'de Fizibilite sağ alta iner */
@media (min-width: 701px) and (max-width: 1100px) {
  .slayt[data-urun="hesap"] .slayt-arka img { object-position: 25% 50%; }
  .slayt[data-urun="yem"] .slayt-arka img { object-position: 55% 50%; }
  .slayt[data-urun="besleme"] .slayt-arka img { object-position: 66% 50%; transform: scale(1.2); transform-origin: 100% 0; }
  .slayt[data-urun="fizibilite"] .slayt-arka img { transform: scale(1.5); transform-origin: 85% 100%; }
  .urun-slayt .slayt-arka .hero-perde { -webkit-mask-image: radial-gradient(ellipse 22% 15% at var(--ozne-x, 90%) var(--ozne-y, 50%), rgba(0,0,0,.4) 0%, rgba(0,0,0,.4) 25%, #000 100%); mask-image: radial-gradient(ellipse 22% 15% at var(--ozne-x, 90%) var(--ozne-y, 50%), rgba(0,0,0,.4) 0%, rgba(0,0,0,.4) 25%, #000 100%); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .slayt[data-urun="yem"] .slayt-arka img { object-position: 40% 50%; }
  .slayt[data-urun="fizibilite"] .slayt-arka img { transform: scale(1.18); transform-origin: 60% 0; }
  .urun-slayt { --ozne-x: 86%; --ozne-y: 42%; }
  .slayt[data-urun="fizibilite"] { --ozne-x: 74%; --ozne-y: 90%; }
}
/* Küçük iPad dikey, Yem: açıklamanın sağ ucu fotoğrafın aydınlık ahır ağzına denk geliyordu → metin bandı koyulaşır */
@media (min-width: 701px) and (max-width: 900px) {
  .slayt[data-urun="yem"] .slayt-arka::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,22,36,0) 14%, rgba(8,22,36,.62) 24%, rgba(8,22,36,.62) 33%, rgba(8,22,36,0) 41%); }
}
/* Platform slaytı (1. slayt), iki sütunlu düzen (iPad yatay / 13"): inek fotoğrafın sağ ortasında, tam diyagram kartının arkasına düşüyordu →
   fotoğraf üstten tutulup büyütülür, baş kartın altındaki banda (noktaların üstüne) gelir; perde orada açılır. Ölçek hero yüksekliğine bağlı:
   kısa ekranda (≤860) bant daha alçakta olduğundan daha az büyütülür. Nefes animasyonu <img>'de kalır, kadraj <picture>'da (11 Eki 2026) */
@media (min-width: 1101px) and (max-width: 1600px) {
  .hero-arka img { object-position: 50% 0; }
  .hero-arka picture { transform: scale(var(--kadraj-s, 1.4)); transform-origin: var(--kadraj-x, 73%) 0; }
  .hero-arka .hero-perde { -webkit-mask-image: radial-gradient(ellipse 20% 24% at 80% var(--ozne-y, 88%), rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 30%, #000 100%); mask-image: radial-gradient(ellipse 20% 24% at 80% var(--ozne-y, 88%), rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 30%, #000 100%); }
}
@media (min-width: 1101px) and (max-width: 1300px) { .hero-arka { --kadraj-s: 1.6; --kadraj-x: 74%; } }
@media (min-width: 1101px) and (max-width: 1300px) and (max-height: 860px) { .hero-arka { --kadraj-s: 1.44; } }
@media (min-width: 1301px) and (max-width: 1440px) { .hero-arka { --kadraj-s: 1.4; --kadraj-x: 73%; } }
@media (min-width: 1301px) and (max-width: 1440px) and (max-height: 860px) { .hero-arka { --kadraj-s: 1.3; --kadraj-x: 71%; } }
@media (min-width: 1441px) and (max-width: 1600px) { .hero-arka { --kadraj-s: 1.6; --kadraj-x: 64%; } }
@media (prefers-reduced-motion: reduce) { .hero-arka picture { transform: none; } .hero-arka img { object-position: 62% 50%; } }

/* ============================================================
   YATAY TAŞMA (26 Eyl 2026) — mobilde sayfa yana kayıyordu
   Neden: pasif slaytların giriş/çıkış kaydırması (±40 px) ve sağa taşan yüzen parçalar sayfanın
   kaydırılabilir genişliğini 430 px'e çıkarıyordu; iOS bunu yana panlanabilir alan sayıp kenarı gösteriyordu.
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; }
.hero.hero-slider { overflow: clip visible; }   /* yatay kırp, dikey serbest (yüzen parçalar aşağı iner) */
.slaytlar { overflow-x: clip; }

/* Mobil hero: düğmeler yok; oklar ve ürün adları görünür (26 Eyl) */
@media (max-width: 900px) {
  .slayt .dugmeler { display: none; }
  .slayt .ic { grid-template-areas: "metin" "cam"; grid-template-rows: auto auto; }
  .slayt-nav .ic { flex-wrap: wrap; gap: .6rem .5rem; padding-right: 0; align-items: center; }
  .slayt-oklar { order: 0; margin-left: auto; }
  .slayt-noktalar { flex-wrap: wrap; gap: .35rem; order: 1; width: 100%; }
  .slayt-nokta, .slayt-nokta.aktif { width: auto; height: 32px; padding: 0 .65rem; font-size: .74rem; }
  .slayt-nokta span, .slayt-nokta.aktif span { display: inline; }
  .slayt-nokta.aktif::before { margin-right: .35rem; }
  .slayt-nav { padding-bottom: 12px; }
}
@media (max-width: 900px) { .slayt-nav .ic::before { content: ""; order: -1; flex: 1; } }

/* ============================================================
   SLAYT GEZİNMESİ v2 (26 Eyl 2026): Platform (döngü ikonu) + oklar / ürün hapları ikonlu
   ============================================================ */
.slayt-nav .ic { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding-right: 0; }
.slayt-ust { display: contents; }
.slayt-noktalar.platform { order: 0; }
.slayt-noktalar.urunler { order: 1; }
.slayt-oklar { order: 2; margin-left: auto; }
.slayt-nokta { display: inline-flex; align-items: center; gap: .4rem; width: auto; padding: 0 .75rem 0 .55rem; }
.slayt-nokta span, .slayt-nokta.aktif span { display: inline; }
.slayt-nokta.aktif::before { display: none; }
.slayt-nokta svg.pk { width: 16px; height: 16px; --pk-vurgu: #9BE15D; color: currentColor; }
.slayt-nokta .dongu { animation: none; }
.slayt-nokta.aktif .dongu { animation: dongu-don 6s linear infinite; }
@keyframes dongu-don { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .slayt-nav .ic { gap: .5rem; }
  .slayt-ust { display: flex; align-items: center; justify-content: space-between; width: 100%; order: 0; }
  .slayt-oklar { margin-left: 0; }
  .slayt-noktalar.urunler { width: 100%; order: 1; flex-wrap: nowrap; gap: .35rem; }
  .slayt-noktalar.urunler .slayt-nokta { flex: 1; justify-content: center; padding: 0 .4rem; }
  .slayt-nav .ic::before { display: none; }
}
@media (max-width: 360px) { .slayt-noktalar.urunler .slayt-nokta span { font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .slayt-nokta.aktif .dongu { animation: none; } }

/* ============================================================
   ÜRÜN AİLESİ · MOBİL IZGARA (26 Eyl 2026, Mustafa'nın tasarımı)
   2×2 fotoğraf kutusu (3 sn'de bir sırayla seçilir) + altta bilgi kartı (ürün başına 3 slayt)
   ============================================================ */
.aile-mobil { display: none; }
.mobil-h { display: none; }
@media (max-width: 900px) {
  .aile-mobil { display: block; }
  .aile-kaydirak { display: none; }
  .genis-h { display: none; } .mobil-h { display: inline; }
  .aile-baslik { margin-bottom: .6rem; }
  .aile-ipucu { color: var(--gri); font-size: .95rem; margin: 0 0 1rem; }
  .aile-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .aile-kutu { position: relative; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; border: 0; padding: 0; background: var(--lacivert); cursor: pointer; text-align: left; box-shadow: 0 0 0 0 rgba(95,165,36,0); transition: box-shadow .35s var(--egri), transform .35s var(--egri); -webkit-tap-highlight-color: transparent; }
  .aile-kutu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--egri), filter .4s; filter: saturate(.85) brightness(.92); }
  .aile-kutu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,31,49,0) 30%, rgba(12,31,49,.78) 100%); }
  .aile-kutu .ad, .aile-kutu .alt { position: absolute; left: 14px; z-index: 1; color: #fff; }
  .aile-kutu .ad { bottom: 32px; font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; line-height: 1; letter-spacing: -.01em; }
  .aile-kutu .alt { bottom: 12px; font-size: .78rem; font-weight: 500; color: #E6EEF5; }
  .aile-kutu .onay { position: absolute; top: 10px; right: 10px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: var(--yesil); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--egri); }
  .aile-kutu .onay svg { width: 14px; height: 14px; }
  .aile-kutu.aktif { box-shadow: 0 0 0 3px var(--yesil-acik), 0 12px 28px rgba(17,42,67,.18); }
  .aile-kutu.aktif img { filter: none; transform: scale(1.06); }
  .aile-kutu.aktif .onay { opacity: 1; transform: none; }
  .aile-bilgi { position: relative; margin-top: 14px; background: #F3F6EE; border-radius: 18px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 12px 30px rgba(17,42,67,.10); display: grid; gap: .35rem; }
  .aile-bilgi .ust-satir { display: flex; justify-content: space-between; align-items: center; }
  .aile-bilgi .rozet { font-size: .7rem; font-weight: 800; letter-spacing: .14em; color: var(--yesil-koyu); }
  .aile-bilgi .sayac { font-size: .78rem; color: var(--gri); font-variant-numeric: tabular-nums; }
  .aile-bilgi h3 { margin: .2rem 0 0; font-size: 1.25rem; line-height: 1.25; color: var(--lacivert); min-height: 2lh; }
  .aile-bilgi p { margin: 0; font-size: .9rem; color: var(--gri); min-height: 2lh; }
  .aile-bilgi .aile-git { margin-top: .4rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--lacivert); border-bottom: 2px solid rgba(17,42,67,.15); padding-bottom: .15rem; width: max-content; }
  .aile-bilgi-nav { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; padding-top: .7rem; border-top: 1px solid rgba(17,42,67,.08); }
  .aile-bilgi-nav button { border: 0; background: none; color: var(--lacivert); cursor: pointer; padding: .3rem; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; font: inherit; }
  .aile-bilgi-nav button svg { width: 18px; height: 18px; }
  .aile-bilgi-nav .noktalar { display: inline-flex; gap: 6px; align-items: center; }
  .aile-bilgi-nav .noktalar i { width: 6px; height: 6px; border-radius: 3px; background: rgba(17,42,67,.25); transition: width .3s, background .3s; }
  .aile-bilgi-nav .noktalar i.aktif { width: 18px; background: var(--yesil-koyu); }
  .aile-bilgi-nav .duraklat { margin-left: auto; font-size: .8rem; color: var(--yesil-koyu); gap: .35rem; }
  .aile-bilgi-nav .duraklat b { font-weight: 700; }
  .aile-bilgi-nav .duraklat .ik-oyna, .aile-bilgi-nav .duraklat[aria-pressed="true"] .ik-dur { display: none; }
  .aile-bilgi-nav .duraklat[aria-pressed="true"] .ik-oyna { display: inline; }
  .aile-bilgi.gecis h3, .aile-bilgi.gecis p { animation: bilgi-gel .35s var(--egri) both; }
  @keyframes bilgi-gel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  /* Hero'dan yalnız vitrin kartı iner (bilgi kartına); ekran görüntüleri yerinde yüzer */
  .ucan-kart { display: grid; left: 4%; bottom: 0; width: 76%; transform: none; }
  .ucan-cihaz2 { top: 30%; }
}
@media (prefers-reduced-motion: reduce) { .aile-bilgi.gecis h3, .aile-bilgi.gecis p { animation: none; } }
.slayt.olcum { transform: none !important; transition: none !important; }

/* --- Geniş ekran (Mustafa 26 Eyl: A seçildi, kalıcı): ızgara solda, bilgi kartı sağda; ray gizli --- */
@media (min-width: 901px) {
  .aile-kaydirak { display: none; }
  .aile-mobil { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 2.5rem; align-items: start; }
  .aile-ipucu { grid-column: 1 / -1; color: var(--gri); margin: 0 0 .2rem; }
  .aile-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .aile-kutu { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; border: 0; padding: 0; background: var(--lacivert); cursor: pointer; text-align: left; transition: box-shadow .35s var(--egri); }
  .aile-kutu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.9); transition: transform .9s var(--egri), filter .4s; }
  .aile-kutu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,31,49,0) 35%, rgba(12,31,49,.78) 100%); }
  .aile-kutu .ad, .aile-kutu .alt { position: absolute; left: 18px; z-index: 1; color: #fff; }
  .aile-kutu .ad { bottom: 38px; font-family: Georgia, serif; font-size: 1.9rem; line-height: 1; }
  .aile-kutu .alt { bottom: 16px; font-size: .85rem; color: #E6EEF5; }
  .aile-kutu .onay { position: absolute; top: 12px; right: 12px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--yesil); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s var(--egri); }
  .aile-kutu .onay svg { width: 14px; height: 14px; }
  .aile-kutu.aktif { box-shadow: 0 0 0 3px var(--yesil-acik), 0 14px 30px rgba(17,42,67,.18); }
  .aile-kutu.aktif img { filter: none; transform: scale(1.05); }
  .aile-kutu.aktif .onay { opacity: 1; transform: none; }
  .aile-bilgi { position: sticky; top: 90px; background: #F3F6EE; border-radius: 22px; padding: 1.6rem 1.7rem 1.4rem; box-shadow: 0 16px 40px rgba(17,42,67,.10); display: grid; gap: .5rem; }
  .aile-bilgi .ust-satir { display: flex; justify-content: space-between; align-items: center; }
  .aile-bilgi .rozet { font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--yesil-koyu); }
  .aile-bilgi .sayac { font-size: .8rem; color: var(--gri); font-variant-numeric: tabular-nums; }
  .aile-bilgi h3 { margin: .3rem 0 0; font-family: Georgia, serif; font-weight: 400; font-size: 1.8rem; line-height: 1.2; color: var(--lacivert); min-height: 2lh; }
  .aile-bilgi p { margin: 0; font-size: 1rem; color: var(--gri); min-height: 2lh; }
  .aile-bilgi .aile-git { margin-top: .5rem; display: inline-flex; gap: .4rem; font-size: .92rem; font-weight: 700; color: var(--lacivert); border-bottom: 2px solid rgba(17,42,67,.15); padding-bottom: .15rem; width: max-content; }
  .aile-bilgi-nav { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(17,42,67,.08); }
  .aile-bilgi-nav button { border: 0; background: none; color: var(--lacivert); cursor: pointer; padding: .3rem; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; font: inherit; }
  .aile-bilgi-nav button svg { width: 18px; height: 18px; }
  .aile-bilgi-nav .noktalar { display: inline-flex; gap: 6px; align-items: center; }
  .aile-bilgi-nav .noktalar i { width: 6px; height: 6px; border-radius: 3px; background: rgba(17,42,67,.25); transition: width .3s, background .3s; }
  .aile-bilgi-nav .noktalar i.aktif { width: 18px; background: var(--yesil-koyu); }
  .aile-bilgi-nav .duraklat { margin-left: auto; font-size: .82rem; color: var(--yesil-koyu); gap: .35rem; }
  .aile-bilgi-nav .duraklat .ik-oyna, .aile-bilgi-nav .duraklat[aria-pressed="true"] .ik-dur { display: none; }
  .aile-bilgi-nav .duraklat[aria-pressed="true"] .ik-oyna { display: inline; }
  .genis-h { display: none; } .mobil-h { display: inline; }
}
@media (min-width: 1600px) { .aile-mobil { grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); gap: 3.5rem; } .aile-kutu .ad { font-size: 2.3rem; } }

/* ============================================================
   YERLİ YAZILIM (26 Eyl 2026, Mustafa'nın tasarımı): üç fotoğraf kutusu + 3 slaytlı bilgi kartı; başlıkta daktilo satırı
   ============================================================ */
.yerli-baslik { max-width: 22ch; }
.yerli-baslik .daktilo-satir { display: inline-block; min-width: 1ch; }
.yerli-baslik .daktilo-satir .imlec { display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.12em; background: var(--yesil-koyu); animation: imlec-yan 1s steps(2, start) infinite; }
.aile-mobil.uclu { display: grid; }
.aile-mobil.uclu .aile-izgara { grid-template-columns: repeat(3, 1fr); }
.aile-mobil.uclu .aile-kutu { aspect-ratio: 3 / 4; }
.aile-mobil.uclu .aile-kutu .ad { font-family: Inter, sans-serif; font-weight: 700; font-size: 1.05rem; bottom: 28px; }
.aile-mobil.uclu .aile-kutu .alt { font-size: .72rem; bottom: 12px; }
.aile-mobil.uclu .aile-kutu .onay { background: var(--yesil); }
.aile-mobil.uclu .aile-bilgi .rozet { color: var(--yesil-koyu); }
.aile-mobil.uclu .aile-bilgi h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.aile-mobil.uclu .aile-bilgi .aile-git { order: 3; }
.aile-mobil.uclu .aile-bilgi .aile-bilgi-nav { order: 4; }
@media (max-width: 900px) {
  .aile-mobil.uclu { display: block; margin-top: .4rem; }
  .aile-mobil.uclu .aile-izgara { gap: 10px; }
  .aile-mobil.uclu .aile-kutu { border-radius: 14px; }
  .aile-mobil.uclu .aile-kutu .ad { left: 10px; font-size: .95rem; bottom: 26px; }
  .aile-mobil.uclu .aile-kutu .alt { left: 10px; font-size: .68rem; bottom: 10px; }
  .aile-mobil.uclu .aile-kutu .onay { top: 8px; right: 8px; width: 24px; height: 24px; }
  .aile-mobil.uclu .aile-bilgi h3 { font-size: 1.35rem; }
  .yerli-baslik { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}
@media (min-width: 901px) {
  .aile-mobil.uclu { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 2.5rem; align-items: start; }
  .aile-mobil.uclu .aile-kutu { aspect-ratio: 3 / 4; }
  .aile-mobil.uclu .aile-kutu .ad { font-size: 1.25rem; bottom: 34px; left: 16px; }
  .aile-mobil.uclu .aile-kutu .alt { font-size: .8rem; left: 16px; }
  .aile-mobil.uclu .aile-bilgi { position: static; }
  .aile-mobil.uclu .aile-bilgi h3 { font-size: 1.6rem; }
  #yerli .bolum-baslik { margin-bottom: 1.6rem; }
}
@media (max-width: 900px) { .yerli-baslik { font-size: clamp(1.7rem, 7.2vw, 2.2rem); max-width: none; } .yerli-baslik .daktilo-satir { white-space: nowrap; } }
@media (max-width: 900px) { .yerli-baslik { font-size: clamp(1.55rem, 6.4vw, 2rem); letter-spacing: -.02em; } }

/* Ürün adı tipografisi — Rajdhani 700 (27 Eyl 2026 marka kiti fonts.urun_adi) + final ürün ikonları */
.ust nav .urun-grubu a span, .menu-urunler a span, .slayt-nokta span, .slayt .urun-rozet, .aile-kutu .ad, a.adim h3,
.aile-mobil:not(.uclu) .aile-bilgi .rozet, .ucan-kart .rozet { font-family: "Rajdhani", "Inter", sans-serif; font-weight: 700; letter-spacing: .01em; }
a.adim h3 { font-size: 1.12em; }
.aile-mobil:not(.uclu) .aile-bilgi .rozet, .ucan-kart .rozet { display: inline-flex; align-items: center; gap: .45em; font-size: .8rem; letter-spacing: .1em; }
.aile-bilgi .rozet svg.pk { width: 18px; height: 18px; color: var(--lacivert); --pk-vurgu: var(--yesil-koyu); vertical-align: 0; }

/* Dişi (beyaz) ürün ikonları — diyagram program düğmeleri + ürün ailesi fotoğraf kutuları (27 Eyl 2026) */
.program svg.pk { width: 16px; height: 16px; color: rgba(255,255,255,.62); --pk-vurgu: rgba(155,225,93,.7); transition: color .2s; }
.program.aktif svg.pk { color: #fff; --pk-vurgu: #9BE15D; }
.program { font-family: "Rajdhani", "Inter", sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .01em; }
/* Ürün kutusu: büyük dişi ikon üstte, metin bloğuyla sola hizalı; ad = "SürüPlan <ürün>" */
.aile-mobil:not(.uclu) .aile-kutu { container-type: inline-size; }
.aile-mobil:not(.uclu) .aile-kutu .ad { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 3.5cqw, 12px); font-size: clamp(.95rem, 9.4cqw, 1.7rem); white-space: nowrap; }
.aile-kutu .ad svg.pk { --w: clamp(28px, 17cqw, 52px); width: var(--w); height: var(--w); color: #fff; --pk-vurgu: #9BE15D; vertical-align: 0;
  /* görünen sol ve alt kenar metne hizalanır (sembolün boş payı ölçüldü) */
  margin-left: calc(var(--pk-sol, 0) * -1 * var(--w)); margin-bottom: calc(var(--pk-alt, 0) * -1 * var(--w)); }
/* Optik denge: Yem (yatık) ve Besleme (dar) kutuda daha az yer kaplıyor → %20 büyük */
.aile-kutu .ad svg.pk:has(use[href$="#yem"]), .aile-kutu .ad svg.pk:has(use[href$="#besleme"]) { --w: clamp(34px, 20.4cqw, 62px); }
@media (max-width: 900px) { .program { font-size: .88rem; } }

/* Optik denge — bilgi kartı rozeti ve diyagram düğmeleri: Yem ve Besleme büyütüldü, satırla dikey ortalı */
.aile-bilgi .rozet svg.pk:has(use[href$="#yem"]), .aile-bilgi .rozet svg.pk:has(use[href$="#besleme"]) { width: 22px; height: 22px; margin-block: -2px; }
.program svg.pk:has(use[href$="#yem"]), .program svg.pk:has(use[href$="#besleme"]) { width: 22px; height: 22px; margin-block: -3px; }

/* Sprite'ta Yem %15, Besleme %5 büyütüldü (arac/piktogram_yaz.py OPTIK); yatık Yem kutusundan ~%1 taşar → görünür kalsın */
svg.pk { overflow: visible; }
/* Sembollerin görünen içeriğe göre boş payı (viewBox oranı, 27 Eyl ölçümü) — hizalamada kullanılır */
svg.pk:has(use[href$="#hesap"]) { --pk-sol: .179; --pk-alt: .054; }
svg.pk:has(use[href$="#yem"]) { --pk-sol: 0; --pk-alt: .165; }
svg.pk:has(use[href$="#besleme"]) { --pk-sol: .289; --pk-alt: .034; }
svg.pk:has(use[href$="#fizibilite"]) { --pk-sol: .113; --pk-alt: .053; }
/* Yerli Yazılım kutuları: 16:9 foto 3:4 kutuda ~%42 görünür → özne kadraja gelsin diye sağa kaydırılmış kırpma (27 Eyl) */
.yerli-sec .aile-kutu[data-urun="muhasebe"] img { object-position: 68% 50%; }
.yerli-sec .aile-kutu[data-urun="yatirim"] img { object-position: 84% 50%; }
.yerli-sec .aile-kutu[data-urun="destek"] img { object-position: 69% 50%; }

/* ============ TAM DÖNGÜ (28 Eyl 2026 — Mustafa'nın kurgusu: dört durak + geri dönüş + seçilen adımın kartı) ============ */
.dongu { --d-yesil: #3E7C1F; --d-ray: #BFD8A8; --d-mavi: #24506B; --d-mavi-zemin: #E6EFF3; --d-mavi-cizgi: #C5D8E2; }
.dongu-ust { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 3rem; align-items: start; margin-bottom: 2.2rem; }
.dongu-ust h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(2rem, 3.1vw, 3rem); line-height: 1.08; letter-spacing: -.02em; margin: .6rem 0 0; text-wrap: balance; }
@media (min-width: 1101px) { .dongu-ust h2 em { white-space: nowrap; } }
.dongu-ust h2 em { color: var(--yesil-koyu); }
.dongu-giris p { color: var(--gri); font-size: 1.08rem; line-height: 1.7; margin: .2rem 0 .9rem; }
.dongu-lejant { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; color: var(--gri); }
.dongu-lejant li { display: inline-flex; align-items: center; gap: .45rem; }
.dongu-lejant li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--d-yesil); }
.dongu-lejant li.geri::before { background: var(--d-mavi); }

.dongu-duraklar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: .9rem; }
.durak { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: .9rem; row-gap: .1rem; align-content: start; text-align: left; border: 0; background: none; padding: 1.35rem 1rem .9rem 0; cursor: pointer; color: var(--lacivert); font: inherit; border-radius: 12px; }
.durak::before { content: ""; position: absolute; top: 5px; left: 0; right: 26px; height: 2px; background: var(--d-ray); transition: background .3s; }
.durak::after { content: "→"; position: absolute; top: -6px; right: 6px; font-size: .95rem; color: var(--d-yesil); }
.durak:last-child::after { content: "↓"; }
.durak.aktif::before { background: var(--d-yesil); }
.durak .no { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #CBD6DE; display: grid; place-items: center; font-size: .82rem; font-weight: 600; color: var(--gri); background: #fff; transition: background .25s, color .25s, border-color .25s; }
.durak .ad { font-weight: 700; font-size: 1.06rem; line-height: 1.2; }
.durak .urun { font-size: .88rem; color: var(--gri); }
.durak .cikti { font-size: .8rem; font-weight: 600; color: var(--d-yesil); margin-top: .7rem; }
.durak:hover .no { border-color: var(--d-yesil); color: var(--d-yesil); }
.durak.aktif .no { background: var(--d-yesil); border-color: var(--d-yesil); color: #fff; }
.durak.aktif .ad { color: var(--d-yesil); }
.durak:focus-visible, .dongu-geri:focus-visible { outline: 2px solid var(--d-mavi); outline-offset: 3px; }

.dongu-geri { width: 100%; display: flex; align-items: center; gap: 1.1rem; text-align: left; font: inherit; color: var(--d-mavi); background: var(--d-mavi-zemin); border: 1.5px solid var(--d-mavi-cizgi); border-radius: 16px; padding: 1rem 1.4rem; cursor: pointer; transition: border-color .25s, box-shadow .25s; }
.dongu-geri > svg { width: 28px; height: 28px; flex: none; }
.dongu-geri .yazi { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.dongu-geri b { font-size: 1.02rem; }
.dongu-geri small { font-size: .84rem; color: #3D6178; }
.dongu-geri .git { display: inline-flex; align-items: center; gap: .6rem; font-size: .86rem; white-space: nowrap; }
.dongu-geri .git svg { width: 20px; height: 20px; }
.dongu-geri:hover { border-color: #9DBCCB; }
.dongu-geri.aktif { border-color: var(--d-mavi); box-shadow: 0 0 0 3px rgba(36,80,107,.08); }
.dongu-ipucu { font-size: .84rem; color: var(--gri); margin: .9rem 0 1.4rem; }

.dongu-kart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border: 1px solid #E2E8EE; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(17,42,67,.06); animation: dongu-gel .45s var(--egri, ease) both; }
.dongu-kart[hidden] { display: none; }
@keyframes dongu-gel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dongu-foto { position: relative; margin: 0; min-height: 380px; background: var(--lacivert); }
.dongu-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dongu-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,31,49,.1) 0%, rgba(12,31,49,0) 35%, rgba(12,31,49,.78) 100%); }
.dongu-foto .rozet-cam { position: absolute; z-index: 1; top: 18px; left: 18px; padding: .35rem .8rem; border-radius: 999px; background: rgba(17,42,67,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: .74rem; font-weight: 500; }
.dongu-foto figcaption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.4rem, 2.1vw, 2rem); line-height: 1.15; }
.dongu-foto figcaption span { display: block; font-family: Inter, sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .16em; color: rgba(255,255,255,.85); margin-bottom: .55rem; }
.dongu-metin { display: flex; flex-direction: column; padding: 2.2rem 2.4rem 2rem; }
.dongu-metin .ust-satir { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
.dongu-metin .etiket-k { font-size: .74rem; font-weight: 700; letter-spacing: .16em; color: var(--d-yesil); }
.dongu-metin .sayac { font-size: .8rem; color: var(--gri); font-variant-numeric: tabular-nums; }
.dongu-metin h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.6rem, 2.3vw, 2.25rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .9rem; text-wrap: balance; }
.dongu-metin p { color: var(--gri); line-height: 1.7; margin: 0 0 1.6rem; }
.dongu-metin .bag { margin-top: auto; border-left: 2px solid var(--d-yesil); padding: .15rem 0 .15rem 1rem; font-weight: 600; font-size: .95rem; color: var(--lacivert); }
.dongu-metin .bag span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .16em; color: var(--d-yesil); margin-bottom: .4rem; }
.dongu-metin .detay { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; font-weight: 600; font-size: .92rem; color: var(--d-yesil); text-decoration: none; }
.dongu-metin .detay svg { width: 22px; height: 22px; flex: none; transition: transform .25s; }
.dongu-metin .detay:hover { text-decoration: underline; text-underline-offset: 4px; }
.dongu-metin .detay:hover svg { transform: translate(2px, -2px); }
.dongu-kart.geri .etiket-k, .dongu-kart.geri .bag span, .dongu-kart.geri .detay { color: var(--d-mavi); }
.dongu-kart.geri .bag { border-left-color: var(--d-mavi); }
.dongu-alt { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 1.6rem; }
.dongu-alt p { margin: 0; font-size: .86rem; color: var(--gri); line-height: 1.55; }
.dongu-alt p b { color: var(--lacivert); font-weight: 600; }
.dongu-alt a { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; font-size: .92rem; color: var(--lacivert); text-decoration: none; white-space: nowrap; }
.dongu-alt a svg { width: 22px; height: 22px; transition: transform .25s; }
.dongu-alt a:hover svg { transform: translateX(3px); }
/* görsellerde özne kadrajı */
.dongu-foto img[data-foto="fizibilite"] { object-position: 62% 50%; }
.dongu-foto img[data-foto="hesap"] { object-position: 40% 50%; }

@media (max-width: 1100px) {
  .dongu-ust { grid-template-columns: 1fr; gap: 1.2rem; }
  .dongu-kart { grid-template-columns: 1fr; }
  .dongu-foto { min-height: 0; aspect-ratio: 16 / 8; }
}
@media (max-width: 700px) {
  .durak { grid-template-columns: 1fr; padding: 1.2rem .4rem .6rem 0; row-gap: .15rem; }
  .durak .no { grid-row: auto; width: 34px; height: 34px; font-size: .74rem; margin-bottom: .55rem; }
  .durak .ad { font-size: .86rem; }
  .durak .urun { font-size: .74rem; }
  .durak .cikti { display: none; }
  .durak::before { right: 18px; }
  .dongu-geri { padding: .85rem 1rem; gap: .8rem; align-items: flex-start; }
  .dongu-geri .git { display: none; }
  .dongu-geri small { font-size: .78rem; line-height: 1.45; }
  .dongu-foto { aspect-ratio: 16 / 9; }
  .dongu-foto figcaption { left: 18px; right: 18px; bottom: 18px; }
  .dongu-metin { padding: 1.5rem 1.3rem 1.4rem; }
  .dongu-alt { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .dongu-kart { animation: none; } }

/* ============ Tam Döngü ayrıntı katmanı (dongu.html) ============ */
.ayrinti { --d-yesil: #3E7C1F; --d-mavi: #24506B; }
.ayrinti-ic { max-width: 1040px; }
.ayrinti-geri { display: inline-block; font-size: .92rem; color: var(--yesil-koyu); text-underline-offset: 3px; margin-bottom: 2.2rem; }
.ayrinti-bas { margin-bottom: 2.2rem; }
.ayrinti-bas h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em; margin: .6rem 0 1rem; }
.ayrinti-bas h1 em { color: var(--yesil-koyu); }
.ayrinti-bas p { color: var(--gri); font-size: 1.08rem; line-height: 1.7; max-width: 62ch; margin: 0; }
.ayrinti-kart { display: block; background: #fff; border: 1px solid #E2E8EE; border-radius: 20px; padding: 2rem 2.2rem; margin-bottom: 1.4rem; scroll-margin-top: 110px; transition: border-color .3s, box-shadow .3s; }
.ayrinti-kart:target { border: 1.5px solid var(--d-mavi); box-shadow: 0 0 0 4px rgba(36,80,107,.07); }
.ayrinti-kart h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; margin: .7rem 0 1rem; }
.ayrinti-kart p { color: var(--gri); line-height: 1.75; margin: 0 0 1rem; }
.ayrinti-kart p:last-child { margin-bottom: 0; }
.ayrinti-etiket { display: inline-flex; align-items: center; gap: .8rem; font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: #4A5B6C; }
.ayrinti-etiket::before { content: ""; width: 30px; height: 2px; background: currentColor; }
.ayrinti-cipler h2 { margin-top: 0; }
.ayrinti-cipler div { display: flex; flex-wrap: wrap; gap: .7rem; }
.ayrinti-cipler a { padding: .55rem 1rem; border: 1px solid #DCE4EA; border-radius: 10px; font-size: .88rem; font-weight: 500; color: var(--yesil-koyu); text-decoration: none; transition: border-color .2s, background .2s; }
.ayrinti-cipler a:hover { border-color: var(--yesil); background: #F5FAF0; }
.ayrinti-not { background: #E6EFF3; border-left: 3px solid var(--d-mavi); padding: 1rem 1.3rem; color: #3D5568 !important; }
.ayrinti-not b { color: var(--lacivert); }
.ayrinti-kart ul { margin: 0 0 1rem; padding-left: 1.6rem; color: var(--gri); line-height: 1.8; }
.ayrinti-kart ul b { color: #4A5B6C; }
.ayrinti-satirlar { margin: 0 0 1.2rem; }
.ayrinti-satirlar div { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid #E2E8EE; }
.ayrinti-satirlar dt { font-weight: 700; color: var(--lacivert); }
.ayrinti-satirlar dd { margin: 0; color: var(--gri); }
.ayrinti-gun { list-style: none; margin: 1rem 0 0; padding: 0; }
.ayrinti-gun li { display: flex; gap: 1.1rem; padding: 1rem 0; border-bottom: 1px solid #E2E8EE; color: var(--gri); line-height: 1.6; }
.ayrinti-gun li span { font-weight: 700; color: var(--d-yesil); min-width: 1.6rem; }
.ayrinti-gun li b { display: block; color: #4A5B6C; }
@media (max-width: 700px) {
  .ayrinti-kart { padding: 1.5rem 1.3rem; border-radius: 16px; }
  .ayrinti-satirlar div { grid-template-columns: 1fr; gap: .25rem; }
}
/* Tam Döngü kartı: program logosu — fotoğrafta dişi (başlığın üstünde), metinde renkli (etiketin üstünde); görünen sol kenardan hizalı */
.dongu-foto figcaption svg.pk.dongu-ikon-foto { --w: clamp(36px, 3.4vw, 50px); display: block; width: var(--w); height: var(--w); color: #fff; --pk-vurgu: #9BE15D; margin: 0 0 .9rem calc(var(--pk-sol, 0) * -1 * var(--w)); }
.dongu-metin svg.pk.dongu-ikon { --w: clamp(32px, 2.6vw, 40px); display: block; width: var(--w); height: var(--w); color: var(--lacivert); --pk-vurgu: #4E8920; margin: 0 0 .8rem calc(var(--pk-sol, 0) * -1 * var(--w)); }
svg.pk.pk-dongu { --pk-sol: .1; }
@media (max-width: 700px) { .dongu-foto figcaption svg.pk.dongu-ikon-foto { --w: 34px; margin-bottom: .6rem; } }

/* ============================================================
   REHBERLİ TUR (11 Eki 2026) — motor js/tur.js, adımlar js/tur-adimlar.js
   ============================================================ */
.tur-d { font: inherit; font-weight: 600; font-size: .9rem; height: 40px; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--kenar); background: #fff; color: var(--lacivert); cursor: pointer; transition: background .2s, border-color .2s; }
.tur-d:hover { background: var(--zemin-2); }
.tur-d:focus-visible, .tur-kapat:focus-visible { outline: 2px solid var(--lacivert); outline-offset: 2px; }
.tur-d-ana { background: var(--yesil-koyu); border-color: var(--yesil-koyu); color: #fff; }
.tur-d-ana:hover { background: #33691A; border-color: #33691A; }
.tur-d-yazi { border-color: transparent; background: transparent; color: var(--gri); padding: 0 .5rem; font-weight: 500; }
.tur-d-yazi:hover { background: transparent; color: var(--lacivert); text-decoration: underline; }
.tur-d[hidden] { display: none; }

.tur-kok { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.tur-perde { position: fixed; background: rgba(6, 17, 28, .58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; }
.tur-halka { position: fixed; border-radius: 16px; box-shadow: 0 0 0 2px var(--yesil-neon), 0 0 0 7px rgba(155, 225, 93, .22); pointer-events: none; transition: left .3s var(--egri), top .3s var(--egri), width .3s var(--egri), height .3s var(--egri); }
.tur-balon { position: fixed; width: min(340px, calc(100vw - 24px)); padding: 1.15rem 1.2rem 1rem; border-radius: 18px; background: #fff; color: var(--lacivert); border: 1px solid var(--kenar); box-shadow: 0 22px 60px rgba(4, 14, 24, .45); pointer-events: auto; overflow: visible; transition: left .3s var(--egri), top .3s var(--egri); }
.tur-balon::after { content: ""; position: absolute; left: var(--ok-x, 50%); width: 14px; height: 14px; margin-left: -7px; background: #fff; border: 1px solid var(--kenar); transform: rotate(45deg); }
.tur-balon[data-yer="ust"]::after { bottom: -8px; border-top: 0; border-left: 0; }
.tur-balon[data-yer="alt"]::after { top: -8px; border-bottom: 0; border-right: 0; }
.tur-ilerleme { position: absolute; left: 18px; right: 18px; top: 0; height: 3px; background: var(--zemin-2); border-radius: 0 0 3px 3px; overflow: hidden; }
.tur-ilerleme i { display: block; height: 100%; background: var(--yesil); transition: width .35s var(--egri); }
.tur-sayac { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--yesil-koyu); }
.tur-balon h2 { margin: .2rem 2rem .35rem 0; font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--lacivert); }
.tur-balon p { margin: 0 0 .95rem; font-size: .93rem; line-height: 1.5; color: #46586B; }
.tur-dugmeler { display: flex; justify-content: flex-end; gap: .5rem; }
.tur-kapat { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--gri); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.tur-kapat:hover { background: var(--zemin-2); color: var(--lacivert); }
html.tur-acik .wa-dugme { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tur-halka, .tur-balon, .tur-ilerleme i { transition: none; } }

/* ============ HERO VİTRİN KARTI = BİLGİ KARTI (11 Eki 2026) ============
   .aile-bilgi kuralları (yapışkan konum, kenar boşluğu) hero'daki kopyada geçersiz; eğim ve gölge hero'ya özgü. */
.ucan.ucan-kart { position: absolute; top: auto; margin: 0; z-index: 3; pointer-events: none; transform-origin: 0 0; transform: rotateY(-10deg) rotateX(4deg); box-shadow: 0 24px 50px rgba(10,27,44,.45); }
.ucan.ucan-kart.olcum { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .ucan.ucan-kart { transform: none !important; } }

/* ============================================================
   ÜRÜN SAYFALARI + ANA SAYFA v3 (12 Eki 2026 brief'i): beş program, yedi profil, bölüm bağlantıları.
   Kaynak: outputs/suruplan-web-master-brief_2026-10-12 · üretici: arac/urun_sayfa_uret.py, arac/anasayfa_uret.py
   ============================================================ */
/* --- Üst çubuk: beş ürün --- */
.ust nav .urun-grubu.bes a { padding: .5rem .6rem; }
@media (min-width: 901px) and (max-width: 1440px) { .ust nav .urun-grubu.bes a { padding: .45rem .45rem; font-size: .8rem; gap: .3rem; } .ust nav .urun-grubu.bes a svg.pk { width: 16px; height: 16px; } }
@media (min-width: 601px) and (max-width: 760px) { .ust nav .urun-grubu.bes a span { display: none; } .ust nav .urun-grubu.bes a { padding: .45rem .45rem; } }
svg.pk:has(use[href$="#danisman"]) { --pk-sol: .176; --pk-alt: .083; }  /* rapor sayfası 210×270, kare viewBox %20 pay */

/* --- Ortak: etiket-k, kanıt notu, temsili rozet, ekran düğmesi --- */
.etiket-k { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--yesil-koyu); margin-bottom: .35rem; }
.koyu .etiket-k { color: var(--yesil-neon); }
.kanit-notu { font-size: .82rem; color: var(--gri); margin: .7rem 0 0; line-height: 1.5; max-width: 60ch; }
.koyu .kanit-notu { color: var(--soluk); }
.rozet-temsili { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gri); border: 1px dashed rgba(17,42,67,.35); border-radius: 999px; padding: .3rem .7rem; }
.rozet-temsili::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gri); }
.ekran-buton { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.ekran-buton img { cursor: zoom-in; }
.ekran-buton:focus-visible { outline: 3px solid var(--yesil-acik); outline-offset: -3px; }
.buyut .kapat { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center; }
.buyut figcaption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--soluk); font-size: .85rem; max-width: 90%; text-align: center; }
.us-kanit .cihaz { box-shadow: 0 30px 60px rgba(17,42,67,.18); }
.us-kanit.genis { max-width: 980px; margin: 2.4rem auto 0; }

/* --- Ürün hero --- */
.us-hero { padding: 140px 0 70px; }
.us-hero .ic { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 3.5rem; }
.us-hero .kimlik { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.us-hero .urun-rozet { display: inline-flex; align-items: center; gap: .45rem; font-family: "Rajdhani", "Inter", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.us-hero .urun-rozet svg.pk { width: 24px; height: 24px; color: #fff; --pk-vurgu: #9BE15D; }
.us-hero .rol { font-size: .85rem; color: var(--soluk); padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.2); }
.us-hero .ic-ses { font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; color: #DCE8CF; margin: 0 0 1rem; max-width: 40ch; line-height: 1.4; }
.us-hero .ic-ses .etiket-k { font-family: Inter, sans-serif; font-style: normal; }
.us-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 17ch; }
.us-hero .giris { max-width: 52ch; }
.us-hero .dugmeler { margin-top: 1.6rem; }
.us-hero-gorsel { position: relative; padding-bottom: 12%; }
.us-hero-gorsel .foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #0C1F31; box-shadow: var(--golge-b); }
.us-hero-gorsel .foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.us-hero-gorsel .cihaz.ekran { position: absolute; left: -8%; bottom: 0; width: 66%; box-shadow: var(--golge-b); }
.us-hero-tipografik { position: relative; border-radius: 26px; padding: 2.4rem 2.2rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); overflow: hidden; min-height: 300px; display: grid; align-content: center; }
.us-hero-tipografik p { font-family: Georgia, serif; font-size: clamp(1.9rem, 3.2vw, 2.8rem); line-height: 1.15; color: #fff; margin: 0; }
.us-hero-tipografik .etiket { color: var(--yesil-neon); }
.us-hero-tipografik svg.pk.buyuk { position: absolute; right: -6%; bottom: -12%; width: 46%; height: auto; aspect-ratio: 1; color: rgba(255,255,255,.06); --pk-vurgu: rgba(155,225,93,.25); }

/* --- Bölüm menüsü (yapışkan) --- */
.us-nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--kenar); }
.us-nav .ic { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .25rem 0; }
.us-nav .ic::-webkit-scrollbar { display: none; }
.us-nav a { flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gri); padding: .7rem .7rem; border-bottom: 2px solid transparent; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.us-nav a:hover, .us-nav a.aktif { color: var(--lacivert); border-color: var(--yesil); }
.us-nav a.vurgulu { color: var(--yesil-koyu); margin-left: auto; }

/* --- Bölüm başlığı --- */
.us-bolum { scroll-margin-top: 60px; }
.us-baslik { max-width: 70ch; margin-bottom: 2.4rem; }
.us-baslik h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); max-width: 26ch; }
.us-lead { color: var(--gri); font-size: 1.12rem; line-height: 1.65; max-width: 64ch; margin: 0; }
.koyu .us-lead { color: var(--soluk); }

/* --- Düzenler --- */
.us-ikili { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.us-ikili.ters > :first-child { order: 2; }
.us-maddeler { display: grid; gap: 1.1rem; margin: 0; }
.us-maddeler > div { padding-left: 1.2rem; border-left: 3px solid rgba(95,165,36,.4); }
.us-maddeler dt { font-weight: 700; color: var(--lacivert); font-size: 1.05rem; }
.us-maddeler dd { margin: .2rem 0 0; color: var(--gri); line-height: 1.55; }
.koyu .us-maddeler dt { color: #fff; } .koyu .us-maddeler dd { color: var(--soluk); }
.us-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--lacivert); border-bottom: 2px solid rgba(17,42,67,.15); padding-bottom: .15rem; }
.us-link svg { width: 16px; height: 16px; } .us-link:hover { border-color: var(--yesil); }
.koyu .us-link { color: #fff; border-color: rgba(255,255,255,.25); }
.us-linkler { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; margin-top: 1.6rem; }

/* Üç soru, geniş çalışma yüzeyi (Hesap ihtiyaç) */
.us-yuzey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--kenar); border: 1px solid var(--kenar); border-radius: var(--kose-b); overflow: hidden; }
.us-yuzey .soru { display: grid; align-content: start; gap: .5rem; padding: 2rem 1.8rem 1.8rem; background: #F7F9F4; color: inherit; transition: background .3s; }
.us-yuzey .soru:hover { background: #fff; }
.us-yuzey .soru b { font-family: Georgia, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--lacivert); }
.us-yuzey .soru span { color: var(--gri); line-height: 1.5; }
.us-yuzey .soru i { font-style: normal; font-weight: 700; color: var(--yesil-koyu); margin-top: .6rem; }
.us-yuzey .soru i::after { content: " →"; }

/* Duraklı şema (kayıt → dağılım → değerlendirme) */
.us-duraklar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; position: relative; }
.us-duraklar::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: linear-gradient(180deg, var(--yesil), rgba(95,165,36,.2)); }
.us-duraklar li { position: relative; padding-left: 56px; counter-increment: durak; }
.us-duraklar li::before { content: counter(durak); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--yesil); color: var(--yesil-koyu); font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.koyu .us-duraklar li::before { background: var(--lacivert); color: var(--yesil-neon); }
.us-duraklar b { display: block; font-size: 1.15rem; color: var(--lacivert); } .koyu .us-duraklar b { color: #fff; }
.us-duraklar span { color: var(--gri); } .koyu .us-duraklar span { color: var(--soluk); }
.us-duraklar li:last-child b { color: var(--yesil-koyu); } .koyu .us-duraklar li:last-child b { color: var(--yesil-neon); }

/* İki muhatap (Hesap muhasebe) */
.us-okurlar { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.4rem; }
.us-okurlar .okur { border-radius: var(--kose-b); padding: 1.6rem 1.7rem; background: #F3F6EE; }
.us-okurlar .okur:nth-child(2) { background: var(--zemin-2); }
.us-okurlar .okur p { margin: 0; color: var(--metin); line-height: 1.6; }

/* Faaliyet haritası (Hesap besi) */
.us-faaliyetler { display: grid; gap: 1rem; }
.us-faaliyetler .faaliyet { border: 1px solid var(--kenar); border-radius: 18px; padding: 1.2rem 1.3rem; background: #fff; display: grid; gap: .3rem; }
.us-faaliyetler .faaliyet b { font-size: 1.05rem; } .us-faaliyetler .faaliyet p { margin: 0; color: var(--gri); }
.us-faaliyetler .durum { justify-self: start; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.us-faaliyetler .durum.hazir { background: rgba(95,165,36,.14); color: var(--yesil-koyu); }
.us-faaliyetler .durum.ortak { border: 1px dashed rgba(17,42,67,.4); color: var(--lacivert); }

/* Adım akışı (Hesap başlangıç) */
.us-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; counter-reset: adim; }
.us-adimlar li { counter-increment: adim; display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: start; padding: .9rem 1rem; border-radius: 16px; background: var(--zemin-2); }
.us-adimlar li::before { content: counter(adim, decimal-leading-zero); font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--yesil-koyu); padding-top: .35rem; }
.us-adimlar b { display: block; } .us-adimlar span { color: var(--gri); font-size: .95rem; }

/* Bağlantı haritası (ürün merkezde) */
.us-bag { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; }
.us-bag .merkez { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: .3rem; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); }
.us-bag .merkez svg.pk { width: 54px; height: 54px; color: #fff; --pk-vurgu: #9BE15D; }
.us-bag .merkez b { font-family: "Rajdhani", sans-serif; font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.us-bag .merkez small { color: var(--soluk); font-size: .8rem; }
.bag-kartlar { display: grid; gap: .9rem; }
.bag-kart { display: grid; grid-template-columns: 40px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; transition: border-color .25s, transform .25s; }
.bag-kart:hover { border-color: rgba(155,225,93,.6); transform: translateX(4px); }
.bag-kart svg.pk { width: 32px; height: 32px; color: #fff; --pk-vurgu: #9BE15D; }
.bag-kart b { font-size: 1.05rem; }
.bag-kart span { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yesil-neon); border: 1px dashed rgba(155,225,93,.5); border-radius: 999px; padding: .25rem .6rem; white-space: nowrap; }
section.bolum:not(.koyu) .us-bag .merkez { background: var(--lacivert); border: 0; }
section.bolum:not(.koyu) .bag-kart { background: #fff; border-color: var(--kenar); color: var(--lacivert); }
section.bolum:not(.koyu) .bag-kart svg.pk { color: var(--lacivert); --pk-vurgu: var(--yesil-koyu); }
section.bolum:not(.koyu) .bag-kart span { color: var(--yesil-koyu); border-color: rgba(62,124,31,.5); }

/* Fotoğraf + sebep etiketleri (Besleme ihtiyaç) */
.us-foto-etiket { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.us-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: #0C1F31; }
.us-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; display: block; }
.us-foto-etiket .etiketler { display: grid; gap: .9rem; }
.etiket-kart { padding: 1.1rem 1.3rem; border-radius: 16px; background: #F3F6EE; border-left: 4px solid var(--yesil); }
.etiket-kart b { display: block; font-size: 1.05rem; } .etiket-kart span { color: var(--gri); }

/* Denge diyagramı (Besleme maliyet) */
.us-denge { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: start; }
.denge { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.denge .girdiler { display: grid; gap: .8rem; }
.denge .alan { padding: 1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid var(--kenar); }
.denge .alan b { display: block; font-size: 1.05rem; } .denge .alan span { color: var(--gri); font-size: .95rem; }
.denge .sonuc { position: relative; }
.denge .sonuc::before { content: "→"; position: absolute; left: -1.6rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: var(--yesil); }
.denge .sonuc .alan { background: var(--lacivert); border: 0; color: #fff; } .denge .sonuc .alan span { color: var(--soluk); }
.secici { display: grid; gap: .8rem; padding: 1.3rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--kenar); }
.secici-etiket { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gri); }
.secici-dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; }
.secici-dugmeler button { font: inherit; font-weight: 700; font-size: .9rem; padding: .5rem 1rem; min-height: 40px; border-radius: 999px; border: 1px solid var(--kenar); background: #fff; color: var(--lacivert); cursor: pointer; transition: all .2s; }
.secici-dugmeler button[aria-selected="true"] { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.secici-dugmeler button:focus-visible { outline: 2px solid var(--yesil-acik); outline-offset: 2px; }
.secici-panel b { display: block; margin-bottom: .2rem; } .secici-panel p { margin: 0; color: var(--gri); line-height: 1.6; }
.secici-panel ul { margin: 0; padding-left: 1.2rem; color: var(--metin); display: grid; gap: .3rem; }
.koyu .secici { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.koyu .secici-dugmeler button { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.koyu .secici-dugmeler button[aria-selected="true"] { background: var(--yesil); border-color: var(--yesil); }
.koyu .secici-panel p, .koyu .secici-etiket { color: var(--soluk); }

/* Zincir (Besleme analiz) */
.us-zincir { display: grid; grid-template-columns: .8fr .9fr 1.4fr; gap: 1.2rem; align-items: center; }
.us-zincir .halka { position: relative; }
.us-zincir .halka + .halka::before { content: "→"; position: absolute; left: -1.1rem; top: 50%; transform: translateY(-50%); color: var(--yesil); font-size: 1.4rem; }
.us-zincir .halka.foto { margin: 0; aspect-ratio: 1; border-radius: 20px; overflow: hidden; }
.us-zincir .halka.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-zincir .halka.foto figcaption { position: absolute; left: 12px; bottom: 12px; color: #fff; font-weight: 700; font-size: .9rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.us-zincir .degerler { padding: 1.2rem 1.3rem; border-radius: 20px; background: #F3F6EE; }
.us-zincir .degerler ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.us-zincir .degerler small { display: block; margin-top: .7rem; color: var(--gri); font-size: .78rem; }

/* İşaretli ekran */
.us-isaretli { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: center; }
.isaretler { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.isaretler li { display: grid; grid-template-columns: 34px 1fr; gap: .9rem; align-items: start; }
.isaretler .no { width: 34px; height: 34px; border-radius: 50%; background: var(--yesil); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.isaretler b { display: block; } .isaretler li > div > span { color: var(--gri); }
.koyu .isaretler b { color: #fff; } .koyu .isaretler li > div > span { color: var(--soluk); }

/* Aktarım (Besleme saha: özet → dosya → vagon emri) */
.us-aktarim { display: grid; grid-template-columns: 1fr auto 1.3fr; gap: 1.5rem; align-items: center; }
.us-aktarim .ozet { list-style: none; margin: 0; padding: 1.3rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--kenar); display: grid; gap: .8rem; }
.us-aktarim .ozet b { display: block; } .us-aktarim .ozet span { color: var(--gri); font-size: .95rem; }
.aktarim-etiketi { display: grid; place-items: center; position: relative; min-width: 120px; }
.aktarim-etiketi::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(17,42,67,.3); }
.aktarim-etiketi span { position: relative; background: var(--zemin-2); padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lacivert); border: 1px dashed rgba(17,42,67,.4); }
section.bolum:not(.acik-zemin) .aktarim-etiketi span { background: #fff; }
.aktarim-etiketi.dikey { min-height: 90px; min-width: 0; }
.aktarim-etiketi.dikey::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed rgba(17,42,67,.3); }

/* Kapsam dizini + galeri */
.kapsam-dizin { border-top: 1px solid var(--kenar); }
.kapsam-madde { border-bottom: 1px solid var(--kenar); }
.kapsam-madde summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 700; color: var(--lacivert); min-height: 44px; }
.kapsam-madde summary::-webkit-details-marker { display: none; }
.kapsam-madde .isaret { position: relative; width: 22px; height: 22px; flex: none; }
.kapsam-madde .isaret::before, .kapsam-madde .isaret::after { content: ""; position: absolute; left: 3px; top: 10px; width: 16px; height: 2px; background: var(--lacivert); border-radius: 2px; transition: transform .3s var(--gecis); }
.kapsam-madde .isaret::after { transform: rotate(90deg); } .kapsam-madde[open] .isaret::after { transform: rotate(0); }
.kapsam-madde p { margin: 0 0 1.1rem; color: var(--gri); line-height: 1.6; max-width: 80ch; }
.us-galeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.us-galeri .cihaz-bar span { font-size: .68rem; }

/* Rota (Yem ihtiyaç) */
.us-rota { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem; align-items: center; }
.rota { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; position: relative; }
.rota::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 24px; border-left: 2px dashed rgba(95,165,36,.5); }
.rota li { position: relative; padding-left: 58px; }
.rota .no { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--lacivert); color: #fff; font-weight: 800; display: grid; place-items: center; }
.rota b { display: block; font-size: 1.1rem; } .rota li > span:last-child { color: var(--gri); }

/* Fark çizgisi (Yem plan ve gerçekleşen) — kavramsal, sayısız */
.fark { display: grid; gap: .7rem; padding: 1.3rem 1.4rem; border-radius: 20px; background: #F3F6EE; margin-bottom: 1.4rem; }
.fark .satir { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: .8rem; font-size: .9rem; font-weight: 700; color: var(--lacivert); }
.fark .bar { display: block; height: 14px; border-radius: 7px; background: var(--lacivert); }
.fark .bar.hedef { width: 78%; background: rgba(17,42,67,.35); }
.fark .bar.yuklenen { width: 86%; }
.fark .bar.artik { width: 16%; background: var(--yesil); }
.fark em { font-style: normal; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--yesil-koyu); }
.fark small { color: var(--gri); font-size: .78rem; }

/* Karar ağacı (Yem donanım) */
.us-agac .kok { font-family: Georgia, serif; font-size: 1.4rem; margin: 0 0 1.4rem; color: var(--lacivert); }
.us-agac .dallar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; position: relative; }
.us-agac .dallar li { padding: 1.3rem 1.4rem; border-radius: 18px; background: #fff; border: 1px solid var(--kenar); border-top: 4px solid var(--yesil); }
.us-agac .dallar b { display: block; font-size: 1.05rem; margin-bottom: .2rem; } .us-agac .dallar span { color: var(--gri); }

/* Zaman ekseni (Fizibilite ihtiyaç) */
.us-eksen { position: relative; padding: 1rem 0 0; }
.us-eksen .cizgi { height: 2px; background: linear-gradient(90deg, var(--yesil), rgba(95,165,36,.15)); margin: 0 6%; }
.us-eksen .noktalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: -11px; }
.us-eksen .nokta { display: grid; gap: .4rem; color: inherit; padding: 0 6%; }
.us-eksen .nokta i { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--yesil); display: block; margin-bottom: .6rem; }
.us-eksen .nokta b { font-family: Georgia, serif; font-weight: 400; font-size: 1.5rem; color: var(--lacivert); }
.us-eksen .nokta span { color: var(--gri); }
.us-eksen .nokta:hover b { color: var(--yesil-koyu); }
.eksen-not { font-size: .82rem; color: var(--gri); margin: 1.6rem 0 0; }

/* İki şerit (Fizibilite sürü–nakit) */
.us-seritler { display: grid; gap: 0; }
.us-seritler .serit { border-radius: 20px; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid var(--kenar); }
.us-seritler .evreler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.us-seritler .evreler span { text-align: center; padding: .6rem .4rem; border-radius: 12px; background: var(--lacivert); color: #fff; font-weight: 700; font-size: .9rem; }
.us-seritler .baglar { display: grid; grid-template-columns: repeat(3, 1fr); height: 40px; }
.us-seritler .baglar i { justify-self: center; width: 2px; height: 100%; border-left: 2px dashed rgba(95,165,36,.6); }
.us-seritler .serit.alt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.us-seritler .serit.alt b { display: block; } .us-seritler .serit.alt span { color: var(--gri); font-size: .95rem; }
.us-seritler small { display: block; margin-top: .8rem; color: var(--gri); font-size: .78rem; }

/* Rapor özetleri (Fizibilite raporlar) */
.us-ozetler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ozet-kart { padding: 1.5rem 1.5rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid var(--kenar); border-top: 6px solid var(--lacivert); }
.ozet-kart b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.35rem; margin-bottom: .4rem; } .ozet-kart p { margin: 0; color: var(--gri); }

/* Kontrol (Fizibilite) */
.us-kontrol .acik-madde { padding: 1.4rem 1.5rem; border-radius: 18px; background: #FFF7E6; border-left: 5px solid #E0A526; }
.us-kontrol .acik-madde b { display: block; font-size: 1.2rem; margin-bottom: .3rem; } .us-kontrol .acik-madde p { margin: 0; color: var(--metin); line-height: 1.6; }

/* Plan ve gerçekleşen (Fizibilite) */
.us-plangercek { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.2rem; align-items: stretch; }
.us-plangercek .kolon { padding: 1.3rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--kenar); }
.us-plangercek .kolon ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.us-plangercek .sonuc { grid-column: 1 / -1; margin: .4rem 0 0; font-weight: 700; color: var(--yesil-koyu); }

/* Danışman: temsili belge sahnesi + rapor şeması + iş–ürün eşleştirmesi */
.us-sahne { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.us-sahne .belge { position: relative; padding: 1.4rem; border-radius: 24px; background: var(--zemin-2); display: grid; gap: 1rem; justify-items: center; }
.us-sahne .sayfa { width: min(280px, 80%); aspect-ratio: 3 / 4; background: #fff; border-radius: 12px; box-shadow: var(--golge); padding: 2rem 1.6rem; display: grid; align-content: start; gap: .7rem; }
.us-sahne .satir { display: block; height: 8px; border-radius: 4px; background: rgba(17,42,67,.12); width: 100%; }
.us-sahne .satir.b { height: 14px; width: 60%; background: rgba(17,42,67,.5); } .us-sahne .satir.k { width: 70%; }
.us-sahne .vurgu { display: block; height: 28px; border-radius: 6px; background: rgba(95,165,36,.18); border-left: 4px solid var(--yesil); width: 100%; }
.us-sahne .okurlar { display: flex; gap: 2rem; }
.us-sahne .okurlar span { font-size: .8rem; font-weight: 700; color: var(--lacivert); padding: .4rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--kenar); }
.us-sahne .sahne-metin p { font-size: 1.15rem; line-height: 1.7; color: var(--metin); margin: 0; }
.us-rapor-sema .parcalar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 1.2rem 0 0; border: 1px solid var(--kenar); border-radius: 20px; overflow: hidden; background: #fff; }
.us-rapor-sema .parca { padding: 1.8rem 1.6rem; border-right: 1px solid var(--kenar); }
.us-rapor-sema .parca:last-child { border-right: 0; }
.us-rapor-sema .parca .no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lacivert); color: #fff; font-weight: 800; font-size: .8rem; margin-bottom: .7rem; }
.us-rapor-sema .parca b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.4rem; } .us-rapor-sema .parca p { margin: .3rem 0 0; color: var(--gri); }
.us-isurun { display: grid; gap: .8rem; }
.is-satir { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 16px; background: #fff; border: 1px solid var(--kenar); color: inherit; transition: border-color .2s; }
.is-satir:hover { border-color: var(--yesil); }
.is-satir .is { font-weight: 700; color: var(--lacivert); } .is-satir .ok { color: var(--yesil); font-size: 1.3rem; }
.is-satir .urun { display: inline-flex; align-items: center; gap: .6rem; color: var(--metin); } .is-satir .urun svg.pk { width: 26px; height: 26px; color: var(--lacivert); --pk-vurgu: var(--yesil-koyu); }
.us-bilgi { display: grid; justify-items: start; gap: .6rem; }
.us-sss { max-width: 860px; }

/* Teklif formu: iletişim tercihi, konu alanı, birim, durum */
.teklif-form .alan-secim { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.teklif-form .alan-secim > span { width: 100%; font-size: .85rem; font-weight: 600; color: var(--metin-acik); }
.teklif-form label[hidden] { display: none; }
.teklif-form .birim { display: flex; align-items: center; gap: .6rem; } .teklif-form .birim i { font-style: normal; color: var(--soluk); font-size: .85rem; }
.teklif-form input[type=radio] { position: absolute; opacity: 0; }
.teklif-form .durum { margin: 0; font-size: .95rem; font-weight: 600; color: var(--yesil-neon); min-height: 1.2em; }
.teklif-form .durum.hata { color: #F0715F; }
.teklif-form.eksik [name=ad]:invalid, .teklif-form.eksik [name=telefon]:invalid, .teklif-form.eksik [name=eposta]:invalid { border-color: #F0715F; }

/* --- Ana sayfa: varlık sebebi, ürün ailesi (5), kimin için, örnek, başlangıç --- */
#varlik .varlik-duzen { display: grid; grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: center; }
#varlik h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 18ch; }
#varlik .varlik-metin p { font-size: 1.12rem; line-height: 1.7; color: var(--metin); max-width: 58ch; }
#varlik .varlik-metin p.son { font-family: Georgia, serif; font-style: italic; color: var(--lacivert); font-size: 1.25rem; }
.istasyonlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.istasyonlar li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: start; padding: 1.1rem 0; position: relative; }
.istasyonlar li + li::before { content: ""; position: absolute; left: 27px; top: -14px; height: 28px; border-left: 2px solid rgba(95,165,36,.5); }
.istasyonlar .ik { width: 56px; height: 56px; border-radius: 16px; border: 1.5px solid var(--lacivert); display: grid; place-items: center; color: var(--lacivert); background: #fff; }
.istasyonlar .ik svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.istasyonlar li:last-child .ik { border-color: var(--yesil); color: var(--yesil-koyu); background: rgba(95,165,36,.08); }
.istasyonlar b { display: block; font-size: 1.1rem; } .istasyonlar span { color: var(--gri); }
#urunler .aile-izgara.bes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aile-kutu.kutu-tipografik { background: linear-gradient(160deg, #163657, var(--lacivert)); }
.aile-kutu.kutu-tipografik .belge-ikon { position: absolute; right: 10%; top: 12%; width: 34%; color: rgba(255,255,255,.14); --pk-vurgu: rgba(155,225,93,.45); }
.aile-kutu.kutu-tipografik .belge-ikon svg { width: 100%; height: auto; aspect-ratio: 1; }
#kimin-icin .profil-giris { max-width: 60ch; margin-bottom: 2rem; }
.profil-gruplar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.5rem; margin-bottom: 2rem; }
.profil-grup .etiket-k { margin-bottom: .6rem; }
.profil-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.profil-dugme { font: inherit; font-weight: 700; font-size: .95rem; padding: .6rem 1.1rem; min-height: 44px; border-radius: 999px; border: 1px solid var(--kenar); background: #fff; color: var(--lacivert); cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: all .2s; }
.profil-dugme:hover { border-color: var(--lacivert); }
.profil-dugme[aria-selected="true"] { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.profil-dugme[aria-selected="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yesil-neon); }
.profil-dugme:focus-visible { outline: 2px solid var(--yesil-acik); outline-offset: 2px; }
.profil-hikaye { display: grid; grid-template-columns: 7fr 5fr; gap: 3rem; align-items: start; padding: 2.4rem 2.6rem; border-radius: 28px; background: #F3F6EE; animation: gel .45s var(--gecis); }
.profil-hikaye[hidden] { display: none; }
.profil-hikaye .grup-adi { font-size: .78rem; color: var(--gri); margin-bottom: .6rem; }
.profil-hikaye .soru { font-family: Georgia, serif; font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; color: var(--lacivert); margin: 0 0 1rem; }
.profil-hikaye h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.profil-hikaye .aciklama { color: var(--metin); line-height: 1.7; margin: 0 0 1.2rem; }
.profil-hikaye .faydalar { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.profil-hikaye .faydalar li { position: relative; padding-left: 1.6rem; }
.profil-hikaye .faydalar li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 12px; height: 12px; border-radius: 50%; background: rgba(95,165,36,.2); box-shadow: inset 0 0 0 2px var(--yesil); }
.profil-hikaye .us-linkler { margin-top: .4rem; }
.profil-gorsel { display: grid; gap: .8rem; align-content: start; }
.profil-gorsel .cihaz { box-shadow: 0 24px 50px rgba(17,42,67,.18); }
.profil-gorsel .sema { padding: 1.3rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--kenar); display: grid; gap: .6rem; }
.profil-gorsel .sema .etiket-k { margin: 0; }
.profil-gorsel .sema ol, .profil-gorsel .sema ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.profil-gorsel .sema li { display: grid; grid-template-columns: 26px 1fr; gap: .6rem; align-items: start; }
.profil-gorsel .sema li i { width: 26px; height: 26px; border-radius: 8px; background: var(--lacivert); color: #fff; font-style: normal; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.profil-gorsel .sema li.ornek i { background: rgba(17,42,67,.12); color: var(--lacivert); }
.profil-gorsel .sema li b { display: block; } .profil-gorsel .sema li span { color: var(--gri); font-size: .92rem; }
.profil-gorsel .sema .yollar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.profil-gorsel .sema .yol { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--kenar); }
.profil-gorsel .sema .yol b { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.1rem; }
.profil-gorsel .sema .yol span { color: var(--gri); font-size: .88rem; }
.profil-gorsel .iki { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.profil-gorsel .iki .cihaz-bar span { font-size: .66rem; }
#ornek .ornek-duzen { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: center; }
#ornek .ornek-ekran { position: relative; }
#ornek .isaret-nokta { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: var(--yesil); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(95,165,36,.3); z-index: 2; pointer-events: none; }
#baslangic .baslangic-duzen { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
#baslangic .surec { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: s; }
#baslangic .surec li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; }
#baslangic .surec li::before { content: counter(s); width: 40px; height: 40px; border-radius: 12px; background: var(--lacivert); color: #fff; font-weight: 800; display: grid; place-items: center; }
#baslangic .surec b { display: block; font-size: 1.05rem; } #baslangic .surec span { color: var(--gri); }
#baslangic .ek-bag { margin-top: 1.6rem; }
.bant .oge b { margin-right: .4rem; }

/* --- Duyarlılık --- */
@media (max-width: 1100px) {
  .us-hero .ic { grid-template-columns: 1fr; gap: 2.4rem; }
  .us-hero-gorsel { padding-bottom: 8%; max-width: 640px; }
  .us-hero-gorsel .cihaz.ekran { left: -4%; width: 62%; }
  .us-zincir { grid-template-columns: 1fr 1fr; } .us-zincir .halka.ekran { grid-column: 1 / -1; }
  .us-zincir .halka.ekran::before { display: none; }
  .profil-hikaye { grid-template-columns: 1fr; padding: 1.8rem; }
  .us-bag { grid-template-columns: 180px 1fr; }
}
@media (max-width: 900px) {
  .us-hero { padding: 120px 0 56px; }
  .us-hero h1 { font-size: clamp(2.1rem, 7vw, 2.8rem); }
  .us-ikili, .us-foto-etiket, .us-denge, .us-isaretli, .us-rota, .us-sahne, #varlik .varlik-duzen, #ornek .ornek-duzen, #baslangic .baslangic-duzen { grid-template-columns: 1fr; gap: 1.8rem; }
  .us-ikili.ters > :first-child { order: 0; }
  .us-yuzey { grid-template-columns: 1fr; }
  .us-okurlar { grid-template-columns: 1fr; }
  .us-aktarim { grid-template-columns: 1fr; } .aktarim-etiketi { min-height: 60px; min-width: 0; } .aktarim-etiketi::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed rgba(17,42,67,.3); }
  .us-zincir { grid-template-columns: 1fr; } .us-zincir .halka + .halka::before { content: "↓"; left: 50%; top: -1.3rem; transform: translateX(-50%); }
  .us-galeri, .us-agac .dallar, .us-ozetler, .us-rapor-sema .parcalar, .us-eksen .noktalar, .us-seritler .serit.alt, .us-seritler .evreler { grid-template-columns: 1fr; }
  .us-rapor-sema .parca { border-right: 0; border-bottom: 1px solid var(--kenar); }
  .us-eksen .cizgi { display: none; } .us-eksen .noktalar { margin-top: 0; gap: 1rem; } .us-eksen .nokta { grid-template-columns: 20px 1fr; grid-template-areas: "i b" "i s"; padding: 0; align-items: center; } .us-eksen .nokta i { grid-area: i; margin: 0; } .us-eksen .nokta b { grid-area: b; } .us-eksen .nokta span { grid-area: s; }
  .us-seritler .baglar { height: 28px; grid-template-columns: 1fr; }
  .us-plangercek { grid-template-columns: 1fr; } .aktarim-etiketi.dikey { min-height: 56px; }
  .us-bag { grid-template-columns: 1fr; justify-items: start; } .us-bag .merkez { width: 160px; }
  .is-satir { grid-template-columns: 1fr; gap: .3rem; } .is-satir .ok { transform: rotate(90deg); justify-self: start; }
  .profil-gruplar { grid-template-columns: 1fr; gap: 1.2rem; }
  .profil-hikaye { padding: 1.4rem; border-radius: 20px; }
  .profil-gorsel .iki { grid-template-columns: 1fr; }
  #urunler .aile-izgara.bes { grid-template-columns: 1fr 1fr; }
  .denge { grid-template-columns: 1fr; } .denge .sonuc::before { content: "↓"; left: 50%; top: -1.4rem; transform: translateX(-50%); }
  .denge .sonuc { margin-top: 1.2rem; }
  .fark .satir { grid-template-columns: 64px 1fr auto; }
}
@media (max-width: 600px) {
  .us-hero-gorsel .cihaz.ekran { position: relative; left: auto; width: 92%; margin: -12% auto 0; }
  .us-hero-gorsel { padding-bottom: 0; }
  .us-nav a { padding: .6rem .55rem; font-size: .66rem; }
  .us-baslik { margin-bottom: 1.6rem; }
  .us-rota .rota li, .us-duraklar li { padding-left: 50px; }
  .us-sahne .okurlar { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .profil-hikaye { animation: none; } }
/* Ana sayfa v3 ekleri: Danışman hero panosu, ürün ailesi giriş metni, döngüde Danışman notu */
.slayt[data-urun="danisman"] .danisman-pano { position: absolute; right: 0; top: 0; width: 82%; border-radius: 22px; padding: 2rem 1.8rem; background: rgba(12,31,49,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.slayt[data-urun="danisman"] .danisman-pano p { font-family: Georgia, serif; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.15; color: #fff; margin: 0; }
.slayt[data-urun="danisman"] .danisman-pano .etiket { color: var(--yesil-neon); }
.slayt[data-urun="danisman"] .danisman-pano svg.pk.buyuk { position: absolute; right: -8%; bottom: -16%; width: 50%; height: auto; aspect-ratio: 1; color: rgba(255,255,255,.07); --pk-vurgu: rgba(155,225,93,.3); }
.aile-giris { color: var(--gri); font-size: 1.08rem; max-width: 56ch; margin: .6rem 0 0; }
.dongu-danisman { margin-top: .8rem; font-size: .95rem; color: var(--gri); }
.dongu-danisman a { font-weight: 700; color: var(--lacivert); border-bottom: 2px solid rgba(17,42,67,.15); }
@media (max-width: 900px) { .slayt[data-urun="danisman"] .danisman-pano { position: relative; width: 100%; margin-bottom: 1rem; } }
/* v3 düzeltmeleri (ilk görsel kontrol, 1440): kaydırma ipucu ürün sayfasında yok; bölüm menüsü geniş ekranda sarar; adım/denge ızgaraları; beş kutu */
.urun-sayfa .kaydir-ipucu, .varlik-sayfa .kaydir-ipucu { display: none !important; }
@media (min-width: 901px) { .us-nav .ic { flex-wrap: wrap; overflow: visible; } .us-nav a { font-size: .68rem; letter-spacing: .09em; padding: .55rem .55rem; min-height: 40px; } }
.us-adimlar li { grid-template-columns: 44px 1fr; grid-template-areas: "no b" "no s"; }
.us-adimlar li::before { grid-area: no; } .us-adimlar b { grid-area: b; } .us-adimlar li > span { grid-area: s; }
.denge { grid-template-columns: 1fr 1.15fr; gap: 2.2rem; }
.denge .sonuc::before { left: -1.6rem; }
#urunler .aile-mobil { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); }
#urunler .aile-izgara.bes .aile-kutu .ad { font-size: clamp(.9rem, 7.2cqw, 1.35rem); bottom: 34px; gap: clamp(4px, 2.5cqw, 8px); }
#urunler .aile-izgara.bes .aile-kutu .ad svg.pk { --w: clamp(24px, 13cqw, 40px); }
#urunler .aile-izgara.bes .aile-kutu .alt { bottom: 12px; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 30px); }
.aile-kutu.kutu-tipografik .belge-ikon { right: 8%; top: 10%; width: 26%; }
@media (min-width: 1600px) { #urunler .aile-mobil { grid-template-columns: minmax(0, 1.4fr) minmax(380px, .6fr); } }
/* v3 düzeltmeleri (telefon/iPad kontrolü): beş ürün noktası telefonda sarar; ürün hero ekranı dar ekranda kadraj içinde kalır */
@media (max-width: 600px) { .slayt-noktalar.urunler { flex-wrap: wrap; row-gap: .4rem; } }
@media (max-width: 1100px) { .us-hero-gorsel .cihaz.ekran { left: 0; } }
/* Bölüm menüsü (12 Eki, 2. tur): kısa etiketler, tek satır; kaydırma payı çubuk yüksekliğine bağlı (JS --us-nav-h) */
.us-nav .ic { flex-wrap: nowrap; }
.us-nav a { font-size: .74rem; letter-spacing: .08em; padding: .7rem .8rem; }
.us-bolum, .us-sss, #iletisim { scroll-margin-top: calc(var(--us-nav-h, 56px) + 8px); }
@media (min-width: 901px) { .us-nav .ic { flex-wrap: nowrap; overflow: visible; } }
/* Ekran keşfi (etkileşimli modül keşfi) + örnek hesap aracı (12 Eki, 2. tur) */
.us-kesif-baslik { margin: 2.4rem 0 1rem; } .us-kesif-baslik p { margin: 0; color: var(--gri); }
.us-kesif { grid-template-columns: 300px 1fr; gap: 1.6rem; }
.us-kesif .kesif-liste { gap: .25rem; }
.us-kesif .kesif-oge { background: #fff; border: 1px solid var(--kenar); border-radius: 14px; }
.us-kesif .kesif-oge:hover { border-color: var(--lacivert); }
.us-kesif .kesif-oge.aktif { background: var(--lacivert); border-color: var(--lacivert); color: #fff; box-shadow: none; }
.us-kesif .kesif-oge.aktif span, .us-kesif .kesif-oge.aktif b { color: #fff; }
.us-kesif .kesif-oge.aktif .no { background: var(--yesil); color: #fff; }
.us-kesif .kesif-oge .no { background: var(--zemin-2); }
.us-kesif .kesif-oge div > span { text-transform: none; letter-spacing: 0; font-size: .76rem; }
.us-kesif .kesif-sahne { min-height: 0; }
.us-kesif .kesif-aciklama { margin: 1rem 0 0; color: var(--metin); font-size: 1.02rem; line-height: 1.6; max-width: 70ch; }
.us-kesif .kesif-nav { margin-top: 1rem; }
.us-arac { margin-top: 3rem; padding: 2rem 2rem 1.6rem; border-radius: 24px; background: var(--lacivert); color: #fff; display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem 2.5rem; }
.us-arac .arac-bas { grid-column: 1 / -1; max-width: 62ch; }
.us-arac .arac-bas h3 { font-family: Georgia, serif; font-weight: 400; font-size: 1.7rem; margin: .2rem 0 .4rem; color: #fff; }
.us-arac .arac-bas p { margin: 0; color: var(--soluk); }
.us-arac .etiket-k { color: var(--yesil-neon); }
.arac-girdiler { display: grid; gap: 1rem; }
.arac-girdiler label { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; font-size: .9rem; font-weight: 600; color: var(--metin-acik); }
.arac-girdiler .deger { font-variant-numeric: tabular-nums; color: var(--yesil-neon); font-weight: 700; }
.arac-girdiler input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--yesil-acik); height: 28px; }
.arac-girdiler small { grid-column: 1 / -1; color: var(--soluk); font-weight: 400; font-size: .75rem; margin-top: -.2rem; }
.arac-sonuc { display: grid; gap: .8rem; align-content: start; }
.arac-sonuc > div { padding: 1rem 1.2rem; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.arac-sonuc span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); }
.arac-sonuc b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.arac-sonuc .vurgulu { border-color: rgba(155,225,93,.5); } .arac-sonuc .vurgulu b { color: var(--yesil-neon); font-size: 2rem; }
.us-arac .kanit-notu { grid-column: 1 / -1; color: var(--soluk); max-width: none; }
@media (max-width: 900px) {
  .us-kesif { grid-template-columns: 1fr; }
  .us-kesif .kesif-liste { position: static; max-height: none; flex-direction: row; overflow-x: auto; padding-bottom: .4rem; }
  .us-kesif .kesif-oge { flex: 0 0 auto; min-width: 200px; }
  .us-arac { grid-template-columns: 1fr; padding: 1.4rem; }
}
/* Bağlantı haritası telefonda: etiket sarar, merkez daire taşmaz; keşif listesi kaydırma ipucu */
@media (max-width: 900px) {
  .bag-kart { grid-template-columns: 40px 1fr; } .bag-kart span { grid-column: 2; justify-self: start; white-space: normal; line-height: 1.4; }
  .us-bag .merkez { width: 190px; padding: 1rem; } .us-bag .merkez small { font-size: .74rem; }
  .us-kesif .kesif-liste { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
/* Varlık sebebimiz sayfası (varlik.html, 12 Eki): Foundation metni, vizyon/misyon/ilkeler */
.vs-hero { padding: 150px 0 80px; } .vs-hero .ic { grid-template-columns: 1fr; } .vs-hero h1 { max-width: 16ch; } .vs-hero .giris { max-width: 56ch; font-size: 1.25rem; }
.vs-duzen { display: grid; grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: center; }
.vs-duzen h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 20ch; }
.vs-metin { font-size: 1.12rem; line-height: 1.7; color: var(--metin); max-width: 58ch; }
.vs-olcu { font-family: Georgia, serif; font-style: italic; font-size: 1.25rem; color: var(--lacivert); margin: 1.2rem 0 0; }
.vs-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.vs-kart { padding: 2rem 2rem 1.8rem; border-radius: 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.vs-kart p { margin: 0; font-family: Georgia, serif; font-size: 1.3rem; line-height: 1.45; color: #fff; }
.vs-soru { margin: 0; padding: 2rem 2.2rem; border-radius: 22px; background: var(--lacivert); color: #fff; }
.vs-soru p { margin: 0 0 1rem; font-family: Georgia, serif; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; }
.vs-soru footer { color: var(--yesil-neon); font-weight: 700; }
.vs-ilkeler { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: ilke; }
.vs-ilkeler li { counter-increment: ilke; display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid var(--kenar); font-family: Georgia, serif; font-size: 1.2rem; color: var(--lacivert); }
.vs-ilkeler li::before { content: counter(ilke, decimal-leading-zero); font-family: Inter, sans-serif; font-size: .8rem; font-weight: 800; letter-spacing: .1em; color: var(--yesil-koyu); }
@media (max-width: 900px) { .vs-duzen, .vs-ikili { grid-template-columns: 1fr; gap: 1.8rem; } .vs-hero { padding: 120px 0 56px; } }

/* ===== Hero: çerçevesiz 3B çiftlik animasyonu (ciftlik.html?hero=1#akis) — 21 Eki ===== */
.ciftlik-yalin { position: relative; width: calc(100% + 8vw); margin: -4vh -4vw -4vh 0; aspect-ratio: 16 / 12; max-height: 78vh; pointer-events: none; }
.ciftlik-yalin iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; pointer-events: none; }   /* sahne yazı ve düğmelerin tıklanmasını engellemez */
@media (min-width: 1001px) and (max-width: 2199px) and (min-aspect-ratio: 1/1) { .ciftlik-yalin { width: auto; margin: -8vh calc((min(1200px, 100vw - 32px) - 100vw) / 2) -8vh max(-16vw, -170px); aspect-ratio: 16 / 11; max-height: 92vh; } }   /* iPad yatay, 13–16" dizüstü ve 24" ekran: büyük kadraj */
@media (min-width: 1001px) and (max-width: 1250px) and (min-aspect-ratio: 1/1) { .ciftlik-yalin { margin-left: -72px; } }    /* başlık ile kaide/etiket arasında en az ~40 px pay */
@media (min-width: 1251px) and (max-width: 1360px) and (min-aspect-ratio: 1/1) { .ciftlik-yalin { margin-left: -126px; } }
@media (min-width: 1361px) and (max-width: 2199px) and (min-aspect-ratio: 1/1) { .ciftlik-yalin { margin-left: -100px; } }
@media (min-width: 2200px) { .ciftlik-yalin { width: calc(100% + 12vw); margin-right: -10vw; } }
@media (max-width: 1000px), (max-aspect-ratio: 1/1) and (max-width: 1400px) { .ciftlik-yalin { width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 1 / .86; max-height: none; } }   /* iPad dikey: tam genişlik */
@media (max-width: 600px) { .ciftlik-yalin { width: calc(100% + 32px); margin: 0 -16px; aspect-ratio: 1 / 1; } }

/* ===== Hero slayt okları: kenar boşluğu yeterli ekranda sayfanın sağında ve solunda, dikeyde ortalı; boşluğun ortasına oturur, başlığa ve animasyona binmez (22 Eki) ===== */
@media (min-width: 1360px) {
  .hero-slider .slayt-nav { top: 0; bottom: 0; display: flex; align-items: flex-end; padding-bottom: 34px; }
  .hero-slider .slayt-nav > .ic { width: min(var(--genislik), 100% - 32px); position: static; }
  .hero-slider .slayt-nav .slayt-ust { position: static; }
  .hero-slider .slayt-oklar { display: contents; }
  .hero-slider .slayt-ok { --kenar: calc((100vw - min(var(--genislik), 100vw - 32px)) / 2); position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; pointer-events: auto; background: rgba(10,27,44,.32); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.86); transition: background .25s, border-color .25s, color .25s, transform .25s; }
  .hero-slider .slayt-ok:hover { background: rgba(155,225,93,.14); border-color: rgba(155,225,93,.55); color: #fff; }
  .hero-slider .slayt-ok.geri { left: calc(var(--kenar) / 2 - 23px); }
  .hero-slider .slayt-ok.ileri { right: calc(var(--kenar) / 2 - 23px); }
  .hero-slider .slayt-ok.geri:hover { transform: translate(-3px, -50%); }
  .hero-slider .slayt-ok.ileri:hover { transform: translate(3px, -50%); }
  .hero-slider .slayt-ok svg { width: 20px; height: 20px; }
}

/* ===== 22 Eki 2026 — SürüPlan Ailesi dörtlü + SürüPlan Uzman (uzman.html) + çoklu program seçimi + SP Yem «Çok yakında» ===== */
.cok-yakinda { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: none; color: var(--lacivert-koyu); background: var(--yesil-neon); white-space: nowrap; }
.slayt .metin .cok-yakinda, .us-hero .kimlik .cok-yakinda { margin-left: .6rem; vertical-align: middle; }
.aile-kutu .cok-yakinda { position: absolute; left: 12px; top: 12px; z-index: 2; height: 22px; font-size: .68rem; }
/* Menü: SürüPlan Uzman başlığı ve programları */
.menu-panel .menu-uzman { margin: .2rem 0 .35rem; padding: .35rem 0 .45rem; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.menu-panel .menu-uzman a { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem .5rem 1.6rem; border-radius: 12px; color: rgba(255,255,255,.82); font-weight: 500; font-size: .9rem; transition: background .2s, color .2s; }
.menu-panel .menu-uzman a.menu-uzman-baslik { padding-left: 1rem; color: var(--yesil-neon); font-weight: 700; font-size: .95rem; }
.menu-panel .menu-uzman a:hover { background: rgba(255,255,255,.1); color: #fff; }
.menu-panel .menu-uzman svg.pk { width: 16px; height: 16px; }
/* Ürün ailesinin altındaki Uzman bağı */
.aile-uzman { margin-top: 28px; }
.uzman-bag { display: grid; gap: .35rem; padding: 22px 26px; border-radius: 20px; border: 1px solid var(--kenar); background: var(--zemin-2); color: var(--metin); transition: border-color .2s, transform .2s; }
.uzman-bag:hover { border-color: var(--yesil); transform: translateY(-2px); }
.uzman-bag b { font-size: 1.15rem; }
.uzman-bag > span:last-child { display: inline-flex; align-items: center; gap: .5rem; color: var(--gri); }
.uzman-bag svg { width: 18px; height: 18px; color: var(--yesil); flex: none; }
/* Çoklu program seçimi */
.teklif-form .alan-secim.coklu { display: grid; gap: .6rem; }
.teklif-form .alan-secim.coklu .secim-grup { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.teklif-form .alan-secim.coklu .secim-grup > b { width: 100%; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-acik); opacity: .75; }
/* SürüPlan Uzman sayfası */
.uz-hero { padding: 150px 0 80px; }
.uz-hero .ic { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.uz-hero h1 { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-weight: 600; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.05; letter-spacing: -.02em; }
.uz-hero .giris { font-size: 1.15rem; color: var(--soluk); max-width: 52ch; line-height: 1.65; }
.uz-kimler { margin-top: 1.2rem; font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: var(--yesil-neon); }
.uz-secici { display: grid; gap: 10px; }
.uz-secim { display: grid; gap: 2px; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; transition: background .2s, border-color .2s; }
.uz-secim b { font-size: 1.05rem; }
.uz-secim span { font-size: .88rem; color: rgba(255,255,255,.7); }
.uz-secim:hover { background: rgba(155,225,93,.1); border-color: rgba(155,225,93,.55); }
.uz-secim.uz-kanal { border-style: dashed; }
.uz-program, .uz-kanal-bolum { scroll-margin-top: 80px; }
.uz-duzen { display: grid; grid-template-columns: minmax(200px, .55fr) 1.45fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.uz-kunye { display: grid; gap: .6rem; justify-items: start; position: sticky; top: 110px; }
.uz-no { font-family: Fraunces, Georgia, serif; font-size: 3.4rem; line-height: 1; color: var(--yesil); opacity: .5; }
.uz-kunye .rol { font-size: .9rem; color: var(--gri); }
.koyu .uz-kunye .rol { color: rgba(255,255,255,.7); }
.uz-metin h2 { font-family: Fraunces, "Iowan Old Style", Georgia, serif; font-weight: 600; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -.015em; margin-bottom: 1rem; }
.uz-metin > p { font-size: 1.1rem; line-height: 1.7; max-width: 60ch; color: var(--gri); }
.koyu .uz-metin > p { color: rgba(255,255,255,.78); }
.uz-metin .faydalar { margin: 1.4rem 0 0; }
.uz-metin .dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.8rem; }
.uz-metin .dugmeler .dugme svg { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .uz-hero { padding: 120px 0 56px; }
  .uz-hero .ic, .uz-duzen { grid-template-columns: 1fr; }
  .uz-kunye { position: static; grid-auto-flow: column; align-items: center; justify-content: start; }
  .uz-no { font-size: 2.2rem; }
}
.uz-metin .faydalar { list-style: none; padding: 0; display: grid; gap: .55rem; }
.uz-metin .faydalar li { position: relative; padding-left: 1.6rem; }
.uz-metin .faydalar li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 12px; height: 12px; border-radius: 50%; background: rgba(95,165,36,.2); box-shadow: inset 0 0 0 2px var(--yesil); }
/* Uzman sayfası: akış, kitle faydaları, ekranlar (22 Eki, tersine mühendislik bulgularıyla) */
.uz-blok { margin-top: 2.2rem; }
.uz-blok > .etiket-k { display: block; margin-bottom: .9rem; }
.uz-akis { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; counter-reset: none; }
.uz-akis li { display: grid; grid-template-columns: 36px 1fr; gap: .9rem; align-items: start; }
.uz-akis .no { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--yesil-koyu); background: rgba(95,165,36,.12); box-shadow: inset 0 0 0 1.5px rgba(95,165,36,.45); }
.uz-akis b { display: block; font-size: 1.02rem; margin-bottom: .15rem; }
.uz-akis div > span { color: var(--gri); line-height: 1.6; }
.uz-ekranlar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 2.2rem; }
.uz-ekran { margin: 0; }
.uz-ekran .cihaz { border-radius: 14px; overflow: hidden; border: 1px solid var(--kenar); background: #fff; box-shadow: 0 18px 40px rgba(17,42,67,.12); }
.uz-ekran .ekran-buton { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.uz-ekran img { display: block; width: 100%; height: auto; aspect-ratio: 1090 / 700; object-fit: cover; object-position: top left; }
.uz-ekran figcaption { margin-top: .55rem; font-size: .85rem; color: var(--gri); }
.uz-program .kanit-notu { margin-top: .8rem; }
.uz-kitleler { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uz-kitle { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--kenar); background: #fff; }
.acik-zemin .uz-kitle { background: #fff; }
.uz-kitle .etiket-k { display: block; margin-bottom: .6rem; color: var(--yesil-koyu); }
.uz-kitle .faydalar { margin: 0 !important; gap: .45rem; font-size: .95rem; }
@media (max-width: 900px) { .uz-ekranlar, .uz-kitleler { grid-template-columns: 1fr; } }
.uz-metin > p.kanit-notu { font-size: .85rem; line-height: 1.55; color: var(--gri); max-width: none; }
/* 23 Eki: hero animasyonu yüklenene kadar görünmez, hazır olunca belirir (yavaş bağlantıda boş kutu görünmesin) */
.ciftlik-yalin iframe { opacity: 0; transition: opacity .7s ease; }
.ciftlik-yalin.hazir iframe { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ciftlik-yalin iframe { transition: none; } }
/* 23 Eki: Destekçilerimiz — başlık + yavaşça yatay akan, hafif yüzen, ışık ve gölgeli logo kartları (liste: icerik/destekciler.json) */
.destekciler { padding-block: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.destekciler h2 { text-align: center; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.destek-serit { position: relative; padding-block: 18px 34px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.destek-yol { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: destek-ak var(--sure, 48s) linear infinite; }
.destek-serit:hover .destek-yol { animation-play-state: paused; }
.destek-kart { flex: none; padding-inline: clamp(10px, 1.6vw, 18px); animation: destek-yuz 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.destek-yuz { position: relative; display: grid; place-items: center; width: clamp(168px, 18vw, 224px); height: clamp(88px, 9vw, 112px); padding: 18px 26px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 0%, #fff 0%, #fff 45%, #F3F6F9 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(17,42,67,.06), 0 1px 2px rgba(17,42,67,.06), 0 10px 24px -8px rgba(17,42,67,.16), 0 26px 44px -22px rgba(17,42,67,.22);
  transition: box-shadow .4s ease, transform .4s ease; }
.destek-yuz::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 38%; transform: rotate(18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: destek-isik 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.15s); }
.destek-yuz img { display: block; width: auto; max-width: 100%; max-height: 56px; height: auto; object-fit: contain; filter: saturate(.92); transition: filter .4s ease; }
.destek-kart:hover .destek-yuz { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(17,42,67,.06), 0 18px 34px -10px rgba(17,42,67,.22), 0 0 0 1px rgba(95,165,36,.22); }
.destek-kart:hover .destek-yuz img { filter: none; }
@keyframes destek-ak { to { transform: translateX(-50%); } }
@keyframes destek-yuz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes destek-isik { 0%, 62% { left: -60%; } 100% { left: 130%; } }
@media (max-width: 600px) { .destek-yuz img { max-height: 46px; } }
@media (prefers-reduced-motion: reduce) { .destek-yol, .destek-kart, .destek-yuz::after { animation: none; } .destek-yol { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; } .destek-kart[aria-hidden] { display: none; } .destek-serit { -webkit-mask-image: none; mask-image: none; } }
/* 24 Eki: SürüPlan Uzman sahne fotoğrafları — program başına geniş kare (cihaza göre ayrı kompozisyon), akışın yanında ikinci kare, seçici kartlarında küçük fotoğraf */
.uz-program > .ic:first-child { padding-bottom: 0; }
.uz-foto { margin: 0 0 clamp(1.6rem, 3vw, 2.6rem); border-radius: 22px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(17,42,67,.45); aspect-ratio: 2560 / 1086; background: #e9eef3; }
.uz-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1100px) { .uz-foto { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .uz-foto { aspect-ratio: 1100 / 1970; max-height: 78vh; } }
.uz-akis-blok { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.uz-foto2 { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 18px 36px -24px rgba(17,42,67,.45); }
.uz-foto2 img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .uz-akis-blok { grid-template-columns: 1fr; } }
.uz-secim-foto { position: relative; overflow: hidden; isolation: isolate; padding-left: 92px; min-height: 76px; align-content: center; }
.uz-secim-gorsel { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 68px; border-radius: 11px; background: center 30% / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,255,255,.18); transition: transform .35s ease; }
.uz-secim-foto:hover .uz-secim-gorsel { transform: scale(1.04); }
.uz-foto2-tek .uz-foto2 { max-width: 560px; }
/* 24 Eki: hamburger menü — SürüPlan Ailesi / SürüPlan Uzman alt menüleri (namethatui «submenu»: oklu satır, satır hizasında yana açılan ikinci panel;
   panel 12px köşe, ince kenar, yumuşak çift gölge; satır 8px köşe; açık satır vurgulu). Masaüstünde panelin soluna, telefonda satırın altına açılır.
   Koyu (hero üstü) ve açık (kaydırılmış) üst çubukta ayrı renkler — açık çubukta Uzman satırlarının görünmemesi hatası da burada kapandı. */
.menu-panel .menu-uzman { display: none; }
.menu-gruplar { display: grid; gap: 2px; padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.menu-alt { position: relative; }
.menu-alt-dugme { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .8rem .7rem 1rem; border: 0; border-radius: 12px; background: none; font: inherit; font-weight: 700; font-size: .95rem; color: var(--yesil-neon); cursor: pointer; text-align: left; transition: background .12s, color .12s; }
.menu-alt-dugme .menu-ok { width: 16px; height: 16px; flex: none; opacity: .75; transition: transform .2s var(--egri), opacity .12s; }
.menu-alt-dugme:hover, .menu-alt.acik > .menu-alt-dugme { background: rgba(155,225,93,.14); }
.menu-alt.acik > .menu-alt-dugme .menu-ok { opacity: 1; }
.menu-alt-panel { display: none; min-width: 236px; padding: 5px; border-radius: 12px; background: rgba(12, 31, 49, .96); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2); }
.menu-alt.acik > .menu-alt-panel { display: grid; gap: 1px; animation: alt-gel .16s ease-out both; }
.menu-alt-panel a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px; color: rgba(255,255,255,.88); font-weight: 500; font-size: .9rem; white-space: nowrap; transition: background .1s, color .1s; }
.menu-alt-panel a:hover, .menu-alt-panel a:focus-visible { background: rgba(255,255,255,.1); color: #fff; outline: none; }
.menu-alt-panel svg.pk { width: 18px; height: 18px; flex: none; color: #fff; --pk-vurgu: var(--yesil-neon); }
.menu-alt-panel .menu-rozet { margin-left: auto; padding: .1rem .45rem; border-radius: 999px; font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--yesil-neon); background: rgba(155,225,93,.14); }
.menu-alt-panel a.menu-alt-tum { margin-top: 3px; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 8px 8px; font-size: .82rem; color: rgba(255,255,255,.62); }
@keyframes alt-gel { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 761px) {
  .menu-alt-panel { position: absolute; right: calc(100% + 10px); top: -5px; z-index: 2; }
  .menu-alt-dugme .menu-ok { transform: none; }
}
@media (max-width: 760px) {
  .menu-alt-panel { margin: 2px 0 6px 10px; background: rgba(255,255,255,.05); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .menu-alt.acik > .menu-alt-dugme .menu-ok { transform: rotate(90deg); }
  @keyframes alt-gel { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
.ust.kaydi .menu-gruplar { border-bottom-color: var(--kenar); }
.ust.kaydi .menu-alt-dugme { color: var(--yesil-koyu); }
.ust.kaydi .menu-alt-dugme:hover, .ust.kaydi .menu-alt.acik > .menu-alt-dugme { background: rgba(95,165,36,.12); }
.ust.kaydi .menu-alt-panel { background: #fff; border-color: rgba(17,42,67,.1); box-shadow: 0 6px 16px -4px rgba(17,42,67,.18), 0 1px 2px rgba(17,42,67,.08); }
.ust.kaydi .menu-alt-panel a { color: var(--metin); }
.ust.kaydi .menu-alt-panel a:hover, .ust.kaydi .menu-alt-panel a:focus-visible { background: var(--zemin-2); color: var(--lacivert); }
.ust.kaydi .menu-alt-panel svg.pk { color: var(--lacivert); --pk-vurgu: var(--yesil); }
.ust.kaydi .menu-alt-panel .menu-rozet { color: var(--yesil-koyu); background: rgba(95,165,36,.12); }
.ust.kaydi .menu-alt-panel a.menu-alt-tum { color: var(--gri); border-top-color: var(--kenar); }
@media (max-width: 760px) { .ust.kaydi .menu-alt-panel { background: var(--zemin-2); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .menu-alt.acik > .menu-alt-panel { animation: none; } }
/* 24 Eki: Kimin İçin? derli toplu — başlık ile giriş yan yana; solda dikey profil listesi, sağda tek kart (metin + görsel);
   faydalar iki sütun, görsel ve tipografi ölçüleri küçüldü. Bilgi aynı, yükseklik yaklaşık yarıya indi. Telefonda profiller yatay kayan şerit. */
#hedef.bolum, #kimin-icin.bolum { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
#kimin-icin .profil-giris { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; align-items: end; margin-bottom: 1.8rem; }
#kimin-icin .profil-giris .etiket { grid-column: 1 / -1; }
#kimin-icin .profil-giris h2 { margin: 0; }
#kimin-icin .profil-giris .profil-giris-metin { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 52ch; justify-self: end; }
.profil-duzen { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.profil-duzen .profil-gruplar { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 0; position: sticky; top: 100px; }
.profil-duzen .profil-grup .etiket-k { margin-bottom: .45rem; font-size: .68rem; }
.profil-duzen .profil-liste { display: grid; gap: 4px; }
.profil-duzen .profil-dugme { width: 100%; justify-content: flex-start; min-height: 40px; padding: .5rem .85rem; border-radius: 12px; font-size: .9rem; text-align: left; }
.profil-duzen .profil-dugme::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .2s; }
.profil-duzen .profil-dugme[aria-selected="true"]::after { opacity: .8; }
.profil-duzen .profil-hikaye { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 1.8rem; padding: 1.6rem 1.8rem; border-radius: 22px; }
.profil-duzen .profil-hikaye .grup-adi { margin-bottom: .3rem; }
.profil-duzen .profil-hikaye .soru { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin-bottom: .55rem; }
.profil-duzen .profil-hikaye h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.profil-duzen .profil-hikaye .aciklama { font-size: .95rem; line-height: 1.6; margin-bottom: .9rem; }
.profil-duzen .profil-hikaye .faydalar { grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem; margin-bottom: 1rem; font-size: .9rem; line-height: 1.45; }
.profil-duzen .profil-hikaye .faydalar li::before { top: .3rem; width: 10px; height: 10px; }
.profil-duzen .profil-gorsel { gap: .6rem; }
.profil-duzen .profil-gorsel .sema { padding: 1rem 1.1rem; border-radius: 16px; gap: .45rem; font-size: .9rem; }
.profil-duzen .profil-gorsel .kanit-notu { font-size: .76rem; }
@media (max-width: 1100px) {
  .profil-duzen { grid-template-columns: 1fr; }
  .profil-duzen .profil-gruplar { position: static; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; }
  .profil-duzen .profil-liste { display: flex; flex-wrap: wrap; gap: .4rem; }
  .profil-duzen .profil-dugme { width: auto; border-radius: 999px; min-height: 38px; }
  .profil-duzen .profil-dugme::after { display: none; }
}
@media (max-width: 760px) {
  #kimin-icin .profil-giris { grid-template-columns: 1fr; row-gap: .6rem; }
  #kimin-icin .profil-giris .profil-giris-metin { justify-self: start; }
  .profil-duzen .profil-gruplar { grid-template-columns: 1fr; gap: .7rem; }
  .profil-duzen .profil-liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .profil-duzen .profil-liste::-webkit-scrollbar { display: none; }
  .profil-duzen .profil-dugme { flex: none; }
  .profil-duzen .profil-hikaye { grid-template-columns: 1fr; padding: 1.3rem; gap: 1.2rem; }
  .profil-duzen .profil-hikaye .faydalar { grid-template-columns: 1fr; }
}
.profil-duzen .profil-hikaye .us-linkler { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.profil-duzen .profil-hikaye .us-link { font-size: .9rem; }
@media (min-width: 1101px) { .profil-duzen { grid-template-columns: 250px minmax(0, 1fr); } }
@media (max-width: 760px) { .profil-duzen .profil-gorsel .iki { grid-template-columns: 1fr 1fr; gap: .5rem; } .profil-duzen .profil-gorsel .iki .cihaz-bar span { display: none; } }
/* 24 Eki: SP Yem rozeti «Test Aşamasında» — kalın dolgu yerine ince, hafif yazılı, saydam zeminli etiket (Inter 400) */
.cok-yakinda { height: 24px; padding: 0 11px; font-size: .74rem; font-weight: 400; letter-spacing: .02em; color: #fff; background: rgba(10,27,44,.42); border: 1px solid rgba(255,255,255,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cok-yakinda::before { content: ""; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--yesil-neon); }
.acik-zemin .cok-yakinda, .us-hero .kimlik .cok-yakinda { color: inherit; }
.menu-alt-panel .menu-rozet { font-weight: 400; letter-spacing: .01em; font-size: .66rem; background: none; border: 1px solid currentColor; opacity: .85; }
/* 24 Eki: Kimin İçin? — üstteki iki satır (grup yolu, «Tanıdık bir soru») kalktı; soru, sahada sık duyulan bir cümle olarak zarif tırnak içinde alıntı */
.profil-hikaye blockquote.soru { position: relative; margin: 0 0 .9rem; padding: .2rem 0 0 2.3rem; font-family: Georgia, serif; font-style: italic; color: var(--lacivert); }
.profil-hikaye blockquote.soru::before { content: "\201C"; position: absolute; left: -.1rem; top: -.55rem; font-family: Georgia, serif; font-style: normal; font-size: 4.2rem; line-height: 1; color: var(--yesil); opacity: .55; }
.profil-hikaye blockquote.soru p { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; }
.profil-hikaye blockquote.soru p::after { content: "\201D"; margin-left: .08em; color: var(--yesil); opacity: .55; font-style: normal; }
/* 24 Eki: ÜRÜN AİLESİ tek ekranda — web ve LinkedIn'in ana vitrini. Başlık ile giriş yan yana; dört program tek sırada
   (dikey fotoğraf kartları, yüksekliği ekran yüksekliğine göre); bilgi kartı aynı yükseklikte sağda; Uzman şeridi tek satır.
   Telefonda kartlar yana kayan şerit, bilgi kartı ve Uzman şeridi altında; bölüm her boyutta bir ekrana sığar. */
#urunler.bolum { padding-block: clamp(2.2rem, 5vh, 4rem); }
#urunler .aile-baslik { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: .6rem 3rem; align-items: end; margin-bottom: clamp(1rem, 2.4vh, 1.6rem); }
#urunler .aile-baslik > div { display: contents; }
#urunler .aile-baslik .etiket { grid-column: 1 / -1; margin: 0; }
#urunler .aile-baslik h2 { grid-column: 1; margin: 0; max-width: none; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.08; }
#urunler .aile-baslik .aile-giris { grid-column: 2; grid-row: 2; margin: 0; font-size: .98rem; line-height: 1.55; max-width: 48ch; }
#urunler .aile-baslik .aile-link { grid-column: 2; grid-row: 3; justify-self: start; margin-top: .2rem; }
#urunler .aile-ipucu { display: none; }
@media (min-width: 901px) {
  #urunler .aile-mobil { grid-template-columns: minmax(0, 1fr) clamp(280px, 24vw, 380px); gap: 16px; align-items: stretch; }
  #urunler .aile-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; height: clamp(250px, calc(100vh - 410px), 520px); }
  #urunler .aile-kutu { aspect-ratio: auto; height: 100%; border-radius: 18px; }
  #urunler .aile-kutu .ad { font-size: clamp(1.15rem, 1.5vw, 1.6rem); bottom: 32px; left: 16px; right: 12px; }
  #urunler .aile-kutu .alt { font-size: .78rem; left: 16px; bottom: 13px; }
  #urunler .aile-kutu .ad .pk { display: block; width: 30px; height: 30px; margin-bottom: 6px; }
  #urunler .aile-bilgi { margin: 0; height: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 1.2rem 1.3rem; }
  #urunler .aile-bilgi h3 { font-size: clamp(1.25rem, 1.6vw, 1.7rem); }
  #urunler .aile-uzman { margin-top: 14px; }
  #urunler .uzman-bag { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem 1.2rem; padding: 14px 20px; border-radius: 16px; }
  #urunler .uzman-bag b { font-size: 1rem; }
  #urunler .uzman-bag > span:last-child { margin-left: auto; font-size: .92rem; }
}
@media (min-width: 901px) and (max-height: 760px) { #urunler .aile-giris { display: none; } #urunler .aile-izgara { height: clamp(220px, calc(100vh - 330px), 520px); } }
@media (max-width: 900px) {
  #urunler .aile-baslik { grid-template-columns: 1fr; }
  #urunler .aile-baslik .aile-giris, #urunler .aile-baslik .aile-link { grid-column: 1; grid-row: auto; }
  #urunler .aile-baslik .aile-link { display: none; }
}
@media (max-width: 760px) {
  #urunler .aile-baslik h2 { font-size: 1.75rem; }
  #urunler .aile-baslik .aile-giris { font-size: .9rem; }
  #urunler .aile-izgara { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px; }
  #urunler .aile-izgara::-webkit-scrollbar { display: none; }
  #urunler .aile-kutu { flex: 0 0 44vw; aspect-ratio: 3 / 4; scroll-snap-align: start; }
  #urunler .aile-bilgi { margin-top: 10px; padding: .9rem 1rem .8rem; }
  #urunler .aile-bilgi h3, #urunler .aile-bilgi p { min-height: 0; }
  #urunler .aile-bilgi h3 { font-size: 1.1rem; }
  #urunler .aile-uzman { margin-top: 10px; }
  #urunler .uzman-bag { padding: 12px 14px; gap: .15rem; }
  #urunler .uzman-bag b { font-size: .95rem; }
  #urunler .uzman-bag > span:last-child { font-size: .82rem; }
}
@media (min-width: 761px) and (max-width: 900px) {
  #urunler .aile-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  #urunler .aile-kutu { aspect-ratio: 3 / 4.4; }
  #urunler .aile-kutu .ad { font-size: 1.05rem; left: 12px; bottom: 30px; }
  #urunler .aile-kutu .alt { left: 12px; right: 8px; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #urunler .aile-bilgi { margin-top: 12px; }
}
@media (max-width: 760px) {
  #urunler.bolum { padding-block: 1.6rem 2rem; }
  #urunler .aile-baslik { margin-bottom: .8rem; gap: .4rem; }
  #urunler .aile-kutu { flex-basis: 40vw; aspect-ratio: 4 / 5; }
  #urunler .aile-kutu .ad { font-size: .98rem; left: 10px; right: 8px; bottom: 26px; }
  #urunler .aile-kutu .ad .pk { width: 22px; height: 22px; }
  #urunler .aile-kutu .alt { left: 10px; right: 8px; bottom: 9px; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #urunler .aile-bilgi { gap: .2rem; }
  #urunler .aile-bilgi-nav { margin-top: .3rem; padding-top: .4rem; }
  #urunler .uzman-bag > span:last-child { display: none; }
}
/* 24 Eki: BİRLİKTE NASIL ÇALIŞIR? — seçilen adımın içeriği adımların hemen yanında. Geniş ekranda adımlar solda dikey
   (bağlantı çizgisi aşağı akar; «Gerçekleşen geri döner» 5. adım olarak listenin sonunda), içerik kartı sağda; başlık
   ile giriş yan yana ve sıkı. Böylece adıma tıklayınca içerik aynı ekranda değişir, aşağı kaydırma gerekmez. */
#dongu.bolum { padding-block: clamp(2.5rem, 6vh, 4.5rem); }
@media (min-width: 1101px) {
  #dongu > .ic { display: grid; grid-template-columns: 290px minmax(0, 1fr); column-gap: 1.8rem; align-items: start; }
  #dongu .dongu-ust { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2.4rem; align-items: end; margin-bottom: 1.4rem; }
  #dongu .dongu-ust h2 { font-size: clamp(1.9rem, 2.7vw, 2.6rem); margin-top: .4rem; }
  #dongu .dongu-giris p { font-size: .95rem; line-height: 1.55; margin: 0 0 .5rem; }
  #dongu .dongu-duraklar { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; margin: 0; }
  #dongu .durak { grid-template-columns: 38px 1fr; column-gap: .8rem; padding: .55rem .6rem .55rem 0; }
  #dongu .durak::before { top: 46px; bottom: -8px; left: 18px; right: auto; width: 2px; height: auto; }
  #dongu .durak::after { content: none; }
  #dongu .durak .no { width: 38px; height: 38px; grid-row: 1 / span 3; }
  #dongu .durak .ad { font-size: 1rem; }
  #dongu .durak .urun { font-size: .82rem; }
  #dongu .durak .cikti { margin-top: .2rem; font-size: .78rem; }
  #dongu .durak.aktif { background: rgba(78,137,32,.07); }
  #dongu .dongu-geri { grid-column: 1; grid-row: 3; margin-top: .5rem; padding: .75rem .9rem; gap: .7rem; border-radius: 12px; flex-wrap: wrap; }
  #dongu .dongu-geri > svg { width: 22px; height: 22px; }
  #dongu .dongu-geri b { font-size: .92rem; }
  #dongu .dongu-geri small { font-size: .74rem; line-height: 1.4; }
  #dongu .dongu-geri .git { display: none; }
  #dongu .dongu-ipucu { grid-column: 1; grid-row: 4; margin: .7rem 0 0; font-size: .78rem; }
  #dongu .dongu-kartlar { grid-column: 2; grid-row: 2 / span 4; }
  #dongu .dongu-kart { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  #dongu .dongu-foto { min-height: 0; height: 100%; }
  #dongu .dongu-foto figcaption { font-size: clamp(1.2rem, 1.6vw, 1.6rem); left: 22px; right: 22px; bottom: 20px; }
  #dongu .dongu-metin { padding: 1.5rem 1.7rem 1.4rem; }
  #dongu .dongu-metin > svg { width: 30px; height: 30px; }
  #dongu .dongu-metin h3 { font-size: clamp(1.4rem, 1.9vw, 1.9rem); margin-bottom: .6rem; }
  #dongu .dongu-metin p { font-size: .94rem; line-height: 1.6; margin-bottom: 1.1rem; }
  #dongu .dongu-metin .detay { margin-top: 1rem; }
  #dongu .dongu-alt { grid-column: 1 / -1; margin-top: 1.2rem; }
}
@media (min-width: 1101px) {
  #dongu .dongu-kartlar { align-self: stretch; display: grid; }
  #dongu .dongu-kart:not([hidden]) { height: 100%; }
}
@media (min-width: 1101px) and (max-height: 860px) {
  #dongu .durak { padding-block: .35rem; }
  #dongu .durak .cikti { margin-top: 0; }
  #dongu .dongu-ust { margin-bottom: 1rem; }
  #dongu .dongu-ipucu { display: none; }
}
@media (max-width: 1100px) {
  #dongu > .ic { display: flex; flex-direction: column; }
  #dongu .dongu-ust { order: 0; margin-bottom: 1.2rem; }
  #dongu .dongu-duraklar { order: 1; }
  #dongu .dongu-ipucu { order: 2; margin: .2rem 0 .8rem; }
  #dongu .dongu-kartlar { order: 3; }
  #dongu .dongu-geri { order: 4; margin-top: .9rem; }
  #dongu .dongu-alt { order: 5; }
  #dongu .dongu-foto { min-height: 240px; }
}
/* 24 Eki: TÜRKİYE'DEKİ İHTİYAÇLAR — tek ızgara: solda başlık ve altında bilgi kartı, sağda üç fotoğraf kartı aynı yükseklikte.
   Başlığın sağındaki büyük boş blok kalktı; başlık bir satır daha kısa. */
#yerli.bolum { padding-block: clamp(2.5rem, 6vh, 4.5rem); }
#yerli .yerli-bas { margin: 0; }
#yerli .yerli-bas h2 { margin-bottom: .7rem; }
#yerli .yerli-bas p { margin: 0; font-size: .98rem; line-height: 1.55; }
@media (min-width: 901px) {
  #yerli .yerli-duzen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "bas izgara" "bilgi izgara"; gap: 1.4rem 2.6rem; align-items: start; }
  #yerli .yerli-bas { grid-area: bas; }
  #yerli .yerli-bas h2 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: 1.1; max-width: 18ch; }
  #yerli .aile-izgara { grid-area: izgara; align-self: stretch; height: 100%; min-height: 420px; }
  #yerli .aile-kutu { aspect-ratio: auto; height: 100%; }
  #yerli .aile-bilgi { grid-area: bilgi; margin: 0; align-self: end; }
  #yerli .aile-bilgi h3 { font-size: clamp(1.25rem, 1.6vw, 1.55rem); min-height: 0; }
  #yerli .aile-bilgi p { min-height: 0; }
}
/* 24 Eki: form grup başlıkları (SürüPlan Ailesi / SürüPlan Uzman) büyük harf ve kalın değil — hafif, normal yazım */
.teklif-form .alan-secim.coklu .secim-grup > b { text-transform: none; font-weight: 400; letter-spacing: .01em; font-size: .86rem; opacity: .8; }
/* 24 Eki: kayan şeridin kenarlarındaki beyaz hare kalktı (maske yok) */
.bant { -webkit-mask-image: none; mask-image: none; }
/* 24 Eki: küçük kullanılan ekran görüntülerinde pencere çubuğu görünmez — çubuk, pencere 480 px'ten darsa gizlenir */
.cihaz { container-type: inline-size; }
@container (max-width: 480px) { .cihaz-bar { display: none; } }
/* 24 Eki: menüdeki SürüPlan Ailesi / SürüPlan Uzman başlıkları normalde beyaz (açık çubukta lacivert), üzerine gelince ve açıkken yeşil */
.menu-alt-dugme { color: #fff; }
.menu-alt-dugme:hover, .menu-alt.acik > .menu-alt-dugme, .menu-alt-dugme:focus-visible { color: var(--yesil-neon); }
.ust.kaydi .menu-alt-dugme { color: var(--metin); }
.ust.kaydi .menu-alt-dugme:hover, .ust.kaydi .menu-alt.acik > .menu-alt-dugme, .ust.kaydi .menu-alt-dugme:focus-visible { color: var(--yesil-koyu); }
/* 24 Eki: WhatsApp düğmesi — yeşil hare (renkli gölge) kalktı; zemin ve ikon kutusu WhatsApp'ın kendi renkleri, düz */
.dugme.wa-dugme, .dugme.wa-dugme:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .18); background: #075E54; background-image: none; filter: none; }
.dugme.wa-dugme::before { background: #25D366; background-image: none; opacity: 1; }
/* 24 Eki (2): WhatsApp düğmesi — ikon kutusunun üstüne genel düğme kuralından (.dugme .ok) SürüPlan açık yeşili biniyordu;
   kutu ve zemin artık yalnız WhatsApp'ın kendi renkleri: zemin WhatsApp yeşili #25D366, ikon kutusu beyaz, ikon yeşil, yazı beyaz. */
.dugme.wa-dugme, .dugme.wa-dugme:hover { background: #25D366; color: #fff; }
.dugme.wa-dugme::before { background: #fff; }
.dugme.wa-dugme .ok, .dugme.wa-dugme:hover .ok { background: #fff; color: #25D366; }
.dugme.wa-dugme:hover .metin { color: #128C7E; }
/* 24 Eki: Türkiye başlığı — daktilo satırının en uzun cümlesi («bankacılık sistemimize göre») hiçbir ekranda satır atlamaz;
   başlık puntosu sütun genişliğine göre (cqi) ölçeklenir, blok aşağı kaymaz */
#yerli .yerli-bas { container-type: inline-size; }
#yerli .yerli-bas h2.yerli-baslik { font-size: min(2.6rem, 6.9cqi) !important; max-width: none; letter-spacing: -.02em; }
#yerli .yerli-baslik .daktilo-satir { white-space: nowrap; }
/* 24 Eki: konu önerileri — alan + teknik karşılığı, hap seçenek (form koyu zeminde) */
.teklif-form .konu-oneri { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.2rem 0 .4rem; }
.teklif-form .konu-cip { display: inline-flex; align-items: baseline; gap: .4rem; padding: .38rem .75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: var(--metin-acik); font: 500 .8rem/1.2 Inter, sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.teklif-form .konu-cip i { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--soluk); }
.teklif-form .konu-cip:hover { border-color: var(--yesil-acik); }
.teklif-form .konu-cip.secili { background: rgba(125,201,78,.16); border-color: var(--yesil-acik); color: #fff; }
.teklif-form .konu-cip.secili i { color: var(--yesil-neon); }
.teklif-form .konu-cip:focus-visible { outline: 2px solid var(--yesil-acik); outline-offset: 2px; }

/* ===== 31 Eki 2026 — Üst çubukta iki grup: SÜRÜPLAN PLATFORM (açık) · SÜRÜPLAN UZMAN (kapalı; tıklanınca açılır, diğeri kapanır) ===== */
.ust nav { gap: .5rem; }
.urun-grubu .grup-etiket { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .25rem; }
.urun-grubu .grup-etiket .menu-ok { display: none; width: 12px; height: 12px; color: var(--yesil-neon); }
.ust.kaydi .urun-grubu .grup-etiket .menu-ok { color: var(--yesil-koyu); }
.urun-grubu .grup-linkler { display: contents; }
.urun-grubu.kapali { padding: .42rem .9rem .42rem 1rem; cursor: pointer; }
.urun-grubu.kapali i { position: static; transform: none; background: transparent; box-shadow: none; padding: 0; line-height: 1; }
.urun-grubu.kapali i b { font-size: .62rem; letter-spacing: .14em; }
.urun-grubu.kapali .grup-etiket .menu-ok { display: inline-block; }
.urun-grubu.kapali .grup-linkler { display: none; }
.urun-grubu.kapali:hover { box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 0 0 1px rgba(155,225,93,.35); }
.urun-grubu.grup-uzman a[data-urun="danisman"] { --urun-renk: #C7B4FF; } .urun-grubu.grup-uzman a[data-urun="buzagi"] { --urun-renk: #FFB4A2; } .urun-grubu.grup-uzman a[data-urun="tirnak"] { --urun-renk: #FFE08A; }
.ust.kaydi .urun-grubu.grup-uzman a[data-urun="danisman"] { --urun-renk: #5B3FD6; } .ust.kaydi .urun-grubu.grup-uzman a[data-urun="buzagi"] { --urun-renk: #C2471F; } .ust.kaydi .urun-grubu.grup-uzman a[data-urun="tirnak"] { --urun-renk: #B07A00; }
@media (max-width: 900px) { .ust nav .urun-grubu.kapali { display: none; } }

/* ===== 31 Eki 2026 — «Kimin için?» v4: sol seçim çubuğu + sağ sahne; seçim yokken «Yaptığınız işten başlayalım.» ve yönlendirici animasyon ===== */
.profil-duzen { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }
.profil-menu { position: sticky; top: 92px; display: grid; gap: 1.2rem; }
.profil-menu .profil-grup .etiket-k { margin-bottom: .5rem; }
.profil-menu .profil-liste { display: grid; gap: .4rem; }
.profil-menu .profil-dugme { width: 100%; justify-content: space-between; text-align: left; border-radius: 14px; padding: .7rem 1rem; display: inline-flex; align-items: center; gap: .5rem; }
.profil-menu .profil-dugme .menu-ok { width: 16px; height: 16px; flex: none; opacity: .5; transition: transform .2s, opacity .2s; }
.profil-menu .profil-dugme:hover .menu-ok, .profil-menu .profil-dugme[aria-selected="true"] .menu-ok { opacity: 1; transform: translateX(3px); }
.profil-menu .profil-dugme[aria-selected="true"]::before { display: none; }
.profil-ipucu { display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 700; color: var(--yesil-koyu); padding: .5rem .8rem; border-radius: 999px; background: rgba(95,165,36,.1); width: fit-content; }
.profil-ipucu svg { width: 20px; height: 20px; animation: ipucu-dokun 1.6s ease-in-out infinite; }
@keyframes ipucu-dokun { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(4px) rotate(-8deg); } }
.profil-duzen:not(.bekliyor) .profil-ipucu { display: none; }
.profil-duzen.bekliyor .profil-dugme { animation: dugme-nabiz 6.3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .9s); }
@keyframes dugme-nabiz { 0%, 14%, 100% { box-shadow: none; border-color: var(--kenar); } 5% { box-shadow: 0 0 0 5px rgba(95,165,36,.16); border-color: var(--yesil); } }
.profil-sahne { min-height: 460px; }
.profil-bos { padding: 3rem 2.8rem; border-radius: 28px; background: #F3F6EE; min-height: 460px; display: grid; align-content: center; animation: gel .45s var(--gecis); }
.profil-bos[hidden] { display: none; }
.profil-bos .buyuk-soru { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .9rem; color: var(--lacivert); max-width: 14ch; }
.profil-bos .buyuk-soru em { font-style: italic; color: var(--yesil-koyu); }
.profil-bos p:last-child { color: var(--gri); font-size: 1.1rem; margin: 0; max-width: 44ch; }
.profil-hikaye { grid-template-columns: 6fr 6fr; }
.profil-hikaye .soru { font-style: normal; font-size: clamp(1.9rem, 3.1vw, 2.6rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 1.1rem; }
.profil-hikaye .soru p { margin: 0; }
.fayda-gosterge { margin: 0 0 1.3rem; padding: 1rem 1.2rem .9rem; border-radius: 16px; background: #fff; border: 1px solid var(--kenar); }
.fayda-gosterge .faydalar { display: grid; margin: 0; padding: 0; min-height: 3.2em; }
.fayda-gosterge .faydalar li { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--gecis), transform .5s var(--gecis); pointer-events: none; font-size: 1.05rem; }
.fayda-gosterge .faydalar li.aktif { opacity: 1; transform: none; pointer-events: auto; }
.fayda-nav { display: flex; gap: .4rem; margin-top: .7rem; }
.fayda-nokta { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(17,42,67,.15); cursor: pointer; transition: width .3s var(--gecis), background .3s; }
.fayda-nokta.aktif { width: 22px; background: var(--yesil); }
.fayda-nokta:focus-visible { outline: 2px solid var(--yesil-acik); outline-offset: 2px; }
.cihaz-video { background: #0d1f31; }
.profil-video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0d1f31; }
.platform-kopru { padding: 0 0 72px; }
@media (max-width: 900px) {
  .profil-duzen { grid-template-columns: 1fr; gap: 1.2rem; }
  .profil-menu { position: static; }
  .profil-menu .profil-liste { display: flex; flex-wrap: wrap; }
  .profil-menu .profil-dugme { width: auto; }
  .profil-sahne, .profil-bos { min-height: 0; }
  .profil-bos { padding: 2rem 1.4rem; }
  .profil-hikaye { grid-template-columns: 1fr; }
}

/* ===== 31 Eki 2026 — SürüPlan Platform sayfası: ortalı başlık + büyük çiftlik animasyonu, program kartları ===== */
.platform-hero { padding: 130px 0 0; overflow: hidden; }
.platform-hero .ic { display: block; text-align: center; }
.platform-hero .metin { max-width: 62ch; margin: 0 auto; }
.platform-hero .etiket { justify-content: center; }
.platform-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.platform-hero .giris { margin: 0 auto; }
.platform-hero .dugmeler { justify-content: center; }
.ciftlik-sahne { position: relative; width: min(1500px, 100vw); margin: .5rem auto -2vh; left: 50%; transform: translateX(-50%); aspect-ratio: 16 / 9; max-height: 84vh; pointer-events: none; }
.ciftlik-sahne iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: transparent; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.ciftlik-sahne.hazir iframe { opacity: 1; }
.platform-sayfa .dongu { padding-top: 80px; }
.programlar { padding: 96px 0; }
.prog-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.prog-kart { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--lacivert); color: var(--metin-acik); border: 1px solid rgba(255,255,255,.06); transition: transform .3s var(--gecis), box-shadow .3s; }
.prog-kart:hover { transform: translateY(-4px); box-shadow: var(--golge-b); }
.prog-kart img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prog-govde { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.prog-ust { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.prog-ust .pk { width: 26px; height: 26px; color: #fff; --pk-vurgu: var(--yesil-neon); }
.prog-ad { font-family: Rajdhani, Inter, sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.prog-ust .cok-yakinda { font-size: .68rem; }
.prog-rol { font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: var(--yesil-neon); }
.prog-soru { font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.3; color: #fff; }
.prog-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .8rem; font-weight: 600; font-size: .9rem; color: var(--yesil-neon); }
.prog-link svg { width: 16px; height: 16px; transition: transform .2s; }
.prog-kart:hover .prog-link svg { transform: translateX(3px); }
@media (max-width: 1100px) { .prog-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .prog-izgara { grid-template-columns: 1fr; } .platform-hero { padding-top: 110px; } .ciftlik-sahne { aspect-ratio: 1 / 1; width: calc(100vw); } .programlar { padding: 64px 0; } }
/* 31 Eki düzeltmeler: tek ok, büyük içgörü cümlesi (tırnaksız, düz Georgia), köprü kartı tam genişlik, Platform hero tek satır başlık */
.profil-menu .profil-dugme::after { display: none; }
.profil-hikaye blockquote.soru { padding: 0; font-style: normal; }
.profil-hikaye blockquote.soru::before, .profil-hikaye blockquote.soru p::after { content: none; }
.profil-hikaye blockquote.soru p { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.1; letter-spacing: -.012em; }
.profil-hikaye h3 { font-size: 1.15rem; }
.platform-kopru .uzman-bag { display: grid; grid-template-columns: auto 1fr; column-gap: 1.6rem; align-items: center; }
.platform-kopru .uzman-bag .etiket-k { grid-column: 1 / -1; }
.platform-kopru .uzman-bag b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.5rem; }
@media (max-width: 760px) { .platform-kopru .uzman-bag { grid-template-columns: 1fr; } }
.platform-hero { padding-top: 112px; }
.platform-hero .metin { max-width: 980px; }
.platform-hero .giris { max-width: 62ch; font-size: 1.12rem; }
.platform-hero .dugmeler { margin-top: 1.4rem; }
.ciftlik-sahne { margin-top: -2rem; }
.fayda-gosterge .faydalar { grid-template-columns: 1fr !important; }
.platform-kopru .uzman-bag { width: 100%; max-width: none; display: flex; flex-direction: column; gap: .4rem; }
.platform-kopru .uzman-bag b { display: block; }

/* ===== 31 Eki 2026 (2) — «Kimin için?» kademeli seçim: her seçimde yeni sütun; seçimler başlık cümlesini kurar ===== */
#hedef .etiket { margin-bottom: 1.2rem; }
.kaskat { display: flex; align-items: stretch; width: fit-content; max-width: 100%; background: #fff; border: 1px solid var(--kenar); border-radius: 20px; box-shadow: 0 24px 50px -30px rgba(17,42,67,.35); overflow: hidden; }
.kaskat-sutun { display: flex; flex-direction: column; gap: .5rem; padding: 1rem .7rem 1rem; min-width: 210px; animation: kaskat-gel .38s var(--gecis); }
.kaskat-sutun + .kaskat-sutun { border-left: 1px solid var(--kenar); }
.kaskat-sutun[hidden] { display: none; }
@keyframes kaskat-gel { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.kaskat-baslik { font-size: .68rem; font-weight: 800; letter-spacing: .14em; color: var(--yesil-koyu); padding: 0 .55rem; white-space: nowrap; }
.kaskat-baslik small { font-size: .62rem; font-weight: 600; letter-spacing: .04em; color: var(--gri); margin-left: .3rem; }
.kaskat-liste { display: grid; gap: .2rem; }
.kaskat-oge { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .62rem .75rem; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: .98rem; font-weight: 600; color: var(--lacivert); text-align: left; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.kaskat-oge span { flex: 1; }
.kaskat-oge .menu-ok { width: 16px; height: 16px; flex: none; opacity: .45; transition: transform .2s, opacity .2s; }
.kaskat-oge:hover { background: var(--zemin-2, #F3F6F9); }
.kaskat-oge:hover .menu-ok { opacity: .9; transform: translateX(2px); }
.kaskat-oge[aria-selected="true"] { background: var(--lacivert); color: #fff; }
.kaskat-oge[aria-selected="true"] .menu-ok { opacity: 1; color: var(--yesil-neon); }
.kaskat-oge:focus-visible { outline: 2px solid var(--yesil); outline-offset: 2px; }
.kaskat-oge .kutu { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 6px; border: 1.6px solid rgba(17,42,67,.3); background: #fff; transition: background .2s, border-color .2s; }
.kaskat-oge .kutu-onay { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity .15s; }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"] { background: rgba(95,165,36,.12); color: var(--lacivert); }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"] .kutu { background: var(--yesil); border-color: var(--yesil); }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"] .kutu-onay { opacity: 1; }
.kaskat-sutun.son .kaskat-oge { cursor: default; background: var(--lacivert); color: #fff; }
.kaskat-sutun.son .kutu-onay { width: 16px; height: 16px; color: var(--yesil-neon); }
.kaskat.bekliyor [data-sutun="rol"] .kaskat-oge { animation: kaskat-nabiz 5.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .7s); }
@keyframes kaskat-nabiz { 0%, 16%, 100% { box-shadow: none; } 6% { box-shadow: inset 0 0 0 2px rgba(95,165,36,.55); background: rgba(95,165,36,.08); } }
.kaskat-cumle { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.14; letter-spacing: -.012em; color: var(--lacivert); margin: 2.2rem 0 2.4rem; max-width: 30ch; text-wrap: balance; }
.kaskat-cumle em { font-style: italic; color: var(--yesil-koyu); }
.kaskat-cumle .bosluk { display: inline-block; min-width: 2.6em; color: rgba(17,42,67,.32); border-bottom: 3px dotted rgba(95,165,36,.6); line-height: 1; animation: bosluk-yanip 1.4s ease-in-out infinite; }
@keyframes bosluk-yanip { 50% { opacity: .45; } }
.kaskat-sonuc { display: grid; grid-template-columns: 5fr 7fr; gap: 2.4rem; align-items: start; animation: gel .45s var(--gecis); }
.kaskat-sonuc[hidden] { display: none; }
.ks-hikaye[hidden], .ks-pano[hidden], .ks-sekme[hidden] { display: none; }
.ks-hikaye blockquote.soru { padding: 0; margin: 0 0 1rem; font-style: normal; }
.ks-hikaye blockquote.soru::before, .ks-hikaye blockquote.soru p::after { content: none; }
.ks-hikaye blockquote.soru p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.18; color: var(--lacivert); }
.ks-hikaye h3 { font-size: 1.12rem; margin: 0 0 .6rem; }
.ks-hikaye .aciklama { color: var(--gri); margin: 0 0 1.2rem; }
.ks-programlar .etiket-k { display: block; margin-bottom: .6rem; }
.ks-sekmeler { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.ks-sekme { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem .5rem .7rem; border-radius: 999px; border: 1px solid var(--kenar); background: #fff; font: inherit; font-size: .9rem; font-weight: 700; color: var(--lacivert); cursor: pointer; transition: background .2s, color .2s, border-color .2s; animation: kaskat-gel .3s var(--gecis); }
.ks-sekme .pk { width: 20px; height: 20px; color: var(--lacivert); --pk-vurgu: var(--yesil); }
.ks-sekme[aria-selected="true"] { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }
.ks-sekme[aria-selected="true"] .pk { color: #fff; --pk-vurgu: var(--yesil-neon); }
.ks-pano { animation: gel .4s var(--gecis); }
.ks-pano-alt { display: grid; gap: .35rem; margin-top: .9rem; }
.ks-pano-alt p { margin: 0; font-size: 1.02rem; }
.ks-kapsam { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--yesil-koyu); }
.ks-kapsam:empty { display: none; }
.ks-uzman { margin: 2.4rem 0 0; }
@media (max-width: 900px) {
  .kaskat { flex-direction: column; width: 100%; }
  .kaskat-sutun { min-width: 0; }
  .kaskat-sutun + .kaskat-sutun { border-left: 0; border-top: 1px solid var(--kenar); }
  .kaskat-oge { white-space: normal; }
  .kaskat-sonuc { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ===== 31 Eki 2026 (2) — üst çubuk: kapalı grupta iç çerçeve yok (kaydırılmış çubukta da) ===== */
.ust.kaydi .urun-grubu.kapali i { background: transparent; box-shadow: none; }
/* 31 Eki (2): Uzman sayfası program fotoğrafları tam ekran genişliğinde */
.uz-program:has(> .uz-foto) { padding-top: 0; }
.uz-program > .uz-foto { width: 100%; margin: 0 0 clamp(1.8rem, 3.4vw, 3rem); border-radius: 0; box-shadow: none; aspect-ratio: 2560 / 1000; max-height: 86vh; }
@media (max-width: 1100px) { .uz-program > .uz-foto { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .uz-program > .uz-foto { aspect-ratio: 4 / 5; } }
.ks-hikaye .faydalar { list-style: none; }
.ks-hikaye .faydalar li::before { content: none; }
.kesfedin .bolum-baslik { margin-bottom: 1.6rem; }
.metin-bag { color: var(--yesil-koyu); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(95,165,36,.45); text-underline-offset: 4px; }
.metin-bag:hover { text-decoration-color: var(--yesil); }
.hero-alt-dugmeler { position: relative; z-index: 2; margin: 0 0 3.2rem; }
@media (max-width: 900px) { .kaskat-sutun.son .kaskat-baslik { display: none; } }

/* ===== 31 Eki 2026 (3) — «Kimin için?» tekerlek seçici: sütunlar dikey kayar, ortadaki bant seçim; silik = seçili değil; kompakt ===== */
.kaskat { --sira: 44px; position: relative; padding: 0 .4rem; border-radius: 18px; gap: 0; }
.kaskat::before { content: ""; position: absolute; left: .45rem; right: .45rem; top: 50%; height: var(--sira); transform: translateY(-50%); border-radius: 12px; background: var(--lacivert); pointer-events: none; transition: opacity .3s; }
.kaskat.bekliyor::before { opacity: 0; }
.kaskat-sutun { position: relative; z-index: 1; min-width: 0; padding: 0; gap: 0; }
.kaskat-sutun + .kaskat-sutun { border-left: 0; }
.kaskat-liste { display: block; height: calc(var(--sira) * 3); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding-block: var(--sira); box-sizing: border-box; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); outline: none; }
.kaskat-liste::-webkit-scrollbar { display: none; }
.kaskat-oge { height: var(--sira); padding: 0 1rem; border-radius: 12px; scroll-snap-align: center; font-size: 1rem; color: var(--lacivert); opacity: .32; transition: opacity .2s, color .2s; background: transparent !important; box-shadow: none !important; animation: none !important; }
.kaskat-oge:hover { opacity: .6; }
.kaskat-sutun[data-sutun="rol"] .kaskat-oge.orta, .kaskat-sutun[data-sutun="yer"] .kaskat-oge.orta, .kaskat-sutun[data-sutun="hizmet"] .kaskat-oge.orta { opacity: 1; color: #fff; }
.kaskat.bekliyor [data-sutun="rol"] .kaskat-oge { opacity: .7; color: var(--lacivert); }
.kaskat-sutun.secimsiz .kaskat-oge.orta { color: rgba(255,255,255,.55); }
.kaskat-oge[aria-selected="true"] { background: transparent; color: var(--lacivert); }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"] { opacity: 1; background: transparent; }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge.orta .kutu { border-color: rgba(255,255,255,.6); background: transparent; }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"] .kutu { background: var(--yesil); border-color: var(--yesil); }
.kaskat-sutun.son .kaskat-liste { overflow: hidden; }
.kaskat-sutun.son .kaskat-oge { opacity: 1; color: #fff; background: transparent !important; }
.kaskat-sutun + .kaskat-sutun::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--kenar); opacity: .6; }
.kaskat-ipucu { margin: .7rem 0 0; font-size: .8rem; color: var(--gri); }
.kaskat-cumle { margin-top: 1.6rem; }
.kaskat.bekliyor [data-sutun="rol"] .kaskat-oge { animation: none !important; }
.kaskat.bekliyor [data-sutun="rol"] .kaskat-liste { animation: teker-ipucu 2.6s ease-in-out 1s infinite; }
@keyframes teker-ipucu { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-6px); } 90% { transform: translateY(3px); } }
@media (max-width: 900px) {
  .kaskat { flex-direction: column; width: 100%; padding: .2rem .3rem; }
  .kaskat::before { display: none; }
  .kaskat-sutun { position: relative; }
  .kaskat-sutun::after { content: ""; position: absolute; left: .1rem; right: .1rem; top: 50%; height: var(--sira); transform: translateY(-50%); border-radius: 12px; background: var(--lacivert); z-index: -1; }
  .kaskat.bekliyor [data-sutun="rol"]::after { opacity: 0; }
  .kaskat-sutun + .kaskat-sutun::before { left: 18%; right: 18%; top: 0; bottom: auto; width: auto; height: 1px; }
}
@media (min-width: 901px) { .kaskat-sutun + .kaskat-sutun::before { top: 10%; bottom: 10%; background: linear-gradient(var(--kenar) 0 30%, transparent 30% 70%, var(--kenar) 70%); } }
/* 31 Eki (4): başlık cümlesi küçüldü; iş ve yer düz lacivert, konular yeşil; belirlenmeyen parça karışık harf (text-scramble) */
.kaskat-cumle { font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.22; max-width: 38ch; margin: 1.4rem 0 2rem; }
.kaskat-cumle .kc-parca { font-style: normal; color: var(--lacivert); }
.kaskat-cumle em.kc-parca { font-style: italic; color: var(--yesil-koyu); }
.kaskat-cumle .kc-parca.karisik { color: rgba(17,42,67,.32); font-style: normal; letter-spacing: .02em; }
/* 31 Eki (5): alan tek satır — beyaz kart yok, yalnız lacivert seçim bandı; seçilmeyenler üstte/altta hayalet */
.kaskat { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; padding: 0; }
.kaskat::before { left: 0; right: 0; box-shadow: 0 18px 36px -22px rgba(17,42,67,.55); }
.kaskat-liste { -webkit-mask-image: linear-gradient(rgba(0,0,0,.55), #000 33.4%, #000 66.6%, rgba(0,0,0,.55)); mask-image: linear-gradient(rgba(0,0,0,.55), #000 33.4%, #000 66.6%, rgba(0,0,0,.55)); }
.kaskat-oge { opacity: .28; }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"]:not(.orta) { opacity: .5; }
@media (min-width: 901px) { .kaskat-sutun + .kaskat-sutun::before { top: 0; bottom: 0; background: linear-gradient(transparent 0 36%, rgba(255,255,255,.2) 36% 64%, transparent 64%); z-index: 2; } }
.kaskat.bekliyor::before { opacity: 1; background: rgba(17,42,67,.06); box-shadow: inset 0 0 0 1px var(--kenar); }
.kaskat-ipucu { margin-top: .4rem; }
@media (max-width: 900px) {
  .kaskat { padding: 0; }
  .kaskat-sutun::after { left: 0; right: 0; }
  .kaskat.bekliyor [data-sutun="rol"]::after { opacity: 1; background: rgba(17,42,67,.06); box-shadow: inset 0 0 0 1px var(--kenar); }
  .kaskat-sutun + .kaskat-sutun::before { display: none; }
}
/* 31 Eki (7): üstte ve altta ikişer hayalet satır; açık zemin, lacivert yazı ve çerçeve */
.kaskat-liste { height: calc(var(--sira) * 5); padding-block: calc(var(--sira) * 2);
  -webkit-mask-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.6) 20%, #000 40%, #000 60%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.25)); mask-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.6) 20%, #000 40%, #000 60%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.25)); }
.kaskat::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--lacivert), 0 14px 30px -20px rgba(17,42,67,.45); }
.kaskat.bekliyor::before { background: #fff; box-shadow: inset 0 0 0 1px var(--kenar); }
.kaskat-sutun[data-sutun="rol"] .kaskat-oge.orta, .kaskat-sutun[data-sutun="yer"] .kaskat-oge.orta, .kaskat-sutun[data-sutun="hizmet"] .kaskat-oge.orta, .kaskat-sutun.son .kaskat-oge { color: var(--lacivert); }
.kaskat-sutun.secimsiz .kaskat-oge.orta { color: rgba(17,42,67,.45); }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge.orta .kutu { border-color: var(--lacivert); }
.kaskat-sutun[data-sutun="hizmet"] .kaskat-oge[aria-selected="true"] .kutu { border-color: var(--yesil); }
@media (min-width: 901px) { .kaskat-sutun + .kaskat-sutun::before { background: linear-gradient(transparent 0 42%, rgba(17,42,67,.18) 42% 58%, transparent 58%); } }
@media (max-width: 900px) {
  .kaskat-sutun::after { background: #fff; box-shadow: inset 0 0 0 1.5px var(--lacivert); }
  .kaskat.bekliyor [data-sutun="rol"]::after { background: #fff; box-shadow: inset 0 0 0 1px var(--kenar); }
}
@media (max-width: 900px) { .kaskat-liste { height: calc(var(--sira) * 3); padding-block: var(--sira); -webkit-mask-image: linear-gradient(rgba(0,0,0,.45), #000 33.4%, #000 66.6%, rgba(0,0,0,.45)); mask-image: linear-gradient(rgba(0,0,0,.45), #000 33.4%, #000 66.6%, rgba(0,0,0,.45)); } }
.kaskat-oge { opacity: .42; }
/* 31 Eki (8): seçici ortada; cümle sol sütunda içgörünün üstünde (seçim yokken ortada tek başına) */
.kaskat { margin-inline: auto; }
.kaskat-ipucu { text-align: center; }
.kaskat-sonuc { margin-top: 2rem; }
#hedef:not(.secimli) .kaskat-sonuc { grid-template-columns: 1fr; justify-items: center; text-align: center; }
#hedef:not(.secimli) .kaskat-cumle { margin-inline: auto; }
.ks-metin .kaskat-cumle { margin: 0 0 1.4rem; font-size: clamp(1.35rem, 2vw, 1.8rem); max-width: none; }
.ks-programlar[hidden] { display: none; }
/* 31 Eki (10): içgörü sorusunun ikinci yarısı yeşil; boş konu yeri sabit «…» */
.ks-hikaye blockquote.soru p em { font-style: normal; color: var(--yesil-koyu); }
.kaskat-cumle .kc-parca.bos { color: rgba(17,42,67,.35); font-style: normal; border-bottom: 2px dotted rgba(95,165,36,.6); }
/* 31 Eki (11): ana sayfada «Birlikte nasıl çalışır?» açılır kapanır; açılınca bölümün tam hâli */
.birlikte-ac > summary { list-style: none; cursor: pointer; position: relative; }
.birlikte-ac > summary::-webkit-details-marker { display: none; }
.birlikte-ac .ac-kapa { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; font-weight: 700; font-size: .92rem; color: var(--yesil-koyu); }
.birlikte-ac .ac-kapa i { font-style: normal; }
.birlikte-ac .ac-kapa .menu-ok { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .3s var(--gecis); }
.birlikte-ac .kapa-yazi { display: none; }
.birlikte-ac[open] .ac-yazi { display: none; }
.birlikte-ac[open] .kapa-yazi { display: inline; }
.birlikte-ac[open] .ac-kapa .menu-ok { transform: rotate(-90deg); }
.birlikte-ac[open] > summary { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; align-items: flex-end; }
.birlikte-ac[open] > summary > .etiket-k, .birlikte-ac[open] > summary > b, .birlikte-ac[open] > summary > .kopru-alt { display: none; }
.birlikte-ac[open] > summary .ac-kapa { position: absolute; right: 0; top: .2rem; margin: 0; z-index: 2; }
.birlikte-ac .dongu { padding: 0; background: none; animation: gel .45s var(--gecis); }
.birlikte-ac .dongu > .ic { width: auto; max-width: none; padding: 0; margin: 0; }
section.bolum.acik-zemin.dongu:is(.birlikte-ac *) { background: transparent; }
#birlikte:has(.birlikte-ac[open]) { background: var(--zemin-2); padding-block: clamp(3rem, 6vw, 5rem); }
.teklif-form .hafif { font-weight: 300; opacity: .8; }
/* 31 Eki (12): «Yatırımcıyım.» satırı «HEDEFİNİZE ULAŞIN» etiketiyle aynı hizada; üstteki boşluk azaldı */
#hedef.bolum { padding-top: clamp(2rem, 4vw, 3.2rem); }
@media (min-width: 901px) {
  #hedef .etiket { margin-bottom: 0; height: 22px; display: flex; align-items: center; }
  #hedef .kaskat { margin-top: -33px; }
}
/* 31 Eki (13): «Birlikte nasıl çalışır?» kapalıyken yalnız üst kısım + «Açın» */
.dongu-acilir > .ic { position: relative; }
.dongu-acilir.kapali > .ic > :not(.dongu-ust):not(.acilir-ust):not(.dongu-ac) { display: none !important; }
.dongu-acilir.kapali .dongu-ust { cursor: pointer; margin-bottom: 0; }
.dongu-acilir:not(.kapali) > .ic > :not(.dongu-ust):not(.acilir-ust):not(.dongu-ac) { animation: gel .45s var(--gecis); }
.dongu-ac { position: absolute; right: 0; top: -2.2rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .92rem; color: var(--gri); cursor: pointer; }
.dongu-ac i { font-style: normal; }
.dongu-ac .menu-ok { width: 18px; height: 18px; color: var(--yesil); transform: rotate(90deg); transition: transform .3s var(--gecis); }
.dongu-ac .kapa-yazi { display: none; }
.dongu-acilir:not(.kapali) .dongu-ac .ac-yazi { display: none; }
.dongu-acilir:not(.kapali) .dongu-ac .kapa-yazi { display: inline; }
.dongu-acilir:not(.kapali) .dongu-ac .menu-ok { transform: rotate(-90deg); }
.dongu-ac:hover { color: var(--lacivert); }

/* 31 Eki: hero cihaz çerçevelerinde ekran videoları (görsel yerine) */
.cihaz video.hero-ekran { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; background: #0d1f31; }
.ucan-cihaz .cihaz video.hero-ekran, .ucan-cihaz2 .cihaz video.hero-ekran { opacity: .84; }
.ucan-cihaz.indi .cihaz video.hero-ekran, .ucan-cihaz2.indi .cihaz video.hero-ekran { opacity: 1; }
/* 31 Eki (14): dar ekranda da tek satır — sütunlar yan yana, ortak seçim bandı; sığmayan kısım yatay kaydırılır */
@media (max-width: 900px) {
  .kaskat { --sira: 40px; flex-direction: row; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .kaskat::-webkit-scrollbar { display: none; }
  .kaskat-sutun { flex: none; scroll-snap-align: start; }
  .kaskat-liste { height: calc(var(--sira) * 5); padding-block: calc(var(--sira) * 2);
    -webkit-mask-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.6) 20%, #000 40%, #000 60%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.25)); mask-image: linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.6) 20%, #000 40%, #000 60%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.25)); }
  .kaskat-oge { white-space: nowrap; font-size: .9rem; padding: 0 .75rem; }
  .kaskat-oge .kutu { width: 18px; height: 18px; }
  .kaskat-sutun::after { border-radius: 0; box-shadow: inset 0 1.5px 0 var(--lacivert), inset 0 -1.5px 0 var(--lacivert); }
  .kaskat-sutun:first-child::after { border-radius: 12px 0 0 12px; box-shadow: inset 1.5px 1.5px 0 var(--lacivert), inset 0 -1.5px 0 var(--lacivert); }
  .kaskat-sutun:last-child::after { border-radius: 0 12px 12px 0; box-shadow: inset -1.5px 1.5px 0 var(--lacivert), inset 0 -1.5px 0 var(--lacivert); }
  .kaskat-sutun + .kaskat-sutun::before { display: block; left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(transparent 0 42%, rgba(17,42,67,.18) 42% 58%, transparent 58%); z-index: 2; }
  .kaskat.bekliyor .kaskat-sutun::after { background: #fff; box-shadow: inset 0 1px 0 var(--kenar), inset 0 -1px 0 var(--kenar); }
  .kaskat-ipucu { font-size: .76rem; }
}
.dar-ipucu { display: none; } @media (max-width: 900px) { .dar-ipucu { display: inline; } }
@media (max-width: 900px) { .kaskat-sutun + .kaskat-sutun { border-top: 0; } }
/* 31 Eki (15): telefonda ilk sütun (rol) ve cümledeki rol parçası yok; rol, seçilen yerden türetilir */
@media (max-width: 700px) {
  #hedef .kaskat-sutun[data-sutun="rol"], #hedef .kaskat-cumle .kc-parca[data-parca="rol"] { display: none; }
  #hedef .kaskat-sutun[data-sutun="yer"]::before { display: none; }
  #hedef .kaskat-sutun[data-sutun="yer"]::after { border-radius: 12px 0 0 12px; box-shadow: inset 1.5px 1.5px 0 var(--lacivert), inset 0 -1.5px 0 var(--lacivert); }
}

/* ===== 1 Kas 2026 — revizyon turu ===== */
/* SP Yem: adın yanında ince «(Test Aşamasında)»; ürün kartı ve sayfasında açıklama */
.test-not { font-weight: 300; opacity: .8; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.rozet .test-not, .urun-rozet .test-not { font-size: .92em; }
.aile-bilgi .aile-not, .ks-pano-alt .aile-not { margin: .5rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--gri, #5b6b7b); font-style: italic; }
.ucan-kart.aile-bilgi .aile-not { color: #5b6b7b; opacity: 1; }
.us-hero .test-aciklama { margin: -.4rem 0 1.2rem; font-size: .95rem; color: var(--soluk); font-style: italic; }
/* Hero: daktilo yok, metin sabit */
.slayt .daktilo.sabit, .slayt .giris.daktilo.sabit { min-height: 0; }
/* Site turu: ilk üç ziyarette hero'da sağ altta düğme (WhatsApp hero'da görünmez) */
.tur-dugme { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1.15rem 0 .95rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); background: rgba(13,31,49,.62); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: opacity .35s var(--egri), transform .35s var(--egri), background .2s, border-color .2s; }
.tur-dugme svg { width: 20px; height: 20px; color: var(--yesil-neon); }
.tur-dugme:hover, .tur-dugme:focus-visible { background: rgba(13,31,49,.85); border-color: var(--yesil-neon); }
.tur-dugme.gizli { opacity: 0; transform: translateY(24px); pointer-events: none; }
@media (max-width: 640px) { .tur-dugme { right: 14px; bottom: 14px; min-height: 46px; font-size: .88rem; } }
/* Menü: altı satır tek liste — SürüPlan Platform · Birlikte Kullanım · Başlangıç ve Destek · SürüPlan Uzman · Hakkımızda · Site Turu */
.menu-gruplar { border-bottom: 0; padding-bottom: 0; margin-bottom: 2px; }
.menu-gruplar > .menu-satir, .menu-panel > a:not(.dugme) { display: block; padding: .7rem .8rem .7rem 1rem; border-radius: 12px; font-weight: 700; font-size: .95rem; color: #fff; transition: background .12s, color .12s; }
.menu-gruplar > .menu-satir:hover, .menu-panel > a:not(.dugme):hover { background: rgba(155,225,93,.14); color: var(--yesil-neon); }
.ust.kaydi .menu-gruplar > .menu-satir, .ust.kaydi .menu-panel > a:not(.dugme) { color: var(--metin); }
.ust.kaydi .menu-gruplar > .menu-satir:hover, .ust.kaydi .menu-panel > a:not(.dugme):hover { background: rgba(95,165,36,.12); color: var(--yesil-koyu); }
.menu-panel > a.dugme.teklif-panel { margin-top: .6rem; }
/* Form: açılır-kapanır bölümler, hizalı alanlar */
.teklif-form label > .alan-ad { display: block; line-height: 1.3; }
.teklif-form .satirlar { align-items: start; }
.teklif-form .satirlar > label { grid-template-rows: auto auto; align-content: start; }
.teklif-form .form-acilir { display: block; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(10,27,44,.35); transition: border-color .2s, background .2s; }
.teklif-form .form-acilir[open] { border-color: rgba(155,225,93,.4); background: rgba(10,27,44,.5); }
.teklif-form .form-acilir > summary { display: flex; align-items: center; gap: .7rem; min-height: 50px; padding: .65rem .95rem; cursor: pointer; list-style: none; font-size: .9rem; font-weight: 600; color: var(--metin-acik); border-radius: 14px; }
.teklif-form .form-acilir > summary::-webkit-details-marker { display: none; }
.teklif-form .form-acilir > summary > span { flex: none; }
.teklif-form .form-acilir > summary .ozet { flex: 1; min-width: 0; font-style: normal; font-weight: 500; font-size: .85rem; color: var(--yesil-neon); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.teklif-form .form-acilir > summary .acilir-ok { width: 18px; height: 18px; flex: none; color: var(--soluk); transition: transform .25s var(--egri); }
.teklif-form .form-acilir[open] > summary .acilir-ok { transform: rotate(180deg); color: var(--yesil-neon); }
.teklif-form .form-acilir[open] > summary .ozet { visibility: hidden; }
.teklif-form .form-acilir > summary:focus-visible { outline: 2px solid var(--yesil-neon); outline-offset: 2px; }
.teklif-form .form-acilir .acilir-ic, .teklif-form .form-acilir .konu-oneri { display: flex; flex-direction: column; gap: .8rem; padding: .2rem .95rem 1rem; margin: 0; }
.teklif-form .form-acilir .konu-oneri { flex-direction: row; flex-wrap: wrap; gap: .45rem; }
.teklif-form .form-acilir.coklu > summary > span { width: auto; }
@media (max-width: 600px) {
  .teklif-form { padding: 1.2rem; gap: .9rem; }
  .teklif-form .form-acilir > summary { flex-wrap: wrap; }
  .teklif-form .form-acilir > summary > span { flex: 1 1 auto; }
  .teklif-form .form-acilir > summary .ozet { order: 3; flex-basis: 100%; text-align: left; }
  .teklif-form .secim span { padding: .45rem .85rem; font-size: .86rem; }
  .teklif-form .konu-cip { font-size: .84rem; }
}
/* Hedef: program ekranı daha yatay (≈1,85), bölüm 13" ekranda aşağı uzamaz */
.profil-video { aspect-ratio: 1280 / 692; }
.teklif-form details.form-acilir.alan-secim { display: block; }
.teklif-form .secim span .hafif { padding: 0; border: 0; border-radius: 0; background: none; font-size: inherit; }
.teklif-form .form-acilir[open] > summary .ozet, .teklif-form .form-acilir > summary .ozet:empty { display: none; }
@media (max-width: 600px) { .teklif-form .form-acilir > summary > span { flex: 1 1 0; min-width: 0; } }
/* tur düğmesi slayt seçici ve oklarının üstünde durur */
.tur-dugme { bottom: 92px; }
@media (max-width: 640px) { .tur-dugme { bottom: 112px; } }

/* ===== 1 Kas (2) ===== */
/* Form: bölüm zemini koyu kalır, form açık zeminde */
.teklif-form { background: #fff; border: 0; color: var(--metin); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 60px rgba(0,0,0,.28); }
.teklif-form h3 { color: var(--lacivert); }
.teklif-form label, .teklif-form .urunler > span, .teklif-form .alan-secim > span, .teklif-form .form-acilir > summary { color: var(--lacivert); }
.teklif-form .hafif { color: var(--gri); opacity: 1; }
.teklif-form input:not([type=checkbox]), .teklif-form textarea { background: var(--zemin-2); border: 1px solid var(--kenar); color: var(--metin); }
.teklif-form input::placeholder, .teklif-form textarea::placeholder { color: #93A1B1; }
.teklif-form input:focus, .teklif-form textarea:focus { outline: 2px solid var(--yesil); background: #fff; }
.teklif-form .secim span { border-color: #C9D4E0; color: var(--lacivert); }
.teklif-form .secim:hover span { border-color: var(--yesil); }
.teklif-form .secim input:checked + span { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.teklif-form .secim input:focus-visible + span { outline-color: var(--yesil); }
.teklif-form .alan-secim.coklu .secim-grup > b { color: var(--gri); opacity: 1; }
.teklif-form .form-acilir { background: var(--zemin-2); border-color: var(--kenar); }
.teklif-form .form-acilir[open] { background: #fff; border-color: rgba(95,165,36,.45); }
.teklif-form .form-acilir > summary .ozet { color: var(--yesil-koyu); }
.teklif-form .form-acilir > summary .acilir-ok { color: var(--gri); }
.teklif-form .form-acilir[open] > summary .acilir-ok { color: var(--yesil-koyu); }
.teklif-form .form-acilir > summary:focus-visible { outline-color: var(--yesil); }
.teklif-form .konu-cip { border-color: #C9D4E0; color: var(--lacivert); background: #fff; }
.teklif-form .konu-cip i { color: var(--gri); }
.teklif-form .konu-cip:hover { border-color: var(--yesil); }
.teklif-form .konu-cip.secili { background: rgba(95,165,36,.12); border-color: var(--yesil); color: var(--lacivert); }
.teklif-form .konu-cip.secili i { color: var(--yesil-koyu); }
.teklif-form .birim i { color: var(--gri); }
.teklif-form .secim.onay { color: var(--gri); }
.teklif-form .secim.onay input:checked + span { color: var(--lacivert); }
.teklif-form .secim.onay a { color: var(--yesil-koyu); }
.teklif-form.eksik .secim.onay:has(input:not(:checked)) { color: #B86E00; }
.teklif-form .durum { color: var(--yesil-koyu); }
.teklif-form .durum.hata { color: #C0392B; }
.teklif-form .not { color: var(--gri); }
.teklif-form button[type=submit] { box-shadow: none; }
/* Üst çubuk: açık grubun adı kenara binen küçük çerçeve yerine grubun başında, ince çizgiyle ayrılmış iki satırlık etiket */
@media (min-width: 901px) {
  .ust nav .urun-grubu:not(.kapali) i { position: static; transform: none; align-self: stretch; display: flex; align-items: center; margin: 0 .15rem 0 0; padding: 0 .7rem 0 .75rem; background: none; border-radius: 0; box-shadow: none; border-right: 1px solid rgba(255,255,255,.18); line-height: 1; }
  .ust nav .urun-grubu:not(.kapali) i b { width: min-content; font-size: .52rem; line-height: 1.35; letter-spacing: .16em; text-align: left; }
  .ust.kaydi nav .urun-grubu:not(.kapali) i { background: none; box-shadow: none; border-right-color: var(--kenar); }
}

/* 1 Kas (3): ana sayfada «Birlikte nasıl çalışır?» ve «Üründen bir örnek» kapalıyken yalnız etiket + başlık; sağda «Açın» */
.acilir-bolum.kapali > .ic > :not(.dongu-ust):not(.acilir-ust):not(.dongu-ac) { display: none !important; }
.acilir-bolum.kapali { padding-block: clamp(2.8rem, 5vw, 4rem); }
.acilir-bolum.kapali .dongu-giris, .acilir-bolum.kapali .acilir-ust > p { display: none; }
.acilir-bolum.kapali .dongu-ust, .acilir-bolum.kapali .acilir-ust { cursor: pointer; margin: 0; padding-right: 9rem; display: block; text-align: left; }
.acilir-bolum.kapali .acilir-ust h2, .acilir-bolum.kapali .dongu-ust h2 { margin-bottom: 0; }
.acilir-bolum:not(.kapali) > .ic > :not(.dongu-ust):not(.acilir-ust):not(.dongu-ac) { animation: gel .45s var(--gecis); }
.acilir-bolum .dongu-ac { top: -2.2rem; }
.acilir-bolum.kapali .dongu-ac { top: 50%; transform: translateY(-50%); padding: .6rem 1.1rem .6rem 1.2rem; border: 1px solid var(--kenar); border-radius: 999px; background: #fff; color: var(--lacivert); box-shadow: 0 4px 14px rgba(17,42,67,.06); transition: border-color .2s, box-shadow .2s; }
.acilir-bolum.kapali .dongu-ac:hover { border-color: var(--yesil); box-shadow: 0 6px 18px rgba(17,42,67,.1); }
@media (max-width: 700px) {
  .acilir-bolum.kapali > .ic { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .acilir-bolum.kapali .dongu-ust, .acilir-bolum.kapali .acilir-ust { padding-right: 0; }
  .acilir-bolum.kapali .dongu-ac { position: static; transform: none; order: 2; }
}
/* iki açılır bölümün başlıkları aynı ölçekte */
#ornek .acilir-ust h2 { font-size: clamp(1.9rem, 2.7vw, 2.6rem); line-height: 1.08; }

/* ===== 1 Kas (6) ===== */
/* Hedef: seçici sol sütunda, interaktif cümlenin üstünde; Uzman bağlantısı sol sütunun altında */
#hedef .kaskat-sonuc { margin-top: 1.4rem; }
@media (min-width: 901px) { #hedef .kaskat-sonuc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
#hedef .ks-metin .kaskat { margin: 0 0 0 -.2rem; width: 100%; max-width: 100%; }
#hedef .ks-metin .kaskat-ipucu { text-align: left; margin: .3rem 0 1.4rem; }
#hedef .ks-uzman { margin: 1.6rem 0 0; }
@media (min-width: 901px) {
  #hedef .kaskat { margin-top: 0; }
  #hedef .ks-metin .kaskat { overflow-x: auto; scrollbar-width: none; }
  #hedef .ks-metin .kaskat::-webkit-scrollbar { display: none; }
  #hedef .ks-metin .kaskat-oge { font-size: .92rem; }
}
@media (min-width: 901px) {
  #hedef .kaskat-sonuc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2.6rem; }
  #hedef .ks-metin .kaskat-oge { padding: 0 .7rem; font-size: .9rem; white-space: nowrap; }
}
/* CTA düğmeleri: dolgu her düğmede aynı hızla ilerler («Programları tanıyın» hızı); süre düğme genişliğinden (js: --ds) */
.dugme::before { transition: width var(--ds, .5s) cubic-bezier(.22, 1, .36, 1), left var(--ds, .5s) cubic-bezier(.22, 1, .36, 1), border-radius var(--ds, .5s), background .35s; }
.dugme:hover::before { transition: width var(--ds, .5s) cubic-bezier(.22, 1, .36, 1), left var(--ds, .5s) cubic-bezier(.22, 1, .36, 1), border-radius var(--ds, .5s), background .35s var(--ds, .5s); }
.dugme .ok { transition: left var(--ds, .5s) cubic-bezier(.22, 1, .36, 1); }
.dugme .metin { transition: color .3s, transform var(--ds, .5s) cubic-bezier(.22, 1, .36, 1); }
/* Kapalı açılır bölümler: ince bant — etiket, tek satır başlık, küçük «Açın» */
.acilir-bolum.kapali { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
.acilir-bolum.kapali .etiket { margin-bottom: .35rem; font-size: .68rem; }
.acilir-bolum.kapali .dongu-ust h2, .acilir-bolum.kapali .acilir-ust h2, #ornek.kapali .acilir-ust h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; margin-top: 0; }
.acilir-bolum.kapali h2 br { display: none; }
.acilir-bolum.kapali .dongu-ust h2 em::before { content: " "; }
.acilir-bolum.kapali .dongu-ust h2 em { white-space: normal; }
.acilir-bolum.kapali .dongu-ac { padding: .42rem .85rem .42rem .95rem; font-size: .84rem; box-shadow: none; }
.acilir-bolum.kapali .dongu-ac .menu-ok { width: 15px; height: 15px; }
.acilir-bolum.kapali + .acilir-bolum.kapali { border-top: 1px solid var(--kenar); }
@media (max-width: 700px) { .acilir-bolum.kapali > .ic { gap: .7rem; } }
#dongu.acilir-bolum.kapali .dongu-ust h2 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin-top: 0; }
#dongu.acilir-bolum.kapali, #ornek.acilir-bolum.kapali { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
#dongu.acilir-bolum.kapali .dongu-ust { padding-block: 0; }
#dongu.acilir-bolum.kapali .dongu-ust { margin-bottom: 0; }
@media (min-width: 701px) { #dongu.acilir-bolum.kapali > .ic { display: block; } }
/* Hero ürün slaytları: kartlar sırayla gelir (stagger); tıklanınca büyür */
@keyframes ucan-gel { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.urun-slayt.aktif .ucan-cihaz2 { animation: ucan-gel .7s cubic-bezier(.22, 1, .36, 1) .15s backwards; }
.urun-slayt.aktif .ucan-cihaz { animation: ucan-gel .7s cubic-bezier(.22, 1, .36, 1) .32s backwards; }
.urun-slayt.aktif .ucan-kart { animation: ucan-gel .7s cubic-bezier(.22, 1, .36, 1) .49s backwards; }
@media (prefers-reduced-motion: reduce) { .urun-slayt.aktif .ucan { animation: none; } }
.urun-slayt .ucan:not(.indi) { cursor: zoom-in; }
.buyut-perde { position: fixed; inset: 0; z-index: 90; background: rgba(8, 20, 33, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s; cursor: zoom-out; }
.buyut-perde.acik { opacity: 1; }
.buyut-perde.mobil { background: rgba(8, 20, 33, .94); }
.buyut-klon { position: fixed; z-index: 91; transform-origin: 0 0; box-shadow: 0 40px 90px rgba(0,0,0,.5); border-radius: 14px; }
.buyut-klon .cihaz { margin: 0; width: 100%; }
.buyut-klon .cihaz video, .buyut-klon .cihaz img { opacity: 1 !important; }
.buyut-klon.kart > * { position: static !important; width: 100% !important; transform: none !important; opacity: 1 !important; pointer-events: none; }
html.buyut-acik .wa-dugme, html.buyut-acik .tur-dugme { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .buyut-klon { border-radius: 0; box-shadow: none; } .buyut-klon.kart { border-radius: 14px; } }
.urun-slayt .ucan.ucan-kart:not(.indi) { pointer-events: auto; }
/* Fizibilite: hero fotoğrafı arka planda; yanda yalnız ekran */
.us-hero.us-hero-foto { position: relative; overflow: hidden; }
.us-hero-arka { position: absolute; inset: 0; z-index: 0; }
.us-hero-arka img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }
.us-hero-arka .hero-perde { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,27,44,.94) 0%, rgba(10,27,44,.82) 42%, rgba(10,27,44,.45) 75%, rgba(10,27,44,.35) 100%), linear-gradient(0deg, rgba(10,27,44,.7), transparent 40%); }
.us-hero-foto > .ic { position: relative; z-index: 1; }
.us-hero-gorsel.yalniz-ekran { padding-bottom: 0; display: flex; align-items: center; }
.us-hero-gorsel.yalniz-ekran .cihaz.ekran { position: relative; left: auto; bottom: auto; width: 100%; }
@media (max-width: 700px) { .us-hero-arka .hero-perde { background: linear-gradient(180deg, rgba(10,27,44,.88), rgba(10,27,44,.8) 60%, rgba(10,27,44,.95)); } .us-hero-gorsel.yalniz-ekran .cihaz.ekran { margin: 0 auto; width: 100%; } }
/* Seçiciye bağlı ekran değişimi */
.us-kanit .cihaz img { transition: opacity .18s ease, filter .18s ease; }
.us-kanit .cihaz img.degisiyor { opacity: .15; filter: blur(2px); }
/* Ekran keşfi: paneller üst üste, yumuşak geçiş (atlama/parlama yok) */
.kesif-sahne { display: grid; }
.kesif-panel { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; animation: none; transition: opacity .35s ease, visibility 0s linear .35s; }
.kesif-panel.aktif { display: block; opacity: 1; visibility: visible; transition: opacity .35s ease; }
.kesif-ekran { position: relative; }
.kesif-kapsam { position: absolute; left: 4%; right: 4%; bottom: 5%; z-index: 2; padding: .85rem 1rem .9rem; border-radius: 14px; background: rgba(13,31,49,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; box-shadow: 0 18px 40px rgba(10,27,44,.35); pointer-events: none; }
.kesif-kapsam .etiket-k { display: block; margin-bottom: .5rem; color: var(--yesil-neon); font-size: .66rem; letter-spacing: .14em; }
.kesif-kapsam ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.kesif-kapsam li { padding: .22rem .6rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: .74rem; font-weight: 600; line-height: 1.3; }
.kesif-panel.aktif .kesif-kapsam { animation: gel .5s cubic-bezier(.22, 1, .36, 1) .1s backwards; }
.kesif-panel.aktif .kesif-kapsam li { animation: gel .45s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(.25s + var(--i) * .05s); }
@media (max-width: 700px) { .kesif-kapsam { position: static; margin-top: .7rem; } }
@media (prefers-reduced-motion: reduce) { .kesif-panel, .kesif-panel.aktif { transition: none; } .kesif-panel.aktif .kesif-kapsam, .kesif-panel.aktif .kesif-kapsam li { animation: none; } }
/* Gerçekleşen: eşleşen satırlar sırayla yanar, aktarım hattında veri akar */
.us-plangercek .kolon li { padding: .2rem .5rem; margin-left: -.5rem; border-radius: 8px; transition: background .4s, color .4s, box-shadow .4s; }
.us-plangercek .kolon li.es { background: rgba(95,165,36,.12); color: var(--yesil-koyu); box-shadow: inset 3px 0 0 var(--yesil); font-weight: 600; }
.aktarim-etiketi .akis { position: absolute; z-index: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--yesil); box-shadow: 0 0 0 4px rgba(95,165,36,.2); opacity: 0; left: 0; top: calc(50% - 5px); }
.us-plangercek.akiyor .aktarim-etiketi .akis { animation: akis-yatay 1.4s cubic-bezier(.45, 0, .2, 1); }
@keyframes akis-yatay { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
.us-plangercek.akiyor .aktarim-etiketi span { animation: nabiz-pil 1.4s ease; }
@keyframes nabiz-pil { 40% { box-shadow: 0 0 0 6px rgba(95,165,36,.18); border-color: var(--yesil); } }
.us-plangercek .sonuc { transition: color .3s; }
@media (max-width: 900px) { @keyframes akis-yatay { 0% { left: calc(50% - 5px); top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(50% - 5px); top: calc(100% - 10px); opacity: 0; } } }
/* 1 Kas (7): telefonda hero ekrana sığsın — animasyon küçülmeden yukarı alınır; çiftlik kaidesinin üst ve altındaki boş pay kırpılır, slayt düğmeleri kadraja girer */
@media (max-width: 600px) {
  .hero.hero-slider { flex-direction: column; height: 100svh; min-height: 560px; max-height: 920px; }
  .hero.hero-slider .slaytlar { flex: 1 1 auto; min-height: 0; }
  .hero.hero-slider .slayt { align-items: start; align-content: start; padding-top: 84px; }
  .hero.hero-slider .slayt > .ic { align-items: start; align-content: start; }
  .hero.hero-slider .slayt-nav { flex: none; }
  .slayt .ciftlik-yalin { margin-top: -56px; margin-bottom: -112px; }
  .slayt .metin { position: relative; z-index: 2; }
}
/* kısa telefon ekranında ürün slaytının paragrafı gizlenir (aynı açıklama alttaki kartta) */
@media (max-width: 600px) and (max-height: 780px) { .urun-slayt .giris { display: none; } }
/* 1 Kas (8): Hedef — telefonda seçici yok; çiftlik türü ve konular dokunulabilir seçenekler */
.ks-mobil-secim { display: none; }
@media (max-width: 900px) {
  #hedef .kaskat, #hedef .kaskat-ipucu, #hedef .kaskat-cumle { display: none !important; }
  .ks-mobil-secim { display: grid; gap: 1.3rem; margin: .4rem 0 1.8rem; }
  .ms-baslik { display: block; margin-bottom: .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lacivert); }
  .ms-baslik .hafif { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--gri); }
  .ms-cipler { display: flex; flex-wrap: wrap; gap: .5rem; }
  .ms-yer { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .ms-cip { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .55rem .95rem; border: 1px solid var(--kenar); border-radius: 999px; background: #fff; color: var(--lacivert); font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
  .ms-yer .ms-cip { border-radius: 14px; padding: .6rem .4rem; text-align: center; font-size: .86rem; }
  .ms-cip .kutu-onay { width: 15px; height: 15px; flex: none; display: none; }
  .ms-cip[aria-pressed="true"] { background: var(--lacivert); border-color: var(--lacivert); color: #fff; box-shadow: 0 8px 18px -10px rgba(17,42,67,.6); }
  .ms-hizmet .ms-cip[aria-pressed="true"] { background: rgba(95,165,36,.12); border-color: var(--yesil); color: var(--lacivert); box-shadow: none; }
  .ms-hizmet .ms-cip[aria-pressed="true"] .kutu-onay { display: block; color: var(--yesil-koyu); }
  .ms-cip:focus-visible { outline: 2px solid var(--yesil); outline-offset: 2px; }
  #hedef .ks-hikaye .soru { margin-top: 0; }
}
@media (max-width: 900px) {
  #hedef .kaskat-sonuc { display: flex; flex-direction: column; gap: 0; }
  #hedef .ks-metin { display: contents; }
  #hedef .ks-programlar { order: 1; margin-top: 1.8rem; }
  #hedef .ks-uzman { order: 2; }
}
/* 1 Kas (9): Uzman kartında SürüPlan Uzman logo biçiminde — yatay SürüPlan logosu + ince çizgi + yeşil «Uzman» */
.uzman-logo { display: inline-flex; align-items: center; gap: .6rem; height: 30px; margin-bottom: .35rem; }
.uzman-logo img { height: 100%; width: auto; display: block; }
.uzman-logo i { width: 1.5px; align-self: stretch; margin: 3px 0; background: var(--kenar); }
.uzman-logo b { font-size: 1.45rem !important; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: var(--yesil); transform: translateY(1px); }
@media (max-width: 900px) { #urunler .uzman-logo { height: 26px; flex-basis: 100%; } #urunler .uzman-logo b { font-size: 1.25rem !important; } }
.uzman-logo { flex-basis: 100%; }
/* 1 Kas (9): Hedef — telefonda tek sütunlu adım akışı: 1 çiftlik (liste, tek seçim) → 2 konular (liste, çoklu) → sonuç; program sekmeleri tek satır */
@media (max-width: 900px) {
  .ks-mobil-secim { gap: 1.4rem; }
  .ms-baslik { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .55rem; }
  .ms-baslik > i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lacivert); color: #fff; font-style: normal; font-size: .72rem; letter-spacing: 0; }
  .ms-baslik .hafif { flex-basis: 100%; padding-left: calc(22px + .55rem); font-size: .78rem; }
  .ms-cipler, .ms-yer { display: flex; flex-direction: column; gap: 0; background: #fff; border: 1px solid var(--kenar); border-radius: 16px; overflow: hidden; }
  .ms-cip, .ms-yer .ms-cip { justify-content: flex-start; gap: .75rem; width: 100%; min-height: 50px; padding: .7rem 1rem; border: 0; border-radius: 0; background: transparent; font-size: .95rem; text-align: left; box-shadow: none; }
  .ms-cip + .ms-cip { border-top: 1px solid var(--kenar); }
  .ms-isaret { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid #B9C5D2; transition: border .2s, box-shadow .2s; }
  .ms-kutu { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; border: 1.5px solid #B9C5D2; color: #fff; transition: background .2s, border-color .2s; }
  .ms-kutu .kutu-onay { display: block !important; width: 13px; height: 13px; opacity: 0; }
  .ms-cip[aria-pressed="true"], .ms-hizmet .ms-cip[aria-pressed="true"] { background: rgba(95,165,36,.08); color: var(--lacivert); font-weight: 700; box-shadow: none; border-color: var(--kenar); }
  .ms-cip[aria-pressed="true"] .ms-isaret { border: 6px solid var(--yesil); }
  .ms-cip[aria-pressed="true"] .ms-kutu { background: var(--yesil); border-color: var(--yesil); }
  .ms-cip[aria-pressed="true"] .ms-kutu .kutu-onay { opacity: 1; color: #fff; }
  #hedef .ks-sekmeler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-snap-type: x proximity; }
  #hedef .ks-sekmeler::-webkit-scrollbar { display: none; }
  #hedef .ks-sekme { flex: none; scroll-snap-align: start; }
}
@media (max-width: 900px) {
  #hedef .ks-programlar, #hedef .ks-pano, #hedef .ks-hikaye { min-width: 0; width: 100%; max-width: 100%; }
  #hedef .ks-programlar > .etiket-k { display: flex; align-items: center; gap: .55rem; font-size: .78rem; letter-spacing: .12em; color: var(--lacivert); margin-bottom: .7rem; }
  #hedef .ks-programlar > .etiket-k::before { content: "3"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--lacivert); color: #fff; font-size: .72rem; letter-spacing: 0; }
}

/* 1 Kas (10): SürüPlan Platform / SürüPlan Uzman imzaları ayraçsız, logotype lacivertiyle tek renk (koyu zeminde beyaz) */
.uzman-logo i { display: none; }
.uzman-logo { gap: .45rem; }
.uzman-logo b { color: var(--lacivert); }
.urun-grubu i b, .urun-grubu.kapali i b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: currentColor; }
.ust.kaydi .urun-grubu i b, .ust.kaydi .urun-grubu.kapali i b { background: none; color: var(--lacivert); }
@media (min-width: 901px) {
  .ust nav .urun-grubu:not(.kapali) i { border-right: 0; padding-right: .35rem; }
}
/* 1 Kas (11): Hedef (telefon) — seçim lacivert çizgiyle çizilir: çiftlik türü daire içine, konuların altı çizilir */
@media (max-width: 900px) {
  .ms-cip[aria-pressed="true"], .ms-hizmet .ms-cip[aria-pressed="true"] { background: transparent; }
  .ms-ad { position: relative; display: inline-block; }
  .ms-cizim { position: absolute; pointer-events: none; overflow: visible; }
  .ms-cizim path { fill: none; stroke: var(--lacivert); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease; }
  .ms-cizim.daire { left: -16px; right: -18px; top: -11px; bottom: -11px; width: calc(100% + 34px); height: calc(100% + 22px); }
  .ms-cizim.alt { left: -3px; right: -3px; bottom: -7px; width: calc(100% + 6px); height: 9px; }
  .ms-cip[aria-pressed="true"] .ms-cizim path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1); }
  .ms-cip[aria-pressed="true"] .ms-cizim.alt path { transition-duration: .5s; }
}
@media (prefers-reduced-motion: reduce) { .ms-cizim path { transition: none !important; } }
@media (max-width: 900px) {
  .ms-cizim.daire { left: -12px; right: auto; top: -13px; bottom: auto; width: calc(100% + 34px); height: calc(100% + 26px); }
  .ms-yer .ms-cip { min-height: 54px; }
}
@media (max-width: 900px) { .ms-cizim { max-width: none; } }
@media (max-width: 900px) { .ms-cizim.daire { left: -9px; width: calc(100% + 30px); } }
/* 1 Kas (12): çizim çerçevesi yazının kutusuna kenar paylarıyla bağlı — daire tüm yazıyı kapsar */
@media (max-width: 900px) {
  .ms-ad { position: relative; display: inline-block; white-space: nowrap; }
  span.ms-cizim { position: absolute; display: block; width: auto !important; height: auto !important; max-width: none; pointer-events: none; }
  span.ms-cizim.daire { left: -12px; right: -14px; top: -12px; bottom: -12px; }
  span.ms-cizim.alt { left: -3px; right: -3px; top: auto; bottom: -8px; height: 9px !important; }
  span.ms-cizim svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
  .ms-cip[aria-pressed="true"] span.ms-cizim path { stroke-dashoffset: 0; }
  .ms-yer .ms-cip { padding-left: 1rem; gap: 1.1rem; }
}

/* 1 Kas (13): telefonda üst çubukta yatay logo (amblem + SürüPlan yazısı); SürüPlan Platform program grubu bu ekranda yok (programlar menüde) */
@media (max-width: 600px) {
  .ust .logo.marka-ust { --lh: 30px; }
  .ust .logo.marka-ust .yazi-kutu { display: block; }
  .ust nav.ana-nav, .ust.acik nav.ana-nav { display: none; }
  .ust-sag { margin-left: auto; }
}
@media (max-width: 600px) { .ust > .ic { display: flex; justify-content: space-between; } .ust .ust-sag { margin-left: auto; } }
/* 1 Kas (14): telefonda program videoları 4:3, yakın kadraj */
@media (max-width: 600px) { #hedef .profil-video { aspect-ratio: 4 / 3; } }

/* 1 Kas (15): tablet / açık katlanır ekran (601–900 px) — hero ekran yüksekliğinde, animasyon kalan alana göre, slayt düğmeleri kadrajda; çubukta üstüne binen grup etiketi yok */
@media (min-width: 601px) and (max-width: 900px) {
  .ust nav .urun-grubu i { display: none; }
  .hero.hero-slider { flex-direction: column; height: 100svh; min-height: 640px; max-height: 1180px; }
  .hero.hero-slider .slaytlar { flex: 1 1 auto; min-height: 0; }
  .hero.hero-slider .slayt { align-items: start; align-content: start; padding-top: 92px; }
  .hero.hero-slider .slayt > .ic { align-items: start; align-content: start; }
  .hero.hero-slider .slayt-nav { flex: none; }
  .slayt .ciftlik-yalin { aspect-ratio: auto; height: clamp(300px, calc(100svh - 420px), 760px); margin-top: -24px; margin-bottom: -36px; }
  .slayt .metin { position: relative; z-index: 2; }
  .urun-slayt .ucan-sahne { max-width: min(640px, calc((100svh - 470px) * 1.25)); }
}
@media (min-width: 601px) and (max-width: 900px) and (max-height: 1100px) { .urun-slayt .giris { display: none; } }

/* 1 Kas (16): masaüstünde «Hedefinize ulaşın» ve «Size uygun programlar» etiketleri aynı hizada; soldaki etiketin altındaki boşluk azaldı */
@media (min-width: 901px) {
  #hedef .kaskat-sonuc { margin-top: 0; }
  #hedef .ks-metin .kaskat { margin-top: -6px; }
  #hedef .ks-programlar { margin-top: -21px; }
}
/* Hedef: ayrıntılar masaüstünde açık (düğme yok); telefonda programların altında açılır-kapanır */
.ks-detay-ac { display: none; }
@media (max-width: 900px) {
  #hedef .kaskat-cumle { display: block !important; order: 1; margin: 0 0 1.4rem; font-size: clamp(1.45rem, 6vw, 1.8rem); }
  #hedef .ks-mobil-secim { order: 0; }
  #hedef .ks-programlar { order: 2; margin-top: 0; }
  #hedef .ks-detay { order: 3; margin-top: 1.6rem; border: 1px solid var(--kenar); border-radius: 16px; background: #fff; overflow: hidden; }
  #hedef .ks-uzman { order: 4; }
  .ks-detay-ac { display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; min-height: 54px; padding: .8rem 1.1rem; border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 700; color: var(--lacivert); text-align: left; cursor: pointer; }
  .ks-detay-ac svg { width: 20px; height: 20px; flex: none; color: var(--yesil); transition: transform .3s var(--egri); }
  .ks-detay.acik .ks-detay-ac svg { transform: rotate(180deg); }
  .ks-detay-ic { display: none; padding: 0 1.1rem 1.2rem; }
  .ks-detay.acik .ks-detay-ic { display: block; animation: gel .4s var(--gecis); }
  /* stagger */
  @keyframes ms-gel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .ks-mobil-secim.bekle .ms-cip, .ks-mobil-secim.bekle .ms-baslik { opacity: 0; }
  .ks-mobil-secim.gorundu .ms-cip { animation: ms-gel .5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.12s + var(--i, 0) * .07s); }
  .ks-mobil-secim.gorundu .ms-baslik { animation: ms-gel .45s cubic-bezier(.22, 1, .36, 1) both; }
  .ks-mobil-secim.gorundu .ms-grup + .ms-grup .ms-baslik { animation-delay: .3s; }
}
@media (max-width: 900px) { #hedef .ks-detay, #hedef .kaskat-cumle, #hedef .ks-mobil-secim { align-self: stretch; width: 100%; } }

/* 3 Kas: Hedef — interaktif cümle seçicinin üstünde; seçicinin soluk satırları üstteki cümleye ve alttaki ipucuna taşabilir, arada büyük boşluk yok */
@media (min-width: 901px) {
  #hedef .ks-metin .kaskat-cumle { position: relative; z-index: 2; margin: .2rem 0 1rem; }
  #hedef .ks-metin .kaskat { margin-top: -62px; position: relative; z-index: 1; }
  #hedef .ks-metin .kaskat-ipucu { position: relative; z-index: 2; margin-top: -40px; margin-bottom: 1.6rem; }
}
/* 3 Kas: bilgi kartında açıklama tek satıra sığınca kart küçülmesin — açıklamaya iki satırlık sabit yer */
.aile-bilgi p { min-height: 2lh; }
/* 3 Kas: hero slayt okları arada bir yanıp söner — bannerın birden fazla slayttan oluştuğu fark edilsin */
@keyframes slayt-ok-isaret {
  0%, 100% { box-shadow: 0 0 0 0 rgba(155,225,93,0); background-color: rgba(10,27,44,.45); }
  4% { box-shadow: 0 0 0 6px rgba(155,225,93,.35); background-color: rgba(155,225,93,.9); color: var(--lacivert-koyu); }
  9% { box-shadow: 0 0 0 14px rgba(155,225,93,0); background-color: rgba(10,27,44,.45); }
  14% { box-shadow: 0 0 0 6px rgba(155,225,93,.3); background-color: rgba(155,225,93,.9); color: var(--lacivert-koyu); }
  20% { box-shadow: 0 0 0 14px rgba(155,225,93,0); background-color: rgba(10,27,44,.45); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .slayt-ok { animation: slayt-ok-isaret 7s ease-in-out 2.5s infinite; }
  .hero .slayt-ok.ileri { animation-delay: 2.8s; }
  .hero .slayt-ok:hover, .hero .slayt-ok:focus-visible, .hero.dokunuldu .slayt-ok { animation: none; }
}

/* 3 Kas: üst çubukta SürüPlan Platform / SürüPlan Uzman açılır menü. Çubukta yalnız etiket durur, programlar altta açılan
   panelde; açılıp kapanırken çubuğun yüksekliği değişmez. Köşeler eski hap biçiminden daha az yuvarlak. */
.nav-grup { position: relative; display: flex; align-items: center; margin: 0 .3rem; }
.nav-dugme { position: relative; display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .85rem 0 1rem; border: 0; border-radius: 12px; cursor: pointer; font: inherit; color: #fff;
  background: linear-gradient(120deg, rgba(155,225,93,.12), rgba(255,255,255,.04) 45%, rgba(107,168,255,.12)); box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: background .25s, box-shadow .25s; }
.nav-dugme::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(155,225,93,.8), rgba(255,255,255,.18) 50%, rgba(107,168,255,.7)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.nav-dugme b { font-size: .64rem; font-weight: 800; letter-spacing: .15em; line-height: 1; white-space: nowrap; }
.nav-dugme .nav-ok { width: 14px; height: 14px; color: var(--yesil-neon); transition: transform .25s var(--gecis); }
.nav-dugme:hover, .nav-grup.acik .nav-dugme { background: linear-gradient(120deg, rgba(155,225,93,.2), rgba(255,255,255,.07) 45%, rgba(107,168,255,.18)); }
.nav-grup.acik .nav-ok { transform: rotate(180deg); }
.nav-grup.icinde .nav-dugme b::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45rem; border-radius: 50%; background: var(--yesil-neon); vertical-align: middle; }
.nav-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: grid; gap: 2px; min-width: 250px; padding: .45rem; border-radius: 14px;
  background: var(--lacivert-koyu); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s var(--gecis), visibility 0s .2s; }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* imleç düğmeden panele geçerken kapanmasın */
.nav-grup.acik .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--gecis), visibility 0s; }
@media (hover: hover) and (pointer: fine) { .nav-grup:hover .nav-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--gecis), visibility 0s; } .nav-grup:hover .nav-ok { transform: rotate(180deg); } }
.ust nav .nav-panel a { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: 9px; color: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap; background: none; box-shadow: none; }
.ust nav .nav-panel a::after { display: none; }
.ust nav .nav-panel a:hover, .ust nav .nav-panel a:focus-visible { background: rgba(255,255,255,.08); }
.ust nav .nav-panel a.aktif { background: rgba(155,225,93,.14); color: var(--yesil-neon); }
.ust nav .nav-panel a svg.pk { width: 20px; height: 20px; flex: none; color: var(--yesil-neon); }
.ust nav .nav-panel a span { display: inline !important; }
.ust.kaydi .nav-dugme { color: var(--lacivert); background: linear-gradient(120deg, rgba(95,165,36,.08), rgba(17,42,67,.02) 45%, rgba(45,108,223,.07)); box-shadow: 0 6px 18px rgba(17,42,67,.08); }
.ust.kaydi .nav-dugme::before { background: linear-gradient(120deg, rgba(95,165,36,.6), var(--kenar) 50%, rgba(45,108,223,.5)); }
.ust.kaydi .nav-dugme .nav-ok, .ust.kaydi .nav-grup.icinde .nav-dugme b::after { color: var(--yesil-koyu); background-color: transparent; }
.ust.kaydi .nav-grup.icinde .nav-dugme b::after { background: var(--yesil-koyu); }
.ust.kaydi .nav-panel { background: #fff; border-color: var(--kenar); box-shadow: 0 18px 40px rgba(17,42,67,.16); }
.ust.kaydi nav .nav-panel a { color: var(--lacivert); }
.ust.kaydi nav .nav-panel a:hover, .ust.kaydi nav .nav-panel a:focus-visible { background: var(--zemin-2); }
.ust.kaydi nav .nav-panel a.aktif { background: rgba(95,165,36,.1); color: var(--yesil-koyu); }
.ust.kaydi nav .nav-panel a svg.pk { color: var(--yesil-koyu); }
.ust .logo { flex-shrink: 0; }
/* 3 Kas: ara genişliklerde (601–1000 px) çubuk sıkışır — logo yatay logotipten amblem logoya geçer; logo hiçbir genişlikte sünmez */
@media (min-width: 601px) and (max-width: 1000px) { .ust .logo .yazi-kutu { display: none !important; } }
/* 3 Kas: site genelinde ekran görüntülerinin üstündeki pencere çubuğu (macOS tuşları + başlık) kalktı */
.cihaz-bar { display: none !important; }
/* 3 Kas: KVKK — aydınlatma (bilgilendirme) ve açık rıza (onay) ayrı kutularda; formda ve aydınlatma sayfasında */
.teklif-form .kvkk-kutular { display: grid; gap: .6rem; margin: .2rem 0 1.1rem; }
.teklif-form .kvkk-kutu { display: flex; align-items: flex-start; gap: .65rem; margin: 0; padding: .75rem .9rem; border: 1px solid var(--kenar); border-radius: 10px; background: var(--zemin-2, #f4f6f8); font-size: .84rem; line-height: 1.5; color: var(--gri); }
.teklif-form .kvkk-kutu b { display: block; margin-bottom: .15rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: none; color: var(--lacivert); }
.teklif-form .kvkk-kutu > span { display: block; }
.teklif-form .kvkk-kutu a { color: var(--yesil-koyu); text-decoration: underline; }
.teklif-form label.kvkk-kutu { cursor: pointer; }
.teklif-form label.kvkk-kutu:has(input:checked) { border-color: var(--yesil); background: color-mix(in srgb, var(--yesil) 7%, #fff); }
.teklif-form.eksik label.kvkk-kutu:has(input:not(:checked)) { border-color: #F5B942; }
.kvkk-metin { margin-top: 1.4rem; padding: 1.6rem 1.8rem; border: 1px solid var(--kenar); border-radius: 14px; background: #fff; scroll-margin-top: 110px; }
.kvkk-metin-etiket { display: block; margin-bottom: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--yesil-koyu); }
.kvkk-metin h3:first-of-type { margin-top: .2rem; }
.kvkk-tarih { font-size: .9rem; margin-top: 1.4rem; }
@media (max-width: 600px) { .kvkk-metin { padding: 1.2rem 1.1rem; } }
.teklif-form .kvkk-kutular .kvkk-kutu.secim.onay { margin: 0; padding: .75rem .9rem; border: 1px solid var(--kenar); border-radius: 10px; background: var(--zemin-2, #f4f6f8); font-size: .84rem; color: var(--gri); }
.teklif-form .kvkk-kutular .kvkk-kutu.secim.onay:has(input:checked) { border-color: var(--yesil); background: color-mix(in srgb, var(--yesil) 7%, #fff); }
.teklif-form.eksik .kvkk-kutular .kvkk-kutu.secim.onay:has(input:not(:checked)) { border-color: #F5B942; color: var(--gri); }
.teklif-form .kvkk-kutular .kvkk-kutu.secim.onay input:checked + span { color: var(--gri); }
.teklif-form div.kvkk-kutu { display: block; }
.teklif-form .kvkk-kutular .kvkk-kutu > span, .teklif-form .kvkk-kutular .kvkk-kutu.secim.onay span { color: var(--gri); font-weight: 400; }
.teklif-form .kvkk-kutular .kvkk-kutu b { color: var(--lacivert); font-weight: 800; }
/* 3 Kas: titreme — açılan bölümlerin ve program panolarının CSS «gel» animasyonu kalktı; gösterme JS'te tek animasyonla (spGoster) */
.dongu-acilir:not(.kapali) > .ic > *, .acilir-bolum:not(.kapali) > .ic > *, .ks-pano, .kaskat-sonuc, .ks-detay.acik .ks-detay-ic, .birlikte-ac .dongu { animation: none !important; }
/* 3 Kas: ürün sayfası bölüm ayrıntıları — «Daha çok detay / Daha az detay» */
.us-detay-ac { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; padding: .6rem 1rem .6rem 1.1rem; border: 1px solid var(--kenar); border-radius: 10px; background: #fff; color: var(--lacivert); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s; }
.us-detay-ac:hover { border-color: var(--yesil); }
.us-detay-ac .detay-ok { width: 16px; height: 16px; color: var(--yesil-koyu); transition: transform .25s var(--gecis); }
.us-detay-ac .kapa-yazi { display: none; }
.us-detay-ac[aria-expanded="true"] .ac-yazi { display: none; }
.us-detay-ac[aria-expanded="true"] .kapa-yazi { display: inline; }
.us-detay-ac[aria-expanded="true"] .detay-ok { transform: rotate(180deg); }
.koyu .us-detay-ac { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: #fff; }
.koyu .us-detay-ac .detay-ok { color: var(--yesil-neon); }
.koyu .us-detay-ac:hover { border-color: var(--yesil-neon); }
.us-detay { margin-top: 1.8rem; }
.us-bolum:not(.detay-acik) { padding-bottom: clamp(2.6rem, 5vw, 4rem); }
/* 3 Kas: menüdeki gruplarla aynı biçimdeki hap kutular (Size uygun programlar sekmeleri) daha az yuvarlak; düğmeler olduğu gibi */
.ks-sekme { border-radius: 11px; }
/* 3 Kas: üst şerit kalktı; alt bilgi bağlantıları üç sütunda */
.ust-serit { display: none !important; }
footer nav.alt-sutunlar { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 1.2rem 3.5rem; margin-left: auto; align-items: start; }
footer .alt-sutun { display: grid; gap: .55rem; align-content: start; }
footer .alt-sutun b { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: none; color: var(--yesil-neon); margin-bottom: .2rem; }
@media (max-width: 900px) { footer nav.alt-sutunlar { margin-left: 0; flex-basis: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1.4rem; } }
@media (max-width: 520px) { footer nav.alt-sutunlar { grid-template-columns: 1fr 1fr; } }
footer .ic { align-items: flex-start; }