:root {
  --qai: var(--g-sari); --qai-soft: #FFE066; --qai-glow: rgba(255, 204, 0, .32);
  --quaxis: var(--g-sari); --quaxis-soft: #FFE066; --quaxis-glow: rgba(255, 204, 0, .32);
  --qbit: var(--g-sari); --qbit-soft: #FFE066; --qbit-glow: rgba(255, 204, 0, .32);
}
.theme-qai, .theme-quaxis, .theme-qbit { --accent: var(--g-sari); --accent-soft: #FFE066; --accent-glow: rgba(255, 204, 0, .32); }
.btn.vurgu, .theme-qai .btn.vurgu { color: var(--g-komur); }
[id] { scroll-margin-top: calc(var(--g-ust-h) + 12px); }

.p-breadcrumb .ara { color: var(--fg-3); }

.g-ana { background: #FFF; color: var(--g-yazi); }
.g-ana h1, .g-ana h2, .g-ana h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.g-ana p { margin: 0; }
.g-ana a { text-decoration: none; }
.g-koyu { background: var(--g-komur); color: #FFF; }
.g-ust-etiket { font: 400 12px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-sari); margin-bottom: 18px; }
.g-acik .g-ust-etiket, .g-gri .g-ust-etiket { color: var(--g-yazi-3); }
.g-acik .g-ust-etiket::before, .g-gri .g-ust-etiket::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--g-sari);
  vertical-align: middle; margin-right: 10px; }
.g-bolum { padding: clamp(64px, 9vw, 104px) 0; }
.g-acik { background: #FFF; color: var(--g-yazi); }
.g-gri { background: var(--g-gri); color: var(--g-yazi); }
.g-bolum h2 { font-size: clamp(30px, 4vw, 48px); max-width: 20em; }
.g-bolum-giris { margin-top: 16px !important; font-size: 18px; color: var(--g-yazi-2); max-width: 42em; }
.g-koyu .g-bolum-giris { color: #C9C9C9; }

.g-kahraman { position: relative; overflow: hidden; }
.g-kahraman::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 78% 55%, rgba(255, 204, 0, .10), transparent 70%); }
.g-kahraman-ic { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center;
  padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); }
.g-kahraman h1 { font-size: clamp(46px, 7vw, 92px); letter-spacing: -0.035em; }
.g-giris-cumle { margin-top: 22px !important; font-size: clamp(17px, 1.6vw, 21px); color: #CFCFCF; max-width: 34em; }
.g-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

.g-serit { background: var(--g-gri); border-bottom: 1px solid var(--g-cizgi); padding: 36px 0 32px; color: var(--g-yazi); }
.g-sayilar { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.g-sayilar b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -0.02em; }
.g-sayilar span { font-size: 14px; color: var(--g-yazi-2); }

.g-qx-ust { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.g-qx-logo { display: block; height: 52px; width: auto; margin-bottom: 26px; }
.g-qx h2 { font-size: clamp(34px, 4.6vw, 58px); }
.g-qx-alt { margin-top: 14px !important; font-size: 19px; color: var(--g-sari); }
.g-qx-sistemler { margin-top: 10px !important; font: 400 13px var(--font-mono); letter-spacing: .06em; color: #BDBDBD; }
.g-qx-sag { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.g-qx .g-dugmeler { margin-top: 0; }
.g-mini { position: relative; background: #F6F5F2; color: #2B2A29; border-radius: 12px; overflow: hidden; border: 1px solid #2E2E2E;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
.g-mini canvas { display: block; width: 100%; height: clamp(190px, 21vw, 270px); }
.g-mini-genis canvas { height: clamp(240px, 38vw, 480px); }
.g-mini-yedek { display: none; position: absolute; left: 50%; top: 40%; width: min(70%, 360px); height: auto; transform: translate(-50%, -50%); }
.yedek-cizim .g-mini-yedek { display: block; }
.g-mini-serit { padding: 12px 16px 14px; border-top: 1px solid #E2E0DA; }
.g-mini .kapak-noktalar { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; height: 10px; }
.g-mini .kapak-noktalar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #CFCAC0; }
.g-mini .kapak-noktalar li { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #F6F5F2; border: 1.5px solid #9A958D;
  transition: background .3s, transform .3s; }
.g-mini .kapak-noktalar li.is-gecti { background: #2B2A29; border-color: #2B2A29; }
.g-mini .kapak-noktalar li.is-on { background: var(--g-sari); border-color: #2B2A29; transform: scale(1.3); }
.g-mini .kapak-adimlar { list-style: none; position: relative; margin: 10px 0 0; padding: 0; min-height: 42px; font-size: 13.5px; line-height: 1.45; }
.g-mini .kapak-adimlar li { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; color: #4A4744; }
.g-mini .kapak-adimlar li.is-on { opacity: 1; transform: none; }
.g-mini .kapak-adimlar strong { color: #2B2A29; }
.g-yolculuk-baslik { margin-top: 56px !important; font-size: 20px; color: #FFF; }
.g-yolculuk { list-style: none; counter-reset: y; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: #2E2E2E; border: 1px solid #2E2E2E; border-radius: 10px; overflow: hidden; }
.g-yolculuk li { counter-increment: y; background: var(--g-komur-2); padding: 20px 20px 22px; color: #C9C9C9; font-size: 15px; line-height: 1.5; }
.g-yolculuk li::before { content: counter(y); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--g-sari); color: var(--g-komur); font: 600 13px var(--font-mono); margin-bottom: 12px; }
.g-yolculuk strong { display: block; color: #FFF; font-weight: 600; margin-bottom: 4px; }

.g-aileler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.g-aile { border: 1px solid var(--g-cizgi); border-radius: 12px; overflow: hidden; background: #FFF; display: flex; flex-direction: column; color: var(--g-yazi); }
.g-aile-logo { position: relative; background: var(--g-komur); padding: 32px 28px; border-bottom: 3px solid var(--g-sari); }
.g-aile-logo img { display: block; height: 40px; width: auto; }
.g-aile-govde { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.g-aile-tur { font: 400 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-yazi-3); }
.g-aile h3 { font-size: 23px; }
.g-aile p { color: var(--g-yazi-2); }
.g-baglar { margin-top: auto !important; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.g-baglar a, .g-ok-bag { font-weight: 600; color: var(--g-yazi); border-bottom: 2px solid var(--g-sari); }
.g-baglar a:hover { border-color: var(--g-yazi); }

.g-cozumler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.g-cozum { display: grid; grid-template-columns: 44% 1fr; background: #FFF; border-radius: 12px; overflow: hidden; border: 1px solid var(--g-cizgi);
  color: var(--g-yazi); transition: box-shadow .2s, transform .2s; }
.g-cozum:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.g-cozum img { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 200px; }
.g-cozum > div { padding: 24px 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.g-cozum h3 { font-size: 21px; }
.g-cozum p { color: var(--g-yazi-2); font-size: 15px; }
.g-ok-bag { margin-top: auto; font-size: 14px; align-self: flex-start; }

.g-nedenler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.g-isaret { display: block; width: 36px; height: 3px; background: var(--g-sari); margin-bottom: 18px; }
.g-nedenler h3 { font-size: 20px; margin-bottom: 10px; }
.g-nedenler p { color: var(--g-yazi-2); font-size: 15px; }
.g-standart { margin-top: 44px !important; padding-top: 22px; border-top: 1px solid var(--g-cizgi); font-size: 15px; color: var(--g-yazi-2); }

.g-adimlar { list-style: none; counter-reset: a; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.g-adimlar li { counter-increment: a; padding: 26px 24px 8px 0; border-top: 1px solid #3A3A3A; position: relative; }
.g-adimlar li::before { content: "0" counter(a); position: absolute; top: -14px; left: 0; background: var(--g-sari); color: var(--g-komur);
  font: 600 12px var(--font-mono); padding: 6px 9px; border-radius: 4px; }
.g-adimlar b { display: block; font-size: 21px; font-weight: 500; margin: 8px 0 6px; }
.g-adimlar span { color: #BDBDBD; font-size: 15px; }

.g-cagri { background: var(--g-sari); padding: 72px 0; color: var(--g-komur); }
.g-cagri-ic { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.g-cagri h2 { font-size: clamp(30px, 3.6vw, 44px); }
.g-cagri p { color: #3A3200; font-size: 17px; margin-top: 8px !important; }

@media (max-width: 1080px) {
  .g-aileler { grid-template-columns: 1fr; }
  .g-nedenler, .g-adimlar { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .g-yolculuk { grid-template-columns: repeat(2, 1fr); }
  .g-qx-ust { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .g-kahraman-ic { grid-template-columns: 1fr; gap: 32px; }
  .g-dugmeler .g-dugme { flex: 1 1 100%; }
  .g-sayilar { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .g-kurumlar { gap: 8px 22px; font-size: 15px; }
  .g-cozumler, .g-cozum { grid-template-columns: 1fr; }
  .g-cozum img { min-height: 0; aspect-ratio: 16 / 9; }
  .g-nedenler, .g-adimlar, .g-yolculuk { grid-template-columns: 1fr; }
}

.g-donusum { margin: 0; min-width: 0; }
.dn-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dn-sahne { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid #262626; border-radius: 14px;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, #1D1D1D, #121212 75%); }

.dn-c, .dn-v { fill: none; stroke: #444; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .7s; }
.dn-ince { stroke-width: 1.4; }
.dn-vd { fill: #333; transition: fill .7s; }
.dn-dal { fill: none; stroke: #333; stroke-width: 1.6; stroke-dasharray: 3 6; transition: stroke .7s; }
.dn-nokta { fill: #444; transition: fill .7s; }
.dn-isik { fill: var(--g-sari); opacity: 0; transition: opacity .9s; }
.yanik .dn-c { stroke: #8E8E8E; }
.yanik .dn-v { stroke: var(--g-sari); }
.yanik .dn-vd, .yanik .dn-nokta { fill: var(--g-sari); }
.yanik .dn-dal { stroke: rgba(255, 204, 0, .55); }
.yanik .dn-isik { opacity: .18; }
.dn-tohum .dn-ilk { fill: var(--g-sari); animation: dn-nabiz 1.4s ease-in-out infinite; }
.dn-tohum .dn-hucre[data-h="1"] .dn-isik { opacity: .12; }

.dn-hat { fill: none; stroke: #262626; stroke-width: 3; }
.dn-hat-yanik { fill: none; stroke: var(--g-sari); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3060; stroke-dashoffset: 0; }
.dn-paket { fill: #FFF2AD; opacity: 0; filter: url(#dnParilti); }
.dn-hub { fill: #141414; stroke: #444; stroke-width: 2.5; transition: stroke .7s; }
.dn-hub.yanik { stroke: var(--g-sari); }
.dn-cihaz rect { fill: #161616; stroke: #555; stroke-width: 2; transition: stroke .7s; }
.dn-cihaz path { stroke: #555; stroke-width: 4; stroke-linecap: round; }
.dn-led-c { fill: #444; }
.dn-cihaz.yanik rect { stroke: var(--g-sari); }
.dn-cihaz.yanik .dn-led-c { fill: var(--g-sari); }
.dn-hub, .dn-led-c, .dn-nokta, .dn-cekirdek, .dn-ampul, .dn-fan, .dn-ibre, .dn-duman circle, .dn-tehdit circle, .dn-yeni, .dn-parca, .dn-ledler circle, .dn-dalga {
  transform-box: fill-box; transform-origin: 50% 50%; }
.dn-hub.etkin { animation: dn-nabiz 1.6s ease-in-out infinite; }

.etkin .dn-nokta { animation: dn-nabiz 1.4s ease-in-out infinite; }
.etkin .dn-ibre { transform-origin: 0% 100%; animation: dn-ibre 2.4s ease-in-out infinite alternate; }
.etkin .dn-alev { animation: dn-titre .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.etkin .dn-duman circle { animation: dn-duman 3s ease-out infinite; }
.etkin .dn-duman circle:nth-child(2) { animation-delay: 1s; }
.etkin .dn-duman circle:nth-child(3) { animation-delay: 2s; }
.etkin .dn-dalga { animation: dn-dalga 1.6s ease-in-out infinite; }
.etkin .dn-dalga.d2 { animation-delay: .4s; } .etkin .dn-dalga.d3 { animation-delay: .8s; } .etkin .dn-dalga.d4 { animation-delay: 1.2s; }
.yanik .dn-dalga { stroke: var(--g-sari); }
.etkin .dn-dal, .dn-son .dn-dal { animation: dn-akis 1s linear infinite; }
.dn-parca { opacity: 0; }
.yanik .dn-parca { opacity: 1; }
.etkin .dn-parca { animation: dn-bant 3.2s linear infinite; }
.dn-halka { fill: none; stroke: var(--g-sari); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-in-out .3s; }
.yanik .dn-halka { stroke-dashoffset: 0; }
.dn-tehdit circle { fill: #777; opacity: 0; }
.etkin .dn-tehdit .t1 { --dx: 52px; --dy: 4px; animation: dn-tehdit 2.2s ease-in infinite; }
.etkin .dn-tehdit .t2 { --dx: -52px; --dy: 0px; animation: dn-tehdit 2.2s ease-in .55s infinite; }
.etkin .dn-tehdit .t3 { --dx: 48px; --dy: -4px; animation: dn-tehdit 2.2s ease-in 1.1s infinite; }
.etkin .dn-tehdit .t4 { --dx: -50px; --dy: 6px; animation: dn-tehdit 2.2s ease-in 1.65s infinite; }
.dn-soru, .dn-cevap { opacity: 0; transition: opacity .6s; }
.yanik .dn-soru { opacity: 1; transition-delay: .5s; }
.yanik .dn-cevap { opacity: 1; transition-delay: 1.8s; }
.etkin .dn-cekirdek { animation: dn-nabiz 1.2s ease-in-out infinite; }
.dn-ledler circle { fill: #3A3A3A; }
.yanik .dn-ledler circle { fill: var(--g-sari); }
.etkin .dn-ledler circle { animation: dn-led 1.8s steps(2, end) infinite; }
.etkin .dn-ledler .l2 { animation-delay: .45s; } .etkin .dn-ledler .l3 { animation-delay: .9s; } .etkin .dn-ledler .l4 { animation-delay: 1.35s; }
.etkin .dn-fan { animation: dn-don 1.6s linear infinite; }
.dn-yuva { fill: none; stroke: #555; stroke-width: 1.6; stroke-dasharray: 4 4; }
.dn-yeni { opacity: 0; transform: translate(110px, -70px); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .6s, opacity .5s .6s; }
.yanik .dn-yeni { opacity: 1; transform: none; }

.dn-cevre { fill: none; stroke: rgba(255, 204, 0, .45); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2s ease-in-out .6s; }
.dn-son .dn-cevre { stroke-dashoffset: 0; }
.dn-adlar text { font: 500 40px var(--font-body, sans-serif); fill: #D9D9D9; text-anchor: middle; opacity: 0; transition: opacity .8s .9s; }
.dn-son .dn-adlar text { opacity: 1; }

@keyframes dn-nabiz { 50% { transform: scale(1.35); } }
@keyframes dn-ibre { from { transform: rotate(-35deg); } to { transform: rotate(40deg); } }
@keyframes dn-titre { to { transform: scale(.9, 1.12); } }
@keyframes dn-duman { from { opacity: 0; transform: translate(0, 10px); } 30% { opacity: 1; } to { opacity: 0; transform: translate(14px, -18px) scale(1.3); } }
@keyframes dn-dalga { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes dn-akis { to { stroke-dashoffset: -18; } }
@keyframes dn-bant { from { transform: translateX(0); } to { transform: translateX(330px); } }
@keyframes dn-tehdit { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 75% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
@keyframes dn-led { 50% { fill: #5A4A00; } }
@keyframes dn-don { to { transform: rotate(360deg); } }

.dn-yazi { min-height: 136px; padding: 14px 2px 0; }
.dn-etiket { font: 400 12px var(--font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--g-sari); margin: 0 0 8px; }
.dn-baslik { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.25; color: #FFF; margin: 0; letter-spacing: -0.01em; }
.dn-ek { margin: 6px 0 0; color: #BDBDBD; font-size: 14.5px; }
.dn-bag { display: inline-block; margin-top: 10px; color: var(--g-sari); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.dn-bag:hover { text-decoration: underline; }
.dn-duraklar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; position: relative; }
.dn-duraklar::before { content: ""; position: absolute; left: 6%; right: 6%; top: 15px; height: 1px; background: #333; }
.dn-duraklar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; min-height: 44px;
  padding: 10px 0 4px; background: none; border: 0; color: #8C8C8C; font: 500 11.5px var(--font-body, sans-serif); cursor: pointer; }
.dn-duraklar i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #141414; border: 2px solid #555; transition: background .4s, border-color .4s; }
.dn-duraklar .gecti i { border-color: var(--g-sari); background: #5A4A00; }
.dn-duraklar [aria-current] { color: #FFF; }
.dn-duraklar [aria-current] i { background: var(--g-sari); border-color: var(--g-sari); box-shadow: 0 0 0 4px rgba(255, 204, 0, .18); }
.dn-duraklar button:hover { color: #FFF; }
.dn-duraklar button:focus-visible { outline: 2px solid var(--g-sari); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 640px) {
  .dn-duraklar button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dn-yazi { min-height: 160px; }
}