/* LOGOS tanıtım sitesi: ortak stil (index.html, nasil.html).
   Düzen: lacivert sahnede başlık ve LOGOS videosu (videonun zemini sahneye karışır); altında açık zeminde geniş boşluklu,
   az sözlü bölümler; ekran görüntüleri büyük ve gölgeli. Renkler uygulamanın ve logonun renkleri: lacivert sahne, logodaki
   dört taş rengi (turuncu, yeşil, sarı, mavi) yalnız işaret olarak. Cesaret sahnede; gerisi sakin. */
:root {
  --sahne: #0B2559;        /* videonun kenar rengi */
  --sahne-ic: #123E8C;     /* videonun ortası */
  --sahne-yazi: #F2F6FF;
  --sahne-soluk: #A9BCE6;
  --zemin: #F3F6FB;
  --yuzey: #FFFFFF;
  --murekkep: #12203F;
  --soluk: #52607C;
  --cizgi: #D8E0ED;
  --turuncu: #EE6A26;
  --yesil: #1B9A6B;
  --sari: #EFAD1D;
  --mavi: #2C6FE2;
  --onceki: #B9C3D6;
  --golge: rgba(11, 37, 89, .38);
  --ipucu: #FFF4D2;        /* ipucu kutusu: sarı taşın açığı */
  --odak: #EFAD1D;
  --baslik: "Baloo 2", "Nunito", "Segoe UI", system-ui, sans-serif;
  --govde: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #0A1736; --yuzey: #0F2149; --murekkep: #E7EDF9; --soluk: #9DAFD1; --cizgi: #22365F;
    --onceki: #3A4C74; --mavi: #4C8BF2; --golge: rgba(0, 0, 0, .55); --ipucu: #2A2716; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zemin: #0A1736; --yuzey: #0F2149; --murekkep: #E7EDF9; --soluk: #9DAFD1; --cizgi: #22365F;
  --onceki: #3A4C74; --mavi: #4C8BF2; --golge: rgba(0, 0, 0, .55); --ipucu: #2A2716; color-scheme: dark;
}

@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap; src: url(fontlar/baloo-2-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap; src: url(fontlar/baloo-2-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(fontlar/baloo-2-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(fontlar/baloo-2-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-display: swap; src: url(fontlar/nunito-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-weight: 400; font-display: swap; src: url(fontlar/nunito-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-display: swap; src: url(fontlar/nunito-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-weight: 700; font-display: swap; src: url(fontlar/nunito-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--zemin); color: var(--murekkep); font: 400 1.125rem/1.62 var(--govde) }
img, video { max-width: 100%; height: auto; display: block }
a { color: var(--mavi) }
:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; border-radius: 6px }
h1, h2, h3 { font-family: var(--baslik); text-wrap: balance; margin: 0; letter-spacing: -.01em }
p, figure { margin: 0 }
b, strong { font-weight: 700 }
.sar { width: min(1160px, 100%); margin-inline: auto; padding-inline: 20px }
.dar { width: min(720px, 100%); margin-inline: auto; padding-inline: 20px }

/* logodaki gibi harf taşları */
.taslar { display: inline-flex; gap: .16em; font-family: var(--baslik); font-weight: 800; line-height: 1 }
.taslar span { display: grid; place-items: center; width: 1.32em; height: 1.32em; border-radius: .3em; color: #fff; padding-top: .08em;
  box-shadow: inset 0 -.12em 0 rgba(0, 0, 0, .18), inset 0 .1em 0 rgba(255, 255, 255, .22) }
.taslar span:nth-child(1) { background: var(--turuncu) } .taslar span:nth-child(2) { background: var(--yesil) }
.taslar span:nth-child(3) { background: var(--sari) } .taslar span:nth-child(4) { background: var(--mavi) }
.taslar span:nth-child(5) { background: var(--yesil) }

/* üst çubuk (iki sayfada aynı) */
.sahne { background: radial-gradient(60% 70% at 72% 52%, var(--sahne-ic), var(--sahne) 70%); color: var(--sahne-yazi);
  padding-block: max(14px, env(safe-area-inset-top, 0px)) 72px }
.sahne.ince { padding-bottom: 44px }
.ust { display: flex; align-items: center; gap: 22px; padding-block: 10px 0 }
.ust .marka { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 1.05rem }
.ust .marka img { width: 40px; height: 40px; border-radius: 10px }
.ust nav { margin-left: auto; display: flex; align-items: center; gap: 26px; font-weight: 700; font-size: 1rem }
.ust nav a { color: var(--sahne-soluk); text-decoration: none } .ust nav a:hover, .ust nav a[aria-current] { color: var(--sahne-yazi) }
.ust nav a.indir { color: var(--sahne); background: var(--sahne-yazi); padding: 7px 16px; border-radius: 10px }

/* sahne: başlık + video */
.sahne-ic { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 40px; align-items: center; padding-top: 56px }
.sahne h1 { font-size: clamp(2.5rem, 2rem + 3.2vw, 4.4rem); font-weight: 800; line-height: 1.02 }
.sahne .giris { margin-top: 22px; font-size: 1.2rem; color: var(--sahne-soluk); max-width: 34em }
.dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px }
.dugme { display: grid; gap: 2px; padding: 13px 20px 12px; border-radius: 14px; text-decoration: none; min-width: 200px;
  font-family: var(--baslik); font-weight: 800; font-size: 1.22rem; line-height: 1.15; transition: transform .15s }
.dugme small { font-family: var(--govde); font-weight: 400; font-size: .84rem; opacity: .8 }
.dugme.birinci { background: var(--sahne-yazi); color: var(--sahne) }
.dugme.ikinci { color: var(--sahne-yazi); box-shadow: inset 0 0 0 2px rgba(242, 246, 255, .45) }
.dugme:hover { transform: translateY(-1px) } .dugme.ikinci:hover { box-shadow: inset 0 0 0 2px var(--sahne-yazi) }
.sahne .not { margin-top: 18px; font-size: .98rem; color: var(--sahne-soluk) }
.film { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 22px; overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 120% at 50% 50%, #000 62%, transparent 100%) }
.film video { width: 100%; height: 100%; object-fit: cover }

/* bölümler */
section { padding-block: 104px 0 }
section h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); font-weight: 800; line-height: 1.1 }
.yazi > p { margin-top: 16px; color: var(--soluk) }
.ekran { border-radius: 16px; overflow: hidden; background: var(--yuzey); box-shadow: 0 0 0 1px var(--cizgi), 0 28px 60px -28px var(--golge) }
.ekran img { width: 100% }
.ekran figcaption { padding: 11px 18px; font-size: .9rem; color: var(--soluk); border-top: 1px solid var(--cizgi) }

/* kıyas: büyük sayılar + çubuklar */
.sayilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 44px }
.sayi b { display: block; font: 800 clamp(2.6rem, 2rem + 2.4vw, 3.6rem)/1 var(--baslik); color: var(--murekkep); font-variant-numeric: tabular-nums }
.sayi b .ok { color: var(--yesil) }
.sayi > span { display: block; margin-top: 8px; color: var(--soluk); font-size: 1rem; line-height: 1.45 }
.kiyas { margin-top: 44px; display: grid; gap: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 28px clamp(16px, 3vw, 34px) }
.kiyas .bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; align-items: baseline }
.kiyas .bas b { font-family: var(--baslik); font-weight: 800; font-size: 1.35rem }
.anahtar { display: flex; gap: 18px; font-size: .95rem; color: var(--soluk) }
.anahtar i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px }
.satir { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 6px 18px; align-items: center }
.satir .ad { font-size: .98rem; color: var(--soluk); line-height: 1.25 }
.cubuklar { display: grid; gap: 4px; padding-right: 6.5em }
.cubuk { height: 16px; border-radius: 5px; width: calc(var(--d) / 309 * 100%); min-width: 4px; display: flex; align-items: center }
.cubuk.eski { background: var(--onceki) } .cubuk.yeni { background: var(--mavi) }
.cubuk span { margin-left: calc(100% + 8px); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--murekkep) }
.cubuk.yeni span b { color: var(--yesil) }
.kiyas .alt { font-size: .92rem; color: var(--soluk); border-top: 1px solid var(--cizgi); padding-top: 14px }

/* görselli özellik satırları */
.ozellik { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 52px; align-items: center; margin-top: 88px }
.ozellik:first-of-type { margin-top: 48px }
.ozellik.ters { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr) }
.ozellik.ters .yazi { order: 2 }
.ozellik h3 { font-size: 1.75rem; font-weight: 800; line-height: 1.15 }
.ozellik .yazi > p { margin-top: 14px; color: var(--soluk) }
.ozellik .yazi > p b { color: var(--murekkep) }
.isaret { display: inline-block; width: 18px; height: 18px; border-radius: 5px; background: var(--renk); margin-bottom: 14px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16) }
.belge-gorsel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: center }

/* neden LOGOS: kısa maddeler */
.neden { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 48px }
.neden li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 14px }
.neden li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--renk, var(--mavi)); margin-top: .42em }
.neden b { display: block; font-family: var(--baslik); font-weight: 800; font-size: 1.22rem; line-height: 1.3 }
.neden span { color: var(--soluk) }
.neden li:nth-child(4n+1) { --renk: var(--turuncu) } .neden li:nth-child(4n+2) { --renk: var(--yesil) }
.neden li:nth-child(4n+3) { --renk: var(--sari) } .neden li:nth-child(4n) { --renk: var(--mavi) }

/* adımlar (gerçek sıra) */
.adim-no { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; flex: none;
  font: 800 1.45rem/1 var(--baslik); padding-top: 4px; background: var(--renk, var(--mavi)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18) }
.kisa-adimlar { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px }
.kisa-adimlar li h3 { margin-top: 14px; font-size: 1.25rem; font-weight: 800 }
.kisa-adimlar li p { margin-top: 6px; color: var(--soluk); font-size: 1rem }
.git { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; font: 800 1.15rem var(--baslik); color: var(--sahne-yazi);
  background: var(--sahne); padding: 12px 22px; border-radius: 14px; text-decoration: none }
.git:hover { background: var(--sahne-ic) }

/* lisans ve geliştirici */
.lisans-ic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px }
.lisans-ic b { display: block; font: 800 1.3rem/1.25 var(--baslik) }
.lisans-ic p { margin-top: 6px; color: var(--soluk) }
.iletisim { margin-top: 36px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 24px clamp(16px, 3vw, 30px);
  display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between }
.iletisim .kim { display: grid; gap: 2px }
.iletisim .kim span { color: var(--soluk); font-size: .98rem }
.adres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px }
.adres code { font: 700 1.15rem var(--govde); user-select: all; color: var(--murekkep) }
.kucuk-dugme { font: 700 .95rem var(--govde); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--zemin);
  color: var(--murekkep); cursor: pointer; text-decoration: none }
.kucuk-dugme:hover { border-color: var(--mavi) }

footer { margin-top: 104px; background: var(--sahne); color: var(--sahne-soluk); padding-block: 40px max(40px, env(safe-area-inset-bottom, 0px)) }
footer .sar { display: flex; flex-wrap: wrap; gap: 18px 36px; align-items: center; font-size: .98rem }
footer .sar > :last-child { margin-left: auto }
footer a { color: var(--sahne-yazi) }
footer .taslar { font-size: 1.05rem }

/* kılavuz sayfası */
.kilavuz { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 64px }
.icindekiler { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 24px); list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: ic }
.icindekiler li { counter-increment: ic }
.icindekiler a { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); padding: 7px 10px; border-radius: 9px; color: var(--soluk); text-decoration: none; font-size: 1rem; line-height: 1.35 }
.icindekiler a::before { content: counter(ic); font-family: var(--baslik); font-weight: 800; color: var(--murekkep) }
.icindekiler a:hover { background: var(--yuzey); color: var(--murekkep) }
.adim { display: grid; gap: 18px; padding-bottom: 72px; scroll-margin-top: 24px }
.adim-bas { display: flex; align-items: center; gap: 16px }
.adim h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem) }
.adim ol, .adim ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px }
.adim li::marker { font-family: var(--baslik); font-weight: 800; color: var(--murekkep) }
.adim .ipucu { background: var(--ipucu); border-radius: 12px; padding: 14px 18px; color: var(--murekkep); font-size: 1rem }
.adim .ipucu b { color: var(--murekkep) }
.dugme-adi { font-weight: 700; color: var(--murekkep); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 7px; padding: 0 7px; white-space: nowrap }

@media (max-width: 900px) {
  .sahne-ic, .ozellik, .ozellik.ters, .belge-gorsel, .kilavuz { grid-template-columns: minmax(0, 1fr) }
  .sahne-ic { padding-top: 36px } .ozellik { gap: 26px; margin-top: 64px } .ozellik.ters .yazi { order: 0 }
  .sayilar, .lisans-ic { grid-template-columns: minmax(0, 1fr) } .neden { grid-template-columns: minmax(0, 1fr) }
  .kisa-adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ust nav a:not(.indir) { display: none }
  .icindekiler { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 520px) {
  .satir { grid-template-columns: minmax(0, 1fr) }
  .dugme { min-width: 0; flex: 1 1 100% }
  .kisa-adimlar, .icindekiler { grid-template-columns: minmax(0, 1fr) }
  footer .sar > :last-child { margin-left: 0 }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .dugme { transition: none } .dugme:hover { transform: none } }

/* indirme sayfaları (/indir/windows, /indir/mac): indirme kendiliğinden başlar, sayfa sonraki adımı söyler */
.indir-bas { padding-top: 52px; max-width: 760px }
.indir-bas h1 { font-size: clamp(2.2rem, 1.8rem + 2.4vw, 3.6rem); font-weight: 800; line-height: 1.05 }
.indir-govde { margin-top: 56px }
.indir-govde .adim { max-width: 760px; padding-bottom: 0 }