/* ==========================================================================
   sayayazilim.com — siteye özgü bileşenler
   Ortak temel (değişkenler, tipografi, düğmeler, renk tonları, geçişler):
   Saya.Core/wwwroot/saya-temel.css
   ========================================================================== */

/* 5. Bileşenler ----------------------------------------------------------- */

/* Veri tablosu (program içi görünüm) */
.dtable { font-size: 15px; }
.dtable__scroll { overflow-x: auto; }
.dtable__row { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--grid); min-width: 480px; }
.dtable__row--head { padding-block: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dtable__row--hl { background: var(--tint-2); }
.dtable--compact .dtable__row { min-width: 0; padding: 10px 14px; font-size: 14px; }
.dtable--compact .dtable__row--head { font-size: 11px; background: var(--tint-2); }
.cell-flex { display: flex; gap: 8px; align-items: center; }

.mini-cards { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; }
.mini-card { flex: 1 1 220px; border: 1px solid var(--grid); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.mini-card .halka { margin-top: 2px; }

/* Kod / log / ağaç önizlemeleri */
.code-box {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.9;
  background: var(--bg); border: 1px solid var(--grid); border-radius: 10px;
  padding: 14px 16px; overflow-x: auto; white-space: pre; margin: 0;
}
.code-box--log { font-size: 13px; white-space: nowrap; }
.log-line { display: flex; gap: 14px; }
.log-line__time { color: var(--muted); }
.log-line__who { min-width: 72px; }
.log-line__act { min-width: 72px; font-weight: 500; color: var(--brand); }
.log-line__act--ok { color: var(--ok); }

/* Barkodlu etiket */
.label-card { width: 100%; max-width: 340px; border: 1.5px solid var(--ink); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: #fff; font-family: var(--font-mono); font-size: 12px; }
.label-card__row { display: flex; justify-content: space-between; gap: 12px; }
.label-card__org { font-weight: 500; font-size: 13px; }
.barkod {
  height: 48px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 2px, transparent 2px, transparent 4px, var(--ink) 4px, var(--ink) 5px, transparent 5px, transparent 8px, var(--ink) 8px, var(--ink) 11px, transparent 11px, transparent 13px);
}

/* Git log (sürüm geçmişi) */
.gitlog__body { padding: 24px 24px 6px; margin: 0; list-style: none; }
.commit { display: flex; gap: 18px; }
.commit__rail { flex: 0 0 20px; display: flex; flex-direction: column; align-items: center; }
.commit__dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid #8C7AE0; margin-top: 6px; flex: 0 0 auto; }
.commit__dot--head { width: 14px; height: 14px; border: 0; background: var(--brand); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lavender); margin-top: 5px; }
.commit__line { flex: 1; width: 2px; background: var(--line); margin-top: 8px; }
.commit__main { flex: 1; min-width: 0; padding-bottom: 24px; }
.commit__meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.commit__hash { color: var(--hash); }
.commit__quote { font-family: var(--font-hand); font-size: 26px; line-height: 1.2; color: var(--paper-ink); margin: 4px 0 0; }
.commit__changes { font-family: var(--font-mono); font-size: 13px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.commit__add { color: var(--ok); }
.commit__coauthor { color: var(--brand); }

/* Satır listeleri (ürünler, alanlar) */
.rows { border-top: 1.5px solid var(--indigo); }
.row-link { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.row-link:hover { color: var(--ink); }
.row-link:hover .row-link__title { color: var(--brand); }
.row-link__title { flex: 1 1 240px; font-family: var(--font-serif); font-size: 24px; transition: color .15s; }
.row-link__text { flex: 2 1 420px; color: var(--muted); }
.row-link__go { font-family: var(--font-mono); font-size: 13px; color: var(--brand); }

/* Sekmeler (çözümler) */
.tabs { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.tabs__list { flex: 1 1 300px; display: flex; flex-direction: column; border-top: 1.5px solid var(--indigo); }
.tabs__tab {
  text-align: left; padding: 20px 4px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; cursor: pointer; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.tabs__tab-title { font-family: var(--font-serif); font-size: 23px; letter-spacing: -.01em; }
.tabs__tab-code { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
.tabs__tab[aria-selected="true"], .tabs__tab:hover { color: var(--brand); }
.tabs__tab[aria-selected="true"] .tabs__tab-code { color: var(--brand); }
.tabs__panel {
  flex: 2 1 560px; min-width: 0; background: rgba(255, 255, 255, .7); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 24px;
}
.tabs__panel[hidden] { display: none; }
.tabs__panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; }

/* Pencereye dönüşen kartlar: başlık çubuğu kartın üst kenarına oturur */
.screen, .card.case-feature { overflow: hidden; }
.screen > .appwin__bar { margin: -26px -26px 0; }
.case-feature > .appwin__bar { flex: 1 1 100%; margin: -36px -36px 0; }
.oswin .faq { border-top: 0; }
.oswin .faq details:first-child { padding-top: 0; }
.oswin .faq details:last-child { border-bottom: 0; padding-bottom: 0; }

/* Kayıt geçmişi (çözüm sayfası penceresi) */
.timeline { padding: 8px 22px 22px; margin: 0; list-style: none; }
.timeline__item { display: flex; gap: 14px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 7px; flex: 0 0 auto; background: var(--ok); }
.timeline__dot--done { background: var(--ok); }
.timeline__dot--current { width: 14px; height: 14px; margin-top: 6px; background: var(--brand); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lavender); }
.timeline__dot--next { background: #fff; border: 2px solid var(--lavender-2); }
.timeline__line { flex: 1; width: 2px; background: var(--line); }
.timeline__body { flex: 1; display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; }
.timeline__item:last-child .timeline__body { padding-bottom: 0; }
.timeline__meta { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.timeline__item--current .timeline__name, .timeline__item--current .timeline__meta { color: var(--brand); font-weight: 600; }
.timeline__item--next .timeline__name { color: var(--faint); }

/* Referans şeridi */
.ref-strip { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.ref-strip__logos { flex: 1; display: flex; flex-wrap: wrap; gap: 12px; }
.ref-strip__logo { flex: 1 1 110px; height: 38px; border-radius: var(--radius-sm); border: 1px dashed var(--lavender-2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--faint); }

/* 4 · Projeler masaüstündeki yeni program penceresi */
.desk-icon__file--new { display: flex; align-items: center; justify-content: center; clip-path: none; background: rgba(255, 255, 255, .5); border: 2px dashed var(--brand); color: var(--brand); font-size: 26px; line-height: 1; }
.desk-icon__file--new::before { display: none; }
.desk-icon--new .desk-icon__label { background: var(--brand); color: #fff; }
.appwin__form { gap: 16px; }
.chip-radios { margin: 0; padding: 0; border: 0; }
.chip-radios legend { padding: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.chip-radios__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-radio span { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--indigo); font-family: var(--font-mono); font-size: 13px; }
.chip-radio input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-radio input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 7. Sayfaya özel --------------------------------------------------------- */

/* Saya OS: Denetim Masası (çözüm sekmeleri) */
.oswin .tabs__list { border-top: 0; gap: 4px; }
.oswin .tabs__tab { justify-content: flex-start; gap: 14px; padding: 12px; border: 1px solid transparent; border-radius: 10px; }
.oswin .tabs__tab:hover { background: var(--tint-2); color: var(--ink); }
.oswin .tabs__tab[aria-selected="true"] { background: var(--tint-2); border-color: #CFC7EE; color: var(--ink); }
.oswin .tabs__tab-title { font-size: 21px; }
.oswin .tabs__panel { background: var(--tint-2); border-color: var(--grid); }
.cp-icon {
  --renk: var(--indigo); --zemin: #ECEAF4;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--zemin); color: var(--renk); font-family: var(--font-mono); font-size: 14px; font-weight: 500;
}
.cp-icon[data-cozum="doku-bankasi"] { --renk: #0E7C6B; --zemin: #E2F3EF; }
.cp-icon[data-cozum="fabrika-uretim"] { --renk: var(--brand); --zemin: var(--tint); }
.cp-icon[data-cozum="masaustu-destek-sistemleri"] { --renk: var(--hash); --zemin: #FBEFE3; }


/* Saya OS: Program Ekle / Kaldır (ürünler) */
.oswin .products { gap: 0; }
.oswin .product { border: 0; border-radius: 0; border-top: 1px solid var(--grid); }
.oswin .product:first-child { border-top: 0; }

/* Çözüm sayfası girişi */
.sol-hero { padding-block: 28px 96px; }
.sol-hero__grid { margin-top: 56px; }
.sol-hero__visual { position: relative; }
.sol-hero__visual .note { position: relative; margin: -16px 0 0 -24px; }
.record-head { padding: 20px 22px 8px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; }
.record-head__code { font-family: var(--font-mono); font-size: 18px; font-weight: 500; }
@media (max-width: 720px) { .sol-hero__visual .note { margin: 16px 0 0; } }

.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 20px; }
.screen { background: var(--cam); border: 1px solid var(--cam-kenar); box-shadow: var(--cam-golge); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.screen__title { font-family: var(--font-serif); font-size: 22px; }
.screen__text { color: var(--muted); font-size: 15px; }
.screen .dtable { border: 1px solid var(--grid); border-radius: 10px; overflow: hidden; }
.screen .dtable__row:last-child { border-bottom: 0; }

/* Çözümler listesi */
.sol-row { display: flex; flex-wrap: wrap; gap: 16px 40px; padding: 36px 0; border-bottom: 1px solid var(--line); }
.sol-row__head { flex: 1 1 340px; }
.sol-row__code { font-family: var(--font-mono); font-size: 13px; color: var(--brand); }
.sol-row__title { font-family: var(--font-serif); font-size: clamp(21px, 2vw, 26px); line-height: 1.1; margin-top: 4px; }
.sol-row__body { flex: 2 1 480px; display: flex; flex-direction: column; gap: 16px; }
.oswin__rows { border-top: 0; }
.oswin__rows .sol-row { padding: 26px clamp(18px, 2.6vw, 30px); border-bottom-color: var(--grid); }
.oswin__rows .sol-row:last-child { border-bottom: 0; }
.oswin__rows .sol-row:hover { background: var(--tint-2); }
.oswin__rows .sol-row__head { display: flex; align-items: center; gap: 16px; }
.oswin__rows .sol-row__title { margin-top: 0; }

/* Projeler: Saya Masaüstü */
.projeler-hero { padding-block: 28px 56px; }
.projeler-hero .section-head { margin-bottom: 0; }
.projeler-hero__lead { flex: 0 1 520px; }
.desk-section { padding-top: 48px; }
.monitor { border: 12px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(36, 29, 79, .55); }
.monitor__stand { width: 180px; height: 26px; margin: 0 auto; background: var(--ink); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.desk {
  position: relative; height: 700px; overflow: hidden;
  background-color: #ECE8FA;
  background-image: radial-gradient(#D9D2F3 1px, transparent 1px);
  background-size: 20px 20px;
}
.desk__mark { position: absolute; right: 60px; bottom: 90px; width: 280px; opacity: .08; pointer-events: none; }
.desk__icons {
  list-style: none; margin: 0; padding: 0;
  position: absolute; left: 22px; top: 22px; bottom: 64px;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 118px); grid-auto-columns: 104px; gap: 4px 8px;
}
.desk-icon {
  --sector: var(--indigo);
  display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%;
  padding: 10px 6px; border-radius: 10px; border: 1px solid transparent;
  color: var(--ink); text-align: center;
}
.desk-icon[data-sector="doku-bankasi"] { --sector: #0E7C6B; }
.desk-icon[data-sector="uretim"] { --sector: var(--brand); }
.desk-icon[data-sector="lojistik"] { --sector: var(--hash); }
.desk-icon[data-sector="muhasebe"] { --sector: var(--indigo); }
.desk-icon[data-sector="web-mobil"] { --sector: #B83A73; }
.desk-icon[data-sector="cop"] { --sector: var(--faint); color: var(--muted); }
.desk-icon:hover { background: rgba(255, 255, 255, .55); color: var(--ink); }
.desk-icon.is-active { background: rgba(100, 64, 248, .12); border-color: rgba(100, 64, 248, .45); }
.desk-icon__file {
  position: relative; display: block; flex: 0 0 auto; width: 46px; height: 58px;
  background: #fff; border: 1.5px solid #CFC7EE; border-radius: 4px;
  clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
  transition: transform .15s;
}
.desk-icon__file::before { content: ""; position: absolute; right: 0; top: 0; width: 14px; height: 14px; background: var(--line-2); }
.desk-icon:hover .desk-icon__file { transform: translateY(-2px); }
.desk-icon__ext {
  position: absolute; left: 0; right: 0; bottom: 8px; padding: 2px 0;
  background: var(--sector); color: #fff;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500; line-height: 1.3; letter-spacing: -.05em;
}
.desk-icon__label { max-width: 92px; padding: 1px 4px; border-radius: 4px; font-size: 11.5px; line-height: 1.25; }
.desk-icon.is-active .desk-icon__label { background: var(--brand); color: #fff; }
.desk__note { position: absolute; left: 50%; top: 42%; max-width: 360px; padding: 14px 20px; font-size: 28px; transform: translate(-30%, -50%) rotate(-2deg); }

/* Program penceresi. JS yokken #slug (:target) ile, JS varken .is-open ile açılır. */
.appwin {
  position: absolute; left: 380px; right: 28px; top: 26px; bottom: 74px; z-index: 2;
  display: none; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid #CFC7EE; border-radius: 10px;
  box-shadow: 0 30px 60px -30px rgba(36, 29, 79, .6);
}
.desk:not(.is-js) .appwin:target, .appwin.is-open { display: flex; }
.appwin.is-open { animation: appwin-3d .35s cubic-bezier(.2, .8, .2, 1); }
.appwin--small { left: auto; right: 64px; top: 70px; bottom: auto; width: min(460px, calc(100% - 128px)); }
.appwin.is-max { left: 8px; right: 8px; top: 8px; bottom: 58px; width: auto; }
.appwin__ctrls { display: flex; gap: 4px; flex: 0 0 auto; }
.appwin__ctrl {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; padding: 0;
  border: 0; border-radius: 4px; background: var(--indigo); color: #E8E3FF;
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}
.appwin__ctrl:hover { background: #4A4180; color: #fff; }
.appwin__ctrl--close { background: #C2417A; color: #fff; }
.appwin__ctrl--close:hover { background: #A8325F; color: #fff; }
.desk:not(.is-js) .appwin__ctrl--min, .desk:not(.is-js) .appwin__ctrl--max { display: none; }
.appwin__menu { display: flex; gap: 18px; padding: 6px 16px; border-bottom: 1px solid var(--grid); background: var(--tint-2); font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.appwin__body { flex: 1; display: flex; min-height: 0; }
.appwin__screen { flex: 0 0 42%; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-right: 1px solid var(--grid); background: var(--bg); overflow-y: auto; }
.appwin__screen-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.appwin__rows { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.appwin__rows li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; background: #fff; border: 1px solid var(--grid); border-radius: var(--radius-sm); font-size: 14px; }
.appwin__shot { border: 1px solid var(--grid); border-radius: var(--radius-sm); }
.appwin__tags { margin-top: auto; padding-top: 8px; gap: 6px; }
.appwin__tags .chip { font-size: 12px; padding: 4px 9px; }
.appwin__story { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.appwin__story .h3:focus { outline: none; }
.appwin__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.appwin__summary { color: var(--ink-2); }
.appwin__dl { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: 15px; }
.appwin__dl dt { padding-top: 3px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.appwin__dl dd { margin: 0; color: var(--ink-2); }
.appwin__quote { margin: 0; }
.appwin__quote .hand { font-size: 25px; line-height: 1.2; }
.appwin__quote footer { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.appwin__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 15px; }
.appwin__status { display: flex; justify-content: space-between; gap: 12px; padding: 6px 14px; border-top: 1px solid var(--grid); background: var(--tint-2); font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.appwin__status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-ok { color: var(--ok); }
.trash-list { list-style: none; font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
.trash-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); text-decoration: line-through; }
.trash-note { font-size: 24px; line-height: 1.2; }

.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 50px;
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: rgba(255, 255, 255, .88); border-top: 1px solid var(--line-2);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.taskbar__start { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.taskbar__start img { width: 18px; height: 18px; }
.taskbar__app {
  max-width: 320px; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; border-bottom: 2px solid var(--brand); border-radius: 8px; background: var(--tint); color: var(--indigo);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer;
}
.taskbar__app.is-min { background: transparent; border-bottom-color: var(--lavender); color: var(--muted); }
.taskbar__status { margin-left: auto; white-space: nowrap; }
.taskbar__years { padding-left: 12px; border-left: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }

@media (max-width: 1100px) {
  .appwin { left: 24px; right: 24px; }
  .appwin__screen { flex-basis: 38%; }
}
/* Telefonda masaüstü yerine uygulama ızgarası; pencere tam ekran açılır. */
@media (max-width: 820px) {
  .monitor { border-width: 8px; border-radius: 28px; }
  .monitor__stand, .desk__mark, .appwin__ctrl--max { display: none; }
  .desk { height: auto; padding: 18px 10px 0; }
  .desk__icons { position: static; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); grid-auto-columns: auto; gap: 6px 2px; }
  .desk-icon { padding: 8px 2px; }
  .desk__note { position: static; display: block; margin: 20px auto 28px; max-width: 300px; font-size: 23px; transform: rotate(-2deg); }
  .desk__note[hidden] { display: none; }
  .taskbar { position: static; height: auto; flex-wrap: wrap; margin: 16px -10px 0; padding: 10px 12px; }
  .taskbar__app { order: 5; flex-basis: 100%; max-width: none; }
  .appwin, .appwin--small, .appwin.is-max { position: fixed; inset: 0; z-index: 60; width: auto; border: 0; border-radius: 0; }
  .appwin__bar { padding-block: 10px; }
  .appwin__ctrl { width: 36px; height: 30px; font-size: 13px; }
  .appwin__body { flex-direction: column; overflow-y: auto; }
  .appwin__screen, .appwin__story { flex: 0 0 auto; overflow: visible; }
  .appwin__screen { border-right: 0; border-bottom: 1px solid var(--grid); }
  .appwin--small .appwin__story { flex: 1; overflow-y: auto; }
  body.has-appwin { overflow: hidden; }
}
@media (max-width: 480px) {
  .taskbar__years { display: none; }
}

/* Ürünler */
.products { display: flex; flex-direction: column; gap: 24px; }
.product {
  display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 44px);
}
.product:nth-child(even) { flex-direction: row-reverse; }
.product__main { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.product__side { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.product__badge { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.product__badge span { color: var(--brand); }
.product__name { font-family: var(--font-serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.02em; }
.product__lead { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.5vw, 20px); color: var(--brand); line-height: 1.3; }
.product__desc { color: var(--ink-2); }
.product__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 4px 0 4px; border-top: 1px solid var(--line); }
.product__facts > div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.product__facts dt { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.product__facts dd { margin: 2px 0 0; font-weight: 600; }
.product__visual { margin: 0; display: flex; justify-content: center; align-items: center; border-radius: var(--radius); background: var(--tint-2); padding: 28px; min-height: 220px; }
.product__visual--phone img { width: 170px; border: 7px solid var(--ink); border-radius: 26px; box-shadow: 0 24px 40px -22px rgba(36, 29, 79, .5); transform: rotate(-3deg); }
.product__visual--device img { width: 100%; max-width: 520px; filter: drop-shadow(0 20px 24px rgba(36, 29, 79, .18)); }
.product__features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px 24px; font-size: 15px; color: var(--muted); }
.product__features li { display: flex; gap: 10px; align-items: baseline; }
.product__features b { display: block; color: var(--ink); font-weight: 600; }
.product__num { font-family: var(--font-mono); font-size: 12px; color: var(--brand); flex: 0 0 auto; }

/* Atölye */
.readme__body { padding: 24px 26px; font-family: var(--font-mono); font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.readme__h { color: var(--ink); font-weight: 500; }
.readme__h + * { margin-top: 2px; }
.readme__body > * + .readme__h { margin-top: 18px; }
.readme__mark { color: var(--brand); }
.team-list { border-top: 1px solid var(--line); }
.member { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.member img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.member--lead img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); }
.member__name { font-weight: 600; }
.member__role { font-size: 14px; color: var(--muted); }
.member__badge { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

/* Saya OS: lisans sözleşmesi (çalışma ilkeleri) */
.lisans__head { font-size: 15px; color: var(--muted); }
.lisans__text {
  list-style: none; margin: 14px 0 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--tint-2);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7; color: var(--ink-2);
}
.lisans__no { color: var(--brand); font-weight: 500; }
.lisans__sign { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; font-size: 15px; }
.lisans__sign .caption { display: block; }
.lisans__check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 4px; background: var(--brand); color: #FFFFFF; font-size: 13px; }

/* Saya OS: kullanıcı hesapları (ekip) ve hakkında penceresi */
.oswin .oswin__team { border-top: 0; padding-inline: clamp(16px, 2.4vw, 26px); }
.oswin__team .member:last-child { border-bottom: 0; }
.oswin__team .member__badge { padding: 3px 10px; border-radius: 999px; background: var(--tint-2); color: var(--muted); }
.oswin__team .member--lead .member__badge { background: var(--tint); color: var(--brand); }
.form--inwin { border: 0; border-radius: 0; box-shadow: none; }

/* İletişim */
.contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.contact-item__label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-transform: uppercase; }
.contact-item__value { font-weight: 600; font-size: 18px; }

/* Liste sıfırlamaları */
.rows, .team-list, .readme__body ul { list-style: none; padding: 0; margin: 0; }
li.row-link { cursor: default; }
.contact-list dd { margin: 0; }

/* Katlanabilir ve tabletler gibi geniş ama dokunmatik ekranlarda pencere düğmeleri parmakla rahat basılsın. */
@media (pointer: coarse) { .appwin__ctrl { width: 36px; height: 30px; } }

/* Sütun sayısı sınıfla verilir (CSP satır içi stile izin vermez). */
.dtable.cols-1 { --cols: 1; }
.dtable.cols-2 { --cols: 2; }
.dtable.cols-3 { --cols: 3; }
.dtable.cols-4 { --cols: 4; }
.dtable.cols-5 { --cols: 5; }
.dtable.cols-6 { --cols: 6; }
.dtable.cols-7 { --cols: 7; }
.dtable.cols-8 { --cols: 8; }
.cta-dialog__icon .ucgen { fill: var(--tint); stroke: var(--brand); }
.cta-dialog__icon .cizgi { stroke: var(--brand); }
.cta-dialog__icon .nokta { fill: var(--brand); }

/* ==========================================================================
   8. Sahneler (2026-10-21): referans videolardaki mekaniklerin Saya'ya uyarlaması.
   Kurallar: içerik HTML'de son haliyle durur, hareket yalnızca süstür. Kaydırmaya bağlı
   hareket CSS animation-timeline ile (JS yok); desteklemeyen tarayıcıda ve hareket azaltma
   tercihinde düz sayfa görünür. Yalnızca transform ve opacity canlandırılır. Sürekli dönen
   süslemeler yalnızca sahne ekrandayken (.oynuyor, site.js) çalışır. Zayıf cihazda .hafif.
   ========================================================================== */
@property --s { syntax: "<number>"; inherits: true; initial-value: 1; }

/* 3D logo (_Logo3d): parça boyu --b, her parça 10 katman; sallanma genliği --s (0 = durgun) */
.logo3d { --b: clamp(56px, 8vw, 104px); position: relative; width: calc(var(--b) * 3.2); height: calc(var(--b) * 3.2); perspective: calc(var(--b) * 22); pointer-events: none; }
.logo3d__salin, .logo3d__nesne { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.logo3d__salin { animation: logo-salin 9s ease-in-out infinite paused; }
.oynuyor .logo3d__salin { animation-play-state: running; }
@keyframes logo-salin {
  0%, 100% { transform: rotateY(calc(var(--s) * -14deg)) rotateX(calc(var(--s) * 4deg)); }
  50% { transform: rotateY(calc(var(--s) * 14deg)) rotateX(calc(var(--s) * -4deg)); }
}
.logo3d__nesne { transform: rotateX(22deg) rotateZ(-12deg) scale(1.2); }
.logo3d__parca { position: absolute; left: calc(var(--b) * -.5); top: calc(var(--b) * -.5); width: var(--b); height: var(--b); transform-style: preserve-3d; }
.logo3d__parca--0 { transform: translate3d(calc(var(--b) * -.574), calc(var(--b) * -.574), 0); }
.logo3d__parca--1 { transform: translate3d(calc(var(--b) * .574), calc(var(--b) * -.574), 0); }
.logo3d__parca--2 { transform: translate3d(calc(var(--b) * -.574), calc(var(--b) * .574), 0); }
.logo3d__parca--3 { transform: translate3d(calc(var(--b) * .574), calc(var(--b) * .574), 0); }
.logo3d__parca span { position: absolute; inset: 0; border-radius: calc(var(--b) * .148); background: rgba(20, 20, 22, .04); border: 1px solid rgba(20, 20, 22, .14); }
.logo3d__parca--3 span { border-radius: 0 0 100% 0; background: rgba(59, 76, 240, .05); border-color: rgba(59, 76, 240, .24); }
.logo3d__parca span:first-child { background: rgba(20, 20, 22, .28); border-color: rgba(20, 20, 22, .35); }
.logo3d__parca--3 span:first-child { background: rgba(59, 76, 240, .3); border-color: rgba(59, 76, 240, .5); }
.logo3d__parca span:last-child { background: linear-gradient(140deg, #6B6680 0%, #1E1A2E 40%, #141416 70%, #4A4560 100%); border-color: #141416; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.logo3d__parca--3 span:last-child { background: linear-gradient(140deg, #FFFFFF 0%, #D9D0FF 22%, #7F6BFF 55%, #3B4CF0 80%, #B9AEF0 100%); border-color: #5B63F5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
.logo3d__parca span:nth-child(1) { transform: translateZ(calc(var(--b) * -.2037)); }
.logo3d__parca span:nth-child(2) { transform: translateZ(calc(var(--b) * -.1584)); }
.logo3d__parca span:nth-child(3) { transform: translateZ(calc(var(--b) * -.1132)); }
.logo3d__parca span:nth-child(4) { transform: translateZ(calc(var(--b) * -.0679)); }
.logo3d__parca span:nth-child(5) { transform: translateZ(calc(var(--b) * -.0226)); }
.logo3d__parca span:nth-child(6) { transform: translateZ(calc(var(--b) * .0226)); }
.logo3d__parca span:nth-child(7) { transform: translateZ(calc(var(--b) * .0679)); }
.logo3d__parca span:nth-child(8) { transform: translateZ(calc(var(--b) * .1132)); }
.logo3d__parca span:nth-child(9) { transform: translateZ(calc(var(--b) * .1584)); }
.logo3d__parca span:nth-child(10) { transform: translateZ(calc(var(--b) * .2037)); }
/* Telefonda (dar ekran, düz akış): sallanma CSS değişkeni kullanmayan animasyonla yapılır, böylece ana işlemci
   yerine ekran kartında çalışır; katman sayısı 10'dan 6'ya iner. Hafif modda 3 katman ve sallanma yok. */
@media (max-width: 1023px) {
  .logo3d__salin { animation-name: logo-salin-sabit; }
  .logo3d__parca span:nth-child(2), .logo3d__parca span:nth-child(4), .logo3d__parca span:nth-child(7), .logo3d__parca span:nth-child(9) { display: none; }
}
@keyframes logo-salin-sabit {
  0%, 100% { transform: rotateY(-14deg) rotateX(4deg); }
  50% { transform: rotateY(14deg) rotateX(-4deg); }
}
.hafif .logo3d__parca span:not(:first-child):not(:last-child):not(:nth-child(5)) { display: none; }
.hafif .logo3d__salin { animation: none; }

/* Giriş sahnesi (_LogoSahne). Varsayılan: düz akış (telefon, eski tarayıcı, hareket azaltma). */
.giris { padding-block: 40px 72px; }
.giris__yol { margin-bottom: 28px; }
.giris__tuval {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px 40px; align-items: center;
  grid-template-areas: "metin logo" "metin kunye" "b b" "not not" "adimlar adimlar" "daha daha";
}
.giris__metin { grid-area: metin; display: flex; flex-direction: column; gap: 20px; }
.giris__h1 { font-family: var(--font-serif); font-size: clamp(36px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.025em; }
.giris__lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--muted); max-width: 520px; }
.giris__logo { grid-area: logo; justify-self: center; }
.giris__kunye { grid-area: kunye; justify-self: center; display: flex; gap: 18px; margin: 0; padding: 16px 20px; border: 1px solid var(--cam-kenar); border-radius: 16px; box-shadow: var(--cam-golge); }
.giris__kunye div { display: flex; flex-direction: column-reverse; }
.giris__kunye div + div { padding-left: 18px; border-left: 1px solid var(--line-2); }
.giris__kunye dd { margin: 0; font-family: var(--font-serif); font-size: 32px; line-height: 1; }
.giris__kunye dt { margin-top: 6px; font-size: 13px; color: var(--muted); }
.giris__ipucu, .giris__cizim, .giris__dev { display: none; }
/* Işık zemini: giriş sahnesinin ışığı yapışkan tuvalle birlikte durur; logonun arkasında ayrıca bir parıltı */
main > section.giris { background: none; }
.giris__sabit { overflow-x: clip; } /* logonun parıltısı dar ekranda sayfayı yana taşırmasın */
.giris__logo::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--b) * 7); height: calc(var(--b) * 6); border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 107, 255, .5), rgba(127, 107, 255, 0)); transform: translate(-50%, -45%); pointer-events: none; }
.giris__b { grid-area: b; margin-top: 56px; }
.giris__h2 { margin-top: 14px; max-width: 640px; font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.02em; }
.giris__not { grid-area: not; max-width: 560px; color: var(--muted); }
.giris__adimlar { grid-area: adimlar; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); counter-reset: adim; }
.giris__adim { position: relative; padding: 24px 24px 8px 0; counter-increment: adim; }
.giris__adim::before {
  content: counter(adim); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 12px;
  border: 1.5px solid var(--brand); border-radius: 50%; background: #FFFFFF; font-family: var(--font-mono); font-size: 13px; color: var(--brand);
}
.giris__zaman { display: block; font-family: var(--font-mono); font-size: 13px; color: var(--brand); }
.giris__adim-baslik { margin: 8px 0 10px; font-family: var(--font-serif); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.1; }
.giris__adim p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.giris__daha { grid-area: daha; justify-self: start; }
@media (max-width: 760px) {
  .giris__tuval { grid-template-columns: minmax(0, 1fr); grid-template-areas: "metin" "logo" "kunye" "b" "not" "adimlar" "daha"; }
  .giris__logo { --b: clamp(48px, 16vw, 80px); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .giris__adim { animation: yukari-gir linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
}
@keyframes yukari-gir { from { opacity: 0; transform: translateY(24px); } }

/* Geniş ekran: yapışkan sahne. Bölüm 2,6 ekran boyu uzar; içindeki her öğe kaydırmanın belli bir aralığında
   (animation-range; "contain" = sahnenin ekrana yapışık kaldığı süre) hareket eder. Ölçüler tuvalin genişliğine
   göre (cqw): tuval 1200 × 680 birimlik bir paftadır, 1 cqw = 12 birim. Ölçü çizgileri bu paftaya göre çizilir. */
@media (min-width: 1024px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .giris { height: calc((100svh - var(--ust)) * 2.6); padding: 0; view-timeline: --giris block; }
    .giris__sabit { position: sticky; top: var(--ust); height: calc(100svh - var(--ust)); display: flex; align-items: center; overflow: hidden; }
    .giris__kap { width: 100%; }
    .giris__yol { position: absolute; top: 14px; margin: 0; }
    .giris__tuval { display: block; position: relative; width: min(100%, calc((100svh - var(--ust) - 64px) * 1200 / 680)); aspect-ratio: 1200 / 680; margin: 24px auto 0; container-type: inline-size; }
    .giris__tuval > * { position: absolute; margin: 0; }
    .giris__metin { left: 0; top: 5.8cqw; width: 46.7cqw; gap: 1.7cqw; }
    .giris__h1 { font-size: 4.6cqw; }
    .giris__lead { font-size: max(15px, 1.45cqw); }
    .giris__logo { --b: 9cqw; left: 55cqw; top: 24.17cqw; width: 0; height: 0; perspective: calc(var(--b) * 22.2); }
    .giris__kunye { left: 70cqw; top: 44cqw; }
    .giris__kunye dd { font-size: max(24px, 2.7cqw); }
    .giris__dev { display: block; left: 0; right: 0; top: 13cqw; text-align: center; font-family: "Outfit", system-ui, sans-serif; font-size: 20cqw; font-weight: 600; line-height: 1; letter-spacing: -.04em; text-transform: uppercase; color: transparent; background: linear-gradient(180deg, rgba(100, 64, 248, .18), rgba(100, 64, 248, 0) 85%); -webkit-background-clip: text; background-clip: text; pointer-events: none; }
    .giris__ipucu { display: flex; flex-direction: column; align-items: center; gap: 8px; left: 0; right: 0; bottom: 0; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
    .giris__fare { position: relative; width: 22px; height: 34px; border: 1.5px solid var(--faint); border-radius: 12px; }
    .giris__fare::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--brand); animation: fare 1.6s ease-in-out infinite; }
    .giris__b { left: 0; top: 2.5cqw; width: 36cqw; }
    .giris__h2 { font-size: 3.4cqw; }
    .giris__not { left: 78.3cqw; top: 4.6cqw; width: 21.7cqw; font-size: max(14px, 1.25cqw); line-height: 1.5; }
    .giris__daha { left: 78.3cqw; top: 15cqw; }
    .giris__cizim { display: block; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    .giris__adimlar { left: 0; right: 0; top: 38.33cqw; bottom: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
    .giris__adim { padding: 2.4cqw 2cqw 0 0; }
    .giris__adim + .giris__adim { padding-left: 2cqw; }
    .giris__adim::before { display: none; }
    .giris__adim + .giris__adim::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2); transform-origin: top; }
    .giris__zaman { font-size: max(12px, 1.05cqw); }
    .giris__adim-baslik { font-size: max(18px, 1.95cqw); }
    .giris__adim p { font-size: max(13px, 1.22cqw); }
    .giris__cetvel { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
    .giris__lider-cizgi { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
    .giris__lider-dik { stroke: var(--brand); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .giris__lider-uc, .giris__balon { fill: #FFFFFF; stroke: var(--brand); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
    .giris__balon-no { font-family: var(--font-mono); font-size: 13px; fill: var(--brand); }

    /* Zaman çizelgesi: hepsi aynı kaydırma çizelgesine bağlı, aralıkları farklı */
    .giris__metin, .giris__kunye, .giris__dev, .giris__ipucu, .giris__b, .giris__not, .giris__daha, .giris__logo, .giris__logo .logo3d__nesne,
    .giris__logo .logo3d__parca, .giris__cetvel, .giris__lider, .giris__lider-cizgi, .giris__adim, .giris__adim::after {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --giris;
    }
    .giris__metin, .giris__kunye, .giris__dev { animation-name: g-cik; animation-range: contain 2% contain 20%; }
    .giris__ipucu { animation-name: g-sol; animation-range: contain 0% contain 6%; }
    .giris__logo { animation-name: g-yer, g-durul; animation-range: contain 4% contain 46%, contain 4% contain 40%; animation-timing-function: ease-in-out; }
    .giris__logo .logo3d__nesne { animation-name: g-nesne; animation-range: contain 4% contain 46%; animation-timing-function: ease-in-out; }
    .giris__logo .logo3d__parca { animation-range: contain 4% contain 46%; animation-timing-function: ease-in-out; }
    .giris__logo .logo3d__parca--0 { animation-name: g-p0; }
    .giris__logo .logo3d__parca--1 { animation-name: g-p1; }
    .giris__logo .logo3d__parca--2 { animation-name: g-p2; }
    .giris__logo .logo3d__parca--3 { animation-name: g-p3; }
    .giris__b, .giris__not, .giris__daha { animation-name: g-gir; animation-range: contain 36% contain 50%; }
    .giris__cetvel { animation-name: g-ciz; animation-range: contain 44% contain 58%; }
    .giris__lider { animation-name: g-belir; }
    .giris__lider-cizgi { animation-name: g-ciz; }
    .giris__lider--0, .giris__lider--0 .giris__lider-cizgi { animation-range: contain 48% contain 58%; }
    .giris__lider--1, .giris__lider--1 .giris__lider-cizgi { animation-range: contain 57% contain 67%; }
    .giris__lider--2, .giris__lider--2 .giris__lider-cizgi { animation-range: contain 66% contain 76%; }
    .giris__lider--3, .giris__lider--3 .giris__lider-cizgi { animation-range: contain 75% contain 85%; }
    .giris__adim { animation-name: g-gir; }
    .giris__adim::after { animation-name: g-dik; }
    .giris__adim:nth-child(1), .giris__adim:nth-child(1)::after { animation-range: contain 52% contain 62%; }
    .giris__adim:nth-child(2), .giris__adim:nth-child(2)::after { animation-range: contain 61% contain 71%; }
    .giris__adim:nth-child(3), .giris__adim:nth-child(3)::after { animation-range: contain 70% contain 80%; }
    .giris__adim:nth-child(4), .giris__adim:nth-child(4)::after { animation-range: contain 79% contain 89%; }
  }
}
@keyframes g-cik { to { opacity: 0; transform: translateY(40px); visibility: hidden; } }
@keyframes g-sol { to { opacity: 0; } }
@keyframes g-yer { from { transform: translate(18.33cqw, .83cqw); } to { transform: none; } }
@keyframes g-durul { from { --s: 1; } to { --s: 0; } }
@keyframes g-nesne { from { transform: rotateX(22deg) rotateZ(-12deg) scale(1.2); } to { transform: rotateX(58deg) rotateZ(-38deg) scale(1); } }
@keyframes g-p0 { to { transform: translate3d(calc(var(--b) * -1), calc(var(--b) * -1), calc(var(--b) * .185)); } }
@keyframes g-p1 { to { transform: translate3d(var(--b), calc(var(--b) * -1), calc(var(--b) * 1.111)); } }
@keyframes g-p2 { to { transform: translate3d(calc(var(--b) * -1), var(--b), calc(var(--b) * .648)); } }
@keyframes g-p3 { to { transform: translate3d(var(--b), var(--b), calc(var(--b) * 1.574)); } }
@keyframes g-gir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes g-ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g-belir { from { opacity: 0; } 2% { opacity: 1; } to { opacity: 1; } }
@keyframes g-dik { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fare { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* Çözüm şeması (ana sayfa): kart → çizgi → pencere → etiket. Seçim ve tur site.js'te (data-sema). */
.sema__alan {
  display: grid; gap: 20px; align-items: center;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.25fr) 56px minmax(0, 1fr);
}
.sema__kartlar { display: contents; list-style: none; }
.sema__kart { position: relative; }
.sema__kart--0 { grid-column: 1; grid-row: 1; }
.sema__kart--1 { grid-column: 1; grid-row: 2; }
.sema__kart--2 { grid-column: 5; grid-row: 1; }
.sema__kart--3 { grid-column: 5; grid-row: 2; }
.sema__link {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 16px; color: var(--ink);
  background: var(--cam); border: 1px solid var(--cam-kenar); box-shadow: var(--cam-golge);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .35s, box-shadow .35s;
}
.sema__link:hover { color: var(--ink); transform: translateY(-3px); }
.is-on > .sema__link { border-color: rgba(100, 64, 248, .55); box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 4px rgba(100, 64, 248, .1), 0 28px 50px -24px rgba(100, 64, 248, .45); }
.sema__ust { display: flex; align-items: baseline; gap: 10px; }
.sema__rozet { flex: none; align-self: center; width: 14px; height: 14px; border-radius: 3px; background: #141416; }
.sema__kart--3 .sema__rozet { border-radius: 0 0 100% 0; background: #3B4CF0; }
.sema__kod { font-family: var(--font-mono); font-size: 13px; color: var(--brand); }
.sema__ad { font-family: var(--font-serif); font-size: 21px; line-height: 1.1; }
.sema__led { flex: none; align-self: center; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--line-2); }
.is-on .sema__led { background: var(--brand); }
.oynuyor .is-on .sema__led { animation: led 1.6s ease-in-out infinite; }
@keyframes led { 50% { box-shadow: 0 0 0 5px rgba(100, 64, 248, .18); } }
.sema__istek { font-family: var(--font-hand); font-size: 22px; line-height: 1.1; color: var(--paper-ink); }
.sema__ozet { font-size: 14px; line-height: 1.45; color: var(--muted); }
/* Pafta çizgisi: kesikli; seçili kartta mor çizgi akar ve bir veri noktası pencereye gider (yalnızca transform) */
.sema__tel { position: absolute; top: 50%; left: 100%; width: 76px; height: 8px; margin-top: -4px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--lavender-2) 0 2px, transparent 2px 7px) center / 100% 1.5px no-repeat; }
.sema__kart--2 .sema__tel, .sema__kart--3 .sema__tel { left: auto; right: 100%; transform: scaleX(-1); }
.is-on .sema__tel::before { content: ""; position: absolute; left: -18px; right: 0; top: 3px; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 10px, transparent 10px 18px); animation: akis .8s linear infinite paused; }
.is-on .sema__tel::after { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: paket 1.5s cubic-bezier(.5, 0, .5, 1) infinite paused; }
.oynuyor .is-on .sema__tel::before, .oynuyor .is-on .sema__tel::after { animation-play-state: running; }
@keyframes akis { from { transform: translateX(0); } to { transform: translateX(18px); } }
@keyframes paket { from { transform: translateX(0); } to { transform: translateX(68px); } }

.sema__pencere { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; min-width: 0; }
.sema__pencere .appwin__bar { position: relative; }
.sema__sure { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-soft); transform: scaleX(0); transform-origin: left; }
.sema.is-tur .sema__sure { animation: sure 5.6s linear both; }
@keyframes sure { to { transform: scaleX(1); } }
.sema__ekran { display: flex; flex-direction: column; flex: 1; min-height: 372px; }
.sema__ekran[hidden], .etiket[hidden] { display: none; }
.sema__ekran .oswin__status { margin-top: auto; }
.sema.is-js .sema__ekran:not([hidden]) :is(.record-head, .timeline__item) { animation: yana-gir .4s ease both; }
.sema.is-js .sema__ekran:not([hidden]) .timeline__item:nth-child(1) { animation-delay: .25s; }
.sema.is-js .sema__ekran:not([hidden]) .timeline__item:nth-child(2) { animation-delay: .37s; }
.sema.is-js .sema__ekran:not([hidden]) .timeline__item:nth-child(3) { animation-delay: .49s; }
.sema.is-js .sema__ekran:not([hidden]) .timeline__item:nth-child(4) { animation-delay: .61s; }
.sema.is-js .sema__ekran:not([hidden]) .timeline__item:nth-child(5) { animation-delay: .73s; }
.sema.is-js .sema__ekran:not([hidden]) .timeline__item:nth-child(6) { animation-delay: .85s; }
@keyframes yana-gir { from { opacity: 0; transform: translateX(-8px); } }
.sema__yazici { grid-column: 3; grid-row: 3; height: 268px; margin-top: -8px; overflow: hidden; }
.sema__agiz { position: relative; z-index: 1; display: block; height: 12px; margin: 0 12%; border-radius: 6px; background: var(--window-bar); }
@media (max-width: 1099px) {
  .sema__alan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.sema__kart--0, .sema__kart--1, .sema__kart--2, .sema__kart--3, .sema__pencere, .sema__yazici) { grid-column: auto; grid-row: auto; }
  :is(.sema__pencere, .sema__yazici) { grid-column: 1 / -1; }
  .sema__tel { display: none; }
}
@media (max-width: 600px) { .sema__alan { grid-template-columns: minmax(0, 1fr); } .sema__ekran { min-height: 0; } }

/* Barkodlu etiket: yazıcıdan çıkar, üstüne mühür basılır (çözüm şeması, iletişim) */
.etiket { position: relative; width: min(280px, 86%); margin: -2px auto 0; overflow: hidden; background: #FFFFFF; border: 1.5px solid var(--ink); border-radius: 0 0 8px 8px; box-shadow: 0 18px 40px -24px rgba(36, 29, 79, .5); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.etiket__bas { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--window-bar); color: #FFFFFF; font-size: 11px; letter-spacing: .08em; }
.etiket__bas span + span { color: var(--window-bar-ink); }
.etiket__kod { padding: 12px 12px 8px; font-size: 18px; font-weight: 500; }
.etiket__satirlar { margin: 0; padding: 0 12px; }
.etiket__satirlar div { display: flex; gap: 8px; padding: 2px 0; }
.etiket__satirlar dt { flex: none; width: 64px; color: var(--muted); }
.etiket__satirlar dd { margin: 0; }
.etiket__barkod { height: 40px; margin: 12px 12px 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 13px, transparent 13px 16px); }
.etiket__antet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); font-size: 9.5px; }
.etiket__antet span { padding: 5px 8px; }
.etiket__antet span + span { border-left: 1px solid var(--ink); }
.etiket__muhur { position: absolute; right: 14px; top: 46px; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border: 2px solid var(--brand); border-radius: 50%; color: var(--brand); text-align: center; font-size: 9px; line-height: 1.2; letter-spacing: .06em; opacity: .9; transform: rotate(-12deg); }
:is(.sema.is-js .etiket:not([hidden]), .etiket--bas) { animation: yazdir 1.5s steps(15, end) both; }
:is(.sema.is-js .etiket:not([hidden]), .etiket--bas) .etiket__muhur { animation: muhur .35s 1.6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes yazdir { from { transform: translateY(-100%); } }
@keyframes muhur { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } }

/* Yelpaze (ana sayfa projeleri): geniş ekranda pencereler üst üste başlar, bölüm ekrana girdikçe açılır */
.yelpaze { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; view-timeline: --yelpaze block; }
.yelpaze__pencere { display: flex; flex-direction: column; }
.yelpaze__govde { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; color: var(--ink); }
.yelpaze__govde:hover { color: var(--ink); }
.yelpaze__baslik { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; }
.yelpaze__govde:hover .yelpaze__baslik { color: var(--brand); }
.yelpaze__ozet { flex: 1; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .yelpaze { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .yelpaze__pencere { animation: linear both; animation-timeline: --yelpaze; animation-range: entry 15% cover 45%; transform-origin: 50% 100%; }
    .yelpaze__pencere:nth-child(1) { animation-name: yelpaze-1; }
    .yelpaze__pencere:nth-child(2) { animation-name: yelpaze-2; }
    .yelpaze__pencere:nth-child(3) { animation-name: yelpaze-3; }
    .yelpaze__pencere:nth-child(4) { animation-name: yelpaze-4; }
  }
}
@keyframes yelpaze-1 { from { transform: translateX(calc(150% + 36px)) rotate(-7deg); } }
@keyframes yelpaze-2 { from { transform: translateX(calc(50% + 12px)) translateY(-8px) rotate(-2.5deg); } }
@keyframes yelpaze-3 { from { transform: translateX(calc(-50% - 12px)) translateY(-8px) rotate(2.5deg); } }
@keyframes yelpaze-4 { from { transform: translateX(calc(-150% - 36px)) rotate(7deg); } }

/* Kaydırmayla belirenler: sürüm notları ve pencerelerin 3D eğimle gelişi (CBDC'deki kart duruşu) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .commit { animation: yukari-gir linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .commit__dot { animation: nokta-pat linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
  }
  /* Pencerelerin 3D eğimle gelişi yalnızca geniş ekranda; telefonda bölümün hafif belirmesi yeter (ölçüldü: akicilik_testi). */
  @media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
    main > section:not(.sahne) :is(.oswin, .cta-dialog, .wizard, .screen, .case-feature):not(.yelpaze__pencere):not(:has(.desk)) {
      animation: egim-gir linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; transform-origin: 50% 100%;
    }
  }
}
@keyframes nokta-pat { from { transform: scale(0); } 70% { transform: scale(1.4); } to { transform: none; } }
@keyframes egim-gir { from { opacity: .35; transform: perspective(1400px) rotateX(16deg) translateY(36px) scale(.97); } }

/* Çözüm sayfası: kayıt penceresi yapışık durur, akış adımları geçtikçe penceredeki imleç kaydın adımlarında iner */
.cozum__izgara {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "giris pencere" "akis pencere";
  gap: 48px 64px; margin-top: 48px; align-items: start; timeline-scope: --akis;
}
.cozum__giris { grid-area: giris; }
.cozum__pencere { grid-area: pencere; position: sticky; top: calc(var(--ust) + 28px); display: flex; flex-direction: column; gap: 18px; }
.cozum__pencere .note { align-self: flex-start; margin-left: -12px; transform: rotate(-1.5deg); }
.cozum__akis { grid-area: akis; padding-top: 24px; }
.cozum__adimlar { margin: 36px 0 20px 17px; padding: 0; list-style: none; border-left: 2px solid var(--ink); view-timeline: --akis block; }
.cozum__adim { display: flex; gap: 18px; padding: 0 0 36px 24px; }
.cozum__adim:last-child { padding-bottom: 8px; }
.cozum__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: -42px; border: 1.5px solid var(--brand); border-radius: 50%; background: #FFFFFF; font-family: var(--font-mono); font-size: 13px; color: var(--brand); }
.cozum__adim-baslik { margin-top: 4px; font-family: var(--font-serif); font-size: 22px; line-height: 1.15; }
.cozum__adim p { margin-top: 6px; font-size: 16px; color: var(--muted); }
.cozum__kayit { position: relative; }
.cozum__imlec { display: none; }
@media (max-width: 900px) {
  .cozum__izgara { grid-template-columns: minmax(0, 1fr); grid-template-areas: "giris" "pencere" "akis"; gap: 36px; }
  .cozum__pencere { position: static; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cozum__adim { animation: yukari-gir linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .cozum__imlec {
      display: block; position: absolute; left: 12px; right: 12px; top: 3px; height: 36px; border: 1px solid rgba(100, 64, 248, .28); border-radius: 8px; background: rgba(100, 64, 248, .07);
      animation: linear both; animation-timeline: --akis; animation-range: cover 30% cover 75%;
    }
    .adim-3 .cozum__imlec { animation-name: imlec-3; animation-timing-function: steps(3, jump-none); }
    .adim-4 .cozum__imlec { animation-name: imlec-4; animation-timing-function: steps(4, jump-none); }
    .adim-5 .cozum__imlec { animation-name: imlec-5; animation-timing-function: steps(5, jump-none); }
    .adim-6 .cozum__imlec { animation-name: imlec-6; animation-timing-function: steps(6, jump-none); }
    .adim-7 .cozum__imlec { animation-name: imlec-7; animation-timing-function: steps(7, jump-none); }
    .adim-8 .cozum__imlec { animation-name: imlec-8; animation-timing-function: steps(8, jump-none); }
  }
}
/* Kayıt satırları 41 px aralıklı (.timeline__item); imleç ilk satırdan son satıra iner */
@keyframes imlec-3 { to { transform: translateY(82px); } }
@keyframes imlec-4 { to { transform: translateY(123px); } }
@keyframes imlec-5 { to { transform: translateY(164px); } }
@keyframes imlec-6 { to { transform: translateY(205px); } }
@keyframes imlec-7 { to { transform: translateY(246px); } }
@keyframes imlec-8 { to { transform: translateY(287px); } }

/* Atölye: kilometre taşları = pafta cetveli; yıllar damga gibi basılır */
.cetvel { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); margin: 16px 0 0; padding: 0; list-style: none; view-timeline: --cetvel block; }
.cetvel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 68px; height: 14px; border-top: 1.5px solid var(--ink); transform-origin: left;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) top / 100% 6px no-repeat, repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 60px) top / 100% 13px no-repeat;
}
.cetvel__tas { position: relative; padding: 0 24px 8px 0; }
.cetvel__tas::before { content: ""; position: absolute; left: 30px; top: 64px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px #FFFFFF; }
.cetvel__damga { display: inline-block; margin-bottom: 52px; padding: 6px 14px; border: 2.5px solid var(--brand); border-radius: 8px; font-family: var(--font-mono); font-size: 22px; font-weight: 500; letter-spacing: .04em; color: var(--brand); transform: rotate(-4deg); }
.cetvel__tas:nth-child(even) .cetvel__damga { transform: rotate(3deg); }
.cetvel__baslik { font-family: var(--font-serif); font-size: 22px; line-height: 1.15; }
.cetvel__tas p { margin-top: 8px; font-size: 15px; color: var(--muted); }
@media (max-width: 720px) {
  .cetvel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cetvel::before { left: 0; right: auto; top: 0; bottom: 0; width: 13px; height: auto; border-top: 0; border-left: 1.5px solid var(--ink); transform-origin: top;
    background: repeating-linear-gradient(180deg, var(--ink) 0 1px, transparent 1px 12px) left / 6px 100% no-repeat, repeating-linear-gradient(180deg, var(--ink) 0 1.5px, transparent 1.5px 60px) left / 13px 100% no-repeat; }
  .cetvel__tas { padding: 0 0 0 36px; }
  .cetvel__tas::before { left: -4px; top: 18px; }
  .cetvel__damga { margin-bottom: 12px; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cetvel::before { animation: cetvel-ciz linear both; animation-timeline: --cetvel; animation-range: entry 30% cover 40%; }
    .cetvel__damga, .cetvel__tas::before { animation: damga-bas linear both; animation-timeline: --cetvel; }
    .cetvel__tas:nth-child(even) .cetvel__damga { animation-name: damga-bas-2; }
    .cetvel__tas:nth-child(1) :is(.cetvel__damga), .cetvel__tas:nth-child(1)::before { animation-range: cover 24% cover 30%; }
    .cetvel__tas:nth-child(2) :is(.cetvel__damga), .cetvel__tas:nth-child(2)::before { animation-range: cover 28% cover 34%; }
    .cetvel__tas:nth-child(3) :is(.cetvel__damga), .cetvel__tas:nth-child(3)::before { animation-range: cover 32% cover 38%; }
    .cetvel__tas:nth-child(4) :is(.cetvel__damga), .cetvel__tas:nth-child(4)::before { animation-range: cover 36% cover 42%; }
    .cetvel__tas:nth-child(n+5) :is(.cetvel__damga), .cetvel__tas:nth-child(n+5)::before { animation-range: cover 40% cover 46%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 720px) { .cetvel::before { animation-name: cetvel-ciz-dik; animation-range: entry 20% exit 20%; } }
}
@keyframes cetvel-ciz { from { transform: scaleX(0); } }
@keyframes cetvel-ciz-dik { from { transform: scaleY(0); } }
@keyframes damga-bas { from { opacity: 0; transform: rotate(-4deg) scale(1.8); } }
@keyframes damga-bas-2 { from { opacity: 0; transform: rotate(3deg) scale(1.8); } }

/* Projeler masaüstü: pencere 3D olarak öne gelerek açılır */
@keyframes appwin-3d { from { opacity: 0; transform: perspective(1200px) rotateX(16deg) translateY(28px) scale(.92); } }

/* İletişim: gönderilince yazıcıdan talep fişi çıkar */
.talep-fis { margin-top: 24px; }
.talep-fis .sema__agiz { margin: 0 18%; }
.talep-fis .etiket { width: min(300px, 80%); }

/* 404: arkada kayan dev yazı, önde dağılıp toplanan logo (SPYLT'teki nesnenin hal değiştirmesi) */
.hata { position: relative; overflow: hidden; }
.hata__serit { position: absolute; left: 0; right: 0; top: 50%; z-index: -1; transform: translateY(-50%); white-space: nowrap; pointer-events: none; }
.hata__kayan { display: inline-flex; font-family: var(--font-serif); font-size: clamp(96px, 18vw, 260px); line-height: 1; letter-spacing: -.03em; color: #EEEAF8; animation: kayan 40s linear infinite paused; }
.hata__kayan span { padding-right: .4em; }
.oynuyor .hata__kayan { animation-play-state: running; }
@keyframes kayan { to { transform: translateX(-50%); } }
.hata__izgara { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.hata__izgara > div:first-child { flex: 1 1 420px; min-width: 0; }
.hata__logo { flex: none; margin-inline: auto; }
.hata__logo .logo3d__parca { animation: 7s cubic-bezier(.6, 0, .2, 1) infinite paused; }
.oynuyor .hata__logo .logo3d__parca { animation-play-state: running; }
.hata__logo .logo3d__parca--0 { animation-name: dagil-0; }
.hata__logo .logo3d__parca--1 { animation-name: dagil-1; }
.hata__logo .logo3d__parca--2 { animation-name: dagil-2; }
.hata__logo .logo3d__parca--3 { animation-name: dagil-3; }
@keyframes dagil-0 { 0%, 30%, 100% { transform: translate3d(calc(var(--b) * -1.5), calc(var(--b) * -1.1), calc(var(--b) * .9)) rotateZ(-38deg) rotateX(28deg); } 50%, 80% { transform: translate3d(calc(var(--b) * -.574), calc(var(--b) * -.574), 0); } }
@keyframes dagil-1 { 0%, 30%, 100% { transform: translate3d(calc(var(--b) * 1.6), calc(var(--b) * -.9), calc(var(--b) * -.4)) rotateZ(24deg) rotateY(-30deg); } 50%, 80% { transform: translate3d(calc(var(--b) * .574), calc(var(--b) * -.574), 0); } }
@keyframes dagil-2 { 0%, 30%, 100% { transform: translate3d(calc(var(--b) * -1.2), calc(var(--b) * 1.5), calc(var(--b) * -.2)) rotateZ(16deg) rotateX(-34deg); } 50%, 80% { transform: translate3d(calc(var(--b) * -.574), calc(var(--b) * .574), 0); } }
@keyframes dagil-3 { 0%, 30%, 100% { transform: translate3d(calc(var(--b) * 1.3), calc(var(--b) * 1.4), calc(var(--b) * 1.2)) rotateZ(-52deg) rotateY(36deg); } 50%, 80% { transform: translate3d(calc(var(--b) * .574), calc(var(--b) * .574), 0); } }
@media (prefers-reduced-motion: reduce) { .hata__logo .logo3d__parca { animation: none; } .hata__kayan { animation: none; } }

/* Tel demeti (_TelDemeti): vurgu bölümlerinin (sayfa sonu çağrıları) sağında ince akan çizgiler; kaydırdıkça hafifçe kayar */
.cta { position: relative; isolation: isolate; overflow: hidden; }
.tel-demeti { position: absolute; right: 0; top: 0; z-index: -1; width: min(72%, 980px); height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.tel-demeti path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tel-demeti__mor { stroke: #7F6BFF; }
.tel-demeti__mavi { stroke: #3B4CF0; }
@media (max-width: 720px) { .tel-demeti { width: 100%; opacity: .55; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tel-demeti { animation: tel-kay linear both; animation-timeline: view(); }
  }
}
@keyframes tel-kay { from { transform: translateY(-24px); } to { transform: translateY(24px); } }

/* Işık zemini v2: öne çıkan kartlar gerçek buğulu cam (sayfada aynı anda birkaç tane; hafif modda kapalı) */
.sema__link, .giris__kunye, .yelpaze__pencere { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.hafif :is(.sema__link, .giris__kunye, .yelpaze__pencere) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .88); }
.appwin__ctrl { background: rgba(36, 29, 79, .08); color: var(--indigo); }
.appwin__ctrl:hover { background: rgba(36, 29, 79, .16); color: var(--ink); }
.appwin__ctrl--close, .appwin__ctrl--close:hover { background: #C2417A; color: #FFFFFF; }