/* site-sohbet.css: tanitim sitelerinin ilk ekrani (PO 05.11 Irsaliye Kocani; Anayasa Madde 48).
   Solda sohbet, sagda delikli kocan; asistan "Gelistiriliyor" etiketli. Betik yok (Madde 20): secim
   radyo, onay kutu, oynatma keyframes. Bicim shared/arayuz/site_sablonlari/_sohbet_sahnesi.html, veri
   shared/arayuz/sohbet_sahnesi.py. Renkler yalniz tema belirtecleri.

   Zaman cizelgesi merkezin bes cumlesinden hesaplanmistir (SAHNE_SURELERI): s1 93, s2 119, s3 111,
   s4 104, s5 60 birim; birim 40 ms. Urun sitelerinin cumleleri bu sureye sigar (test). */
.gz { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.uyg { --giris: cubic-bezier(0.05, 0.7, 0.1, 1); }
.uyg-uc { display: grid; grid-template-columns: var(--yan-g, 216px) minmax(0, 1fr) minmax(var(--so-min, 460px), var(--so-g, 40%)); grid-template-areas: "yan ana sohbet"; block-size: calc(100svh - var(--uyg-ust)); min-block-size: var(--uyg-min, 640px); }
.uyg-yan { grid-area: yan; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3); overflow: hidden; background: var(--bg-card); border-inline-end: 1px solid var(--border); color: var(--text); }
.yan-nav { display: flex; flex-direction: column; gap: 2px; }
.yan-nav .nav-item { min-block-size: 38px; font-size: var(--fs-14); }
label.nav-item { cursor: pointer; }
.uyg-ana { grid-area: ana; min-inline-size: 0; overflow: hidden; padding: var(--sp-5); color: var(--text); }
.ekranlar { display: grid; }
.ekran { display: none; grid-area: 1 / 1; min-inline-size: 0; }
.ek-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-3); }
.ek-ad { margin: 0; font-size: var(--fs-24); font-weight: 700; line-height: 1.2; }
.ek-stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-block-end: var(--sp-3); }
.ek-stat > div { padding: var(--sp-2) var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); }
.ek-stat p { margin: 0; }
.ek-sayi { font-size: var(--fs-22); font-weight: 700; font-variant-numeric: tabular-nums; }
.ek-et { font-size: var(--fs-13); color: var(--muted); }
.ekran .table th, .ekran .table td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-14); white-space: nowrap; }
.ekran .table td { background: var(--sat-zemin); }
.ekran .yeni-sat td { background: var(--sat-yeni); font-weight: 600; }
.ekran .zarar td { background: var(--sat-zarar); }
.dur { display: inline-grid; justify-items: start; }
.dur > * { grid-area: 1 / 1; }
.bekliyor { display: inline-flex; }
.kayitli { display: none; }

.sohbet { grid-area: sohbet; display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; background: var(--so-zemin); color: var(--so-metin); --s-odak: var(--so-vurgu); }
.so-ust { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-6); border-block-end: 1px solid var(--so-cizgi); }
.so-avatar { display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: var(--r-full); background: var(--so-avatar, var(--bg-card)); }
.so-avatar img { inline-size: 22px; block-size: 22px; }
.so-ad { font-weight: 600; }
.so-giris { padding: var(--sp-4) var(--sp-6) var(--sp-3); }
.sohbet .so-h1 { margin: 0 0 var(--sp-3); font-size: clamp(38px, 3.6vw, 72px); line-height: 1; color: var(--so-h1); }
.so-h1 span { display: block; color: var(--so-h1-2); }
.sohbet .s-eylem { margin: 0; align-items: center; }
.sohbet .s-bag { color: var(--so-vurgu); }
.so-akis { flex: 1; min-block-size: 0; display: flex; flex-direction: column-reverse; overflow-y: auto; padding: var(--sp-2) var(--sp-6); scrollbar-width: thin; scrollbar-color: var(--so-cizgi) transparent; }
.so-sahneler { display: grid; }
.sahne { display: none; grid-area: 1 / 1; align-self: end; min-inline-size: 0; }
.m-asistan { inline-size: fit-content; margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-4); border: 1px solid var(--so-asistan-cizgi); border-radius: var(--r-balon) var(--r-balon) var(--r-balon) var(--r-kuyruk); background: var(--so-asistan); color: var(--so-asistan-metin); }
.m-kul { inline-size: fit-content; max-inline-size: 88%; margin: 0 0 var(--sp-2) auto; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-balon) var(--r-balon) var(--r-kuyruk) var(--r-balon); background: var(--so-kul); color: var(--so-kul-metin); font-weight: 500; }
.m-yan { display: grid; }
.m-yan > * { grid-area: 1 / 1; }
.m-nokta { display: inline-flex; gap: var(--sp-1); align-self: start; justify-self: start; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--so-asistan-cizgi); border-radius: var(--r-balon) var(--r-balon) var(--r-balon) var(--r-kuyruk); background: var(--so-asistan); opacity: 0; }
.m-nokta i { inline-size: 8px; block-size: 8px; border-radius: var(--r-full); background: var(--so-nokta); }
.m-kart { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-balon) var(--r-balon) var(--r-balon) var(--r-kuyruk); background: var(--k-zemin); color: var(--k-metin); font-family: var(--font-ui); }
.kart-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-block-end: var(--sp-2); }
.kart-ad { margin: 0; font-size: var(--fs-18); font-weight: 700; }
.m-kart .alanlar { margin: 0; }
.m-kart .alan { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding-block: 5px; border-block-start: 1px solid var(--border); border-block-end: 0; font-size: var(--fs-14); }
.m-kart .alan dt { grid-column: auto; color: var(--muted); }
.m-kart .alan dd { margin: 0; }
.m-kart .deger { font-weight: 600; }
.kart-ayak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-2); }
.kart-hedef { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: var(--fs-13); color: var(--muted); }
.m-kart > .kart-hedef { margin-block-start: var(--sp-2); }
.onay-dugme { display: inline-flex; align-items: center; cursor: pointer; }
.onay-dugme span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.onay-dugme .m-geri { display: none; }
.onay-dugme.btn { min-block-size: 44px; border-radius: var(--r-md); }
.m-kayit { display: none; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-14); }
.m-kayit .icon { color: var(--so-vurgu); }
.so-alt { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-6) var(--sp-3); }
.so-oneri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.cip, .cip-kucuk { display: inline-flex; align-items: center; gap: var(--sp-1); min-block-size: 40px; padding-inline: var(--sp-2); border: 1px solid var(--so-cip-cizgi); border-radius: var(--r-cip, 4px); font-size: var(--fs-14); font-weight: 500; color: var(--so-cip-metin); cursor: pointer; }
.cip:hover, .cip-kucuk:hover { border-color: var(--so-yazi-cizgi); }
.cip .icon, .cip-kucuk .icon { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.cip-kucuk { display: none; margin-inline-start: auto; border-color: transparent; color: var(--so-soluk); }
.d-dur, .d-sur { display: inline-flex; align-items: center; gap: var(--sp-1); }
.d-sur { display: none; }
#dur:checked ~ .uyg .d-dur { display: none; }
#dur:checked ~ .uyg .d-sur { display: inline-flex; }
.so-yazi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-block-size: 52px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border: 1px solid var(--so-yazi-cizgi); border-radius: var(--r-yazi, 8px); background: var(--so-yazi-zemin); }
.yaz-alan { display: grid; }
.yaz-alan > * { grid-area: 1 / 1; display: none; }
.bos { color: var(--so-yazi-soluk); }
.yaz { overflow: hidden; color: var(--so-yazi-metin); white-space: nowrap; }
.yaz i { font-style: normal; opacity: 0; }
.so-gonder { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: var(--r-cip, 4px); background: var(--so-gonder); color: var(--so-gonder-metin); }
.so-not { margin: 0; font-size: var(--fs-13); color: var(--so-soluk); }
.h0 { --h: 0; }
.h1 { --h: 1; }
.h2 { --h: 2; }
.h3 { --h: 3; }
.h4 { --h: 4; }
.h5 { --h: 5; }
.h6 { --h: 6; }
.h7 { --h: 7; }
.h8 { --h: 8; }
.h9 { --h: 9; }
.h10 { --h: 10; }
.h11 { --h: 11; }
.h12 { --h: 12; }
.h13 { --h: 13; }
.h14 { --h: 14; }
.h15 { --h: 15; }
.h16 { --h: 16; }
.h17 { --h: 17; }
.h18 { --h: 18; }
.h19 { --h: 19; }
.h20 { --h: 20; }
.h21 { --h: 21; }
.h22 { --h: 22; }
.h23 { --h: 23; }
.h24 { --h: 24; }
.h25 { --h: 25; }
.h26 { --h: 26; }
.h27 { --h: 27; }
.h28 { --h: 28; }
.h29 { --h: 29; }
.h30 { --h: 30; }
.h31 { --h: 31; }
.h32 { --h: 32; }
.h33 { --h: 33; }
.h34 { --h: 34; }
.h35 { --h: 35; }
.h36 { --h: 36; }
.h37 { --h: 37; }
.h38 { --h: 38; }
.h39 { --h: 39; }
.h40 { --h: 40; }
.h41 { --h: 41; }
.h42 { --h: 42; }
.h43 { --h: 43; }
.h44 { --h: 44; }
.h45 { --h: 45; }
.h46 { --h: 46; }
.h47 { --h: 47; }
.h48 { --h: 48; }
.h49 { --h: 49; }
.h50 { --h: 50; }
.h51 { --h: 51; }
.h52 { --h: 52; }
.h53 { --h: 53; }
.h54 { --h: 54; }
.h55 { --h: 55; }
.h56 { --h: 56; }
.h57 { --h: 57; }
.h58 { --h: 58; }
.h59 { --h: 59; }
.h60 { --h: 60; }
.h61 { --h: 61; }
.h62 { --h: 62; }
.h63 { --h: 63; }
.h64 { --h: 64; }
.h65 { --h: 65; }
.h66 { --h: 66; }
.h67 { --h: 67; }
.h68 { --h: 68; }
.h69 { --h: 69; }
.h70 { --h: 70; }
.h71 { --h: 71; }
.h72 { --h: 72; }
.h73 { --h: 73; }
.h74 { --h: 74; }
.h75 { --h: 75; }
.h76 { --h: 76; }
.h77 { --h: 77; }
.h78 { --h: 78; }
.h79 { --h: 79; }
.h80 { --h: 80; }
.h81 { --h: 81; }
.h82 { --h: 82; }
.h83 { --h: 83; }
.h84 { --h: 84; }
.h85 { --h: 85; }
.h86 { --h: 86; }
.h87 { --h: 87; }
.h88 { --h: 88; }
.h89 { --h: 89; }
.h90 { --h: 90; }
.h91 { --h: 91; }
.h92 { --h: 92; }
.h93 { --h: 93; }
.h94 { --h: 94; }
.h95 { --h: 95; }
.h96 { --h: 96; }
.h97 { --h: 97; }
.h98 { --h: 98; }
.h99 { --h: 99; }
.h100 { --h: 100; }
.h101 { --h: 101; }
.h102 { --h: 102; }
.h103 { --h: 103; }
.h104 { --h: 104; }
.h105 { --h: 105; }
.h106 { --h: 106; }
.h107 { --h: 107; }
.h108 { --h: 108; }
.h109 { --h: 109; }
.h110 { --h: 110; }
.h111 { --h: 111; }
.h112 { --h: 112; }
.h113 { --h: 113; }
.h114 { --h: 114; }
.h115 { --h: 115; }
.h116 { --h: 116; }
.h117 { --h: 117; }
.h118 { --h: 118; }
.h119 { --h: 119; }
#r-s1:checked ~ .uyg .sahne-s1, #r-oto:checked ~ .uyg .sahne-s1, #r-s1:checked ~ .uyg .ekran-s1, #r-oto:checked ~ .uyg .ekran-s1, #r-s1:checked ~ .uyg .bos-s1, #r-oto:checked ~ .uyg .bos-s1 { display: block; }
#r-s1:checked ~ .uyg .n-s1, #r-oto:checked ~ .uyg .n-s1 { background: var(--secili); color: var(--secili-metin); font-weight: 600; }
#r-s1:checked ~ .uyg .cip-s1, #r-oto:checked ~ .uyg .cip-s1 { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); font-weight: 600; }
#r-s1:focus-visible ~ .uyg .cip-s1 { outline: 2px solid var(--so-vurgu); outline-offset: 2px; }
#r-s2:checked ~ .uyg .sahne-s2, #r-s2:checked ~ .uyg .ekran-s2, #r-s2:checked ~ .uyg .bos-s2 { display: block; }
#r-s2:checked ~ .uyg .n-s2 { background: var(--secili); color: var(--secili-metin); font-weight: 600; }
#r-s2:checked ~ .uyg .cip-s2 { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); font-weight: 600; }
#r-s2:focus-visible ~ .uyg .cip-s2 { outline: 2px solid var(--so-vurgu); outline-offset: 2px; }
#r-s3:checked ~ .uyg .sahne-s3, #r-s3:checked ~ .uyg .ekran-s3, #r-s3:checked ~ .uyg .bos-s3 { display: block; }
#r-s3:checked ~ .uyg .n-s3 { background: var(--secili); color: var(--secili-metin); font-weight: 600; }
#r-s3:checked ~ .uyg .cip-s3 { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); font-weight: 600; }
#r-s3:focus-visible ~ .uyg .cip-s3 { outline: 2px solid var(--so-vurgu); outline-offset: 2px; }
#r-s4:checked ~ .uyg .sahne-s4, #r-s4:checked ~ .uyg .ekran-s4, #r-s4:checked ~ .uyg .bos-s4 { display: block; }
#r-s4:checked ~ .uyg .n-s4 { background: var(--secili); color: var(--secili-metin); font-weight: 600; }
#r-s4:checked ~ .uyg .cip-s4 { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); font-weight: 600; }
#r-s4:focus-visible ~ .uyg .cip-s4 { outline: 2px solid var(--so-vurgu); outline-offset: 2px; }
#r-s5:checked ~ .uyg .sahne-s5, #r-s5:checked ~ .uyg .ekran-s5, #r-s5:checked ~ .uyg .bos-s5 { display: block; }
#r-s5:checked ~ .uyg .n-s5 { background: var(--secili); color: var(--secili-metin); font-weight: 600; }
#r-s5:checked ~ .uyg .cip-s5 { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); font-weight: 600; }
#r-s5:focus-visible ~ .uyg .cip-s5 { outline: 2px solid var(--so-vurgu); outline-offset: 2px; }
#r-oto:focus-visible ~ .uyg .so-oneri, #dur:focus-visible ~ .uyg .so-oneri { outline: 2px solid var(--so-vurgu); outline-offset: 2px; }
#onay-s1:checked ~ .uyg .sahne-s1 .bekliyor, #onay-s1:checked ~ .uyg .ekran-s1 .bekliyor, #onay-s1:checked ~ .uyg .sahne-s1 .m-onayla, #onay-s1:checked ~ .uyg .sahne-s1 .kart-hedef { display: none; }
#onay-s1:checked ~ .uyg .sahne-s1 .kayitli, #onay-s1:checked ~ .uyg .ekran-s1 .kayitli, #onay-s1:checked ~ .uyg .sahne-s1 .m-geri { display: inline-flex; }
#onay-s1:checked ~ .uyg .sahne-s1 .m-kayit { display: flex; }
#onay-s1:checked ~ .uyg .ekran-s1 .yeni-sat td { background: var(--sat-kayit); }
#onay-s1:focus-visible ~ .uyg .onay-s1 { outline: 2px solid var(--ring-color); outline-offset: 2px; }
#onay-s2:checked ~ .uyg .sahne-s2 .bekliyor, #onay-s2:checked ~ .uyg .ekran-s2 .bekliyor, #onay-s2:checked ~ .uyg .sahne-s2 .m-onayla, #onay-s2:checked ~ .uyg .sahne-s2 .kart-hedef { display: none; }
#onay-s2:checked ~ .uyg .sahne-s2 .kayitli, #onay-s2:checked ~ .uyg .ekran-s2 .kayitli, #onay-s2:checked ~ .uyg .sahne-s2 .m-geri { display: inline-flex; }
#onay-s2:checked ~ .uyg .sahne-s2 .m-kayit { display: flex; }
#onay-s2:checked ~ .uyg .ekran-s2 .yeni-sat td { background: var(--sat-kayit); }
#onay-s2:focus-visible ~ .uyg .onay-s2 { outline: 2px solid var(--ring-color); outline-offset: 2px; }
#onay-s3:checked ~ .uyg .sahne-s3 .bekliyor, #onay-s3:checked ~ .uyg .ekran-s3 .bekliyor, #onay-s3:checked ~ .uyg .sahne-s3 .m-onayla, #onay-s3:checked ~ .uyg .sahne-s3 .kart-hedef { display: none; }
#onay-s3:checked ~ .uyg .sahne-s3 .kayitli, #onay-s3:checked ~ .uyg .ekran-s3 .kayitli, #onay-s3:checked ~ .uyg .sahne-s3 .m-geri { display: inline-flex; }
#onay-s3:checked ~ .uyg .sahne-s3 .m-kayit { display: flex; }
#onay-s3:checked ~ .uyg .ekran-s3 .yeni-sat td { background: var(--sat-kayit); }
#onay-s3:focus-visible ~ .uyg .onay-s3 { outline: 2px solid var(--ring-color); outline-offset: 2px; }
#onay-s4:checked ~ .uyg .sahne-s4 .bekliyor, #onay-s4:checked ~ .uyg .ekran-s4 .bekliyor, #onay-s4:checked ~ .uyg .sahne-s4 .m-onayla, #onay-s4:checked ~ .uyg .sahne-s4 .kart-hedef { display: none; }
#onay-s4:checked ~ .uyg .sahne-s4 .kayitli, #onay-s4:checked ~ .uyg .ekran-s4 .kayitli, #onay-s4:checked ~ .uyg .sahne-s4 .m-geri { display: inline-flex; }
#onay-s4:checked ~ .uyg .sahne-s4 .m-kayit { display: flex; }
#onay-s4:checked ~ .uyg .ekran-s4 .yeni-sat td { background: var(--sat-kayit); }
#onay-s4:focus-visible ~ .uyg .onay-s4 { outline: 2px solid var(--ring-color); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes gir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes sat-gir { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
  @keyframes zar-gir { from { background: var(--sat-zemin); } to { background: var(--sat-zarar); } }
  @keyframes nok-tek { 0%, 100% { opacity: 0; } 6%, 94% { opacity: 1; } }
  @keyframes nok-zip { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
  @keyframes har { 0%, 99% { opacity: 1; box-shadow: 2px 0 0 var(--so-imlec); } 100% { opacity: 1; box-shadow: none; } }
  @keyframes gizle { to { opacity: 0; } }
  @keyframes goster { to { opacity: 1; } }
  .m-nokta i { animation: nok-zip 900ms ease-in-out infinite; }
  .m-nokta i:nth-child(2) { animation-delay: 150ms; }
  .m-nokta i:nth-child(3) { animation-delay: 300ms; }
  .m-kayit { animation: gir 300ms var(--giris) both; }
  .yan-nav .nav-item, .cip { transition: background-color 200ms ease-out, color 200ms ease-out; }
  #r-oto:checked ~ .uyg .oto-dur { display: inline-flex; }
  #r-oto:not(:checked) ~ .uyg .oto-oyn { display: inline-flex; }
  #r-oto:checked ~ #dur:checked ~ .uyg * { animation-play-state: paused !important; }
  @keyframes o-har { 0% { opacity: 1; box-shadow: 2px 0 0 var(--so-imlec); } 0.180% { opacity: 1; box-shadow: none; } 13.477% { opacity: 1; box-shadow: none; } 13.492% { opacity: 0; } 100% { opacity: 0; } }
  .sahne-s1 .m-kul { animation: gir 300ms var(--giris) 4.62s both; }
  .sahne-s1 .m-nokta { animation: nok-tek 1600ms linear 4.92s both; }
  .sahne-s1 .m-kart { animation: gir 350ms var(--giris) 6.52s both; }
  .ekran-s1 .yeni-sat td { animation: sat-gir 400ms var(--giris) 6.72s both; }
  .ekran-s1 .zarar td { animation: zar-gir 400ms ease-out 6.72s both; }
  #r-s1:checked ~ .uyg .yaz-s1 { display: block; animation: gizle 1ms linear 4.62s forwards; }
  #r-s1:checked ~ .uyg .yaz-s1 i { animation: har 140ms linear forwards; animation-delay: calc(var(--h) * 40ms + 0.4s); }
  #r-s1:checked ~ .uyg .bos-s1 { opacity: 0; animation: goster 1ms linear 4.62s forwards; }
  #r-s1:checked ~ #onay-s1:checked ~ .uyg .sahne-s1 .m-kul, #r-s1:checked ~ #onay-s1:checked ~ .uyg .sahne-s1 .m-kart, #r-s1:checked ~ #onay-s1:checked ~ .uyg .ekran-s1 .yeni-sat td, #r-s1:checked ~ #onay-s1:checked ~ .uyg .bos-s1 { animation: none; opacity: 1; }
  #r-s1:checked ~ #onay-s1:checked ~ .uyg .sahne-s1 .m-nokta, #r-s1:checked ~ #onay-s1:checked ~ .uyg .yaz-s1 { display: none; }
  @keyframes o-gor-s1 { 0% { visibility: visible; } 20.171% { visibility: hidden; } 100% { visibility: hidden; } }
  @keyframes o-yaz-s1 { 0% { opacity: 1; } 6.918% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-bos-s1 { 0% { opacity: 0; } 6.918% { opacity: 1; } 20.171% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-kul-s1 { 0%, 6.918% { opacity: 0; transform: translateY(10px); } 7.367%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nok-s1 { 0%, 7.367% { opacity: 0; } 7.517%, 9.763% { opacity: 1; } 9.838%, 100% { opacity: 0; } }
  @keyframes o-kart-s1 { 0%, 9.763% { opacity: 0; transform: translateY(12px); } 10.288%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nav-s1 { 0% { background: var(--secili); color: var(--secili-metin); font-weight: 600; } 20.171%, 100% { background: transparent; color: var(--yan-metin); font-weight: 500; } }
  @keyframes o-cip-s1 { 0% { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); } 20.171%, 100% { background: transparent; border-color: var(--so-cip-cizgi); color: var(--so-cip-metin); } }
  #r-oto:checked ~ .uyg .sahne-s1, #r-oto:checked ~ .uyg .ekran-s1 { display: block; animation: o-gor-s1 66.78s step-end -66.780s infinite; }
  #r-oto:checked ~ .uyg .yaz-s1 { display: block; animation: o-yaz-s1 66.78s step-end -66.780s infinite; }
  #r-oto:checked ~ .uyg .yaz-s1 i { animation: o-har 66.78s linear infinite; animation-delay: calc(var(--h) * 40ms + -66.380s); }
  #r-oto:checked ~ .uyg .bos-s1 { display: block; animation: o-bos-s1 66.78s step-end -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .m-kul { animation: o-kul-s1 66.78s ease-out -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .m-nokta { animation: o-nok-s1 66.78s linear -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .m-kart { animation: o-kart-s1 66.78s ease-out -66.780s infinite; }
  #r-oto:checked ~ .uyg .n-s1 { animation: o-nav-s1 66.78s step-end -66.780s infinite; }
  #r-oto:checked ~ .uyg .cip-s1 { animation: o-cip-s1 66.78s step-end -66.780s infinite; }
  @keyframes o-sat-s1 { 0%, 10.063% { opacity: 0; transform: translateX(14px); background: var(--sat-yeni); } 10.662%, 14.930% { opacity: 1; transform: none; background: var(--sat-yeni); } 15.229%, 100% { opacity: 1; transform: none; background: var(--sat-kayit); } }
  @keyframes o-bek-s1 { 0%, 14.930% { opacity: 1; } 15.004%, 100% { opacity: 0; } }
  @keyframes o-kay-s1 { 0%, 14.930% { opacity: 0; transform: rotate(var(--d-aci, 0deg)) scale(var(--d-olcek, 1)); } 15.229%, 100% { opacity: 1; transform: rotate(var(--d-aci, 0deg)) scale(1); } }
  @keyframes o-bas-s1 { 0%, 14.555% { transform: none; } 14.735% { transform: scale(0.95); } 14.930%, 100% { transform: none; } }
  @keyframes o-msg-s1 { 0%, 15.379% { opacity: 0; transform: translateY(6px); } 15.828%, 100% { opacity: 1; transform: none; } }
  #r-oto:checked ~ .uyg .ekran-s1 .yeni-sat td { animation: o-sat-s1 66.78s ease-out -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .bekliyor, #r-oto:checked ~ .uyg .ekran-s1 .bekliyor, #r-oto:checked ~ .uyg .sahne-s1 .m-onayla { display: inline-flex; animation: o-bek-s1 66.78s linear -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .kart-hedef { display: flex; animation: o-bek-s1 66.78s linear -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .kayitli, #r-oto:checked ~ .uyg .ekran-s1 .kayitli, #r-oto:checked ~ .uyg .sahne-s1 .m-geri { display: inline-flex; animation: o-kay-s1 66.78s linear -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .onay-dugme { display: inline-grid; pointer-events: none; animation: o-bas-s1 66.78s ease-out -66.780s infinite; }
  #r-oto:checked ~ .uyg .sahne-s1 .onay-dugme > span { grid-area: 1 / 1; justify-content: center; }
  #r-oto:checked ~ .uyg .sahne-s1 .m-kayit { display: flex; animation: o-msg-s1 66.78s ease-out -66.780s infinite; }
  .sahne-s2 .m-kul { animation: gir 300ms var(--giris) 5.66s both; }
  .sahne-s2 .m-nokta { animation: nok-tek 1600ms linear 5.96s both; }
  .sahne-s2 .m-kart { animation: gir 350ms var(--giris) 7.56s both; }
  .ekran-s2 .yeni-sat td { animation: sat-gir 400ms var(--giris) 7.76s both; }
  .ekran-s2 .zarar td { animation: zar-gir 400ms ease-out 7.76s both; }
  #r-s2:checked ~ .uyg .yaz-s2 { display: block; animation: gizle 1ms linear 5.66s forwards; }
  #r-s2:checked ~ .uyg .yaz-s2 i { animation: har 140ms linear forwards; animation-delay: calc(var(--h) * 40ms + 0.4s); }
  #r-s2:checked ~ .uyg .bos-s2 { opacity: 0; animation: goster 1ms linear 5.66s forwards; }
  #r-s2:checked ~ #onay-s2:checked ~ .uyg .sahne-s2 .m-kul, #r-s2:checked ~ #onay-s2:checked ~ .uyg .sahne-s2 .m-kart, #r-s2:checked ~ #onay-s2:checked ~ .uyg .ekran-s2 .yeni-sat td, #r-s2:checked ~ #onay-s2:checked ~ .uyg .bos-s2 { animation: none; opacity: 1; }
  #r-s2:checked ~ #onay-s2:checked ~ .uyg .sahne-s2 .m-nokta, #r-s2:checked ~ #onay-s2:checked ~ .uyg .yaz-s2 { display: none; }
  @keyframes o-gor-s2 { 0% { visibility: visible; } 21.728% { visibility: hidden; } 100% { visibility: hidden; } }
  @keyframes o-yaz-s2 { 0% { opacity: 1; } 8.476% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-bos-s2 { 0% { opacity: 0; } 8.476% { opacity: 1; } 21.728% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-kul-s2 { 0%, 8.476% { opacity: 0; transform: translateY(10px); } 8.925%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nok-s2 { 0%, 8.925% { opacity: 0; } 9.075%, 11.321% { opacity: 1; } 11.396%, 100% { opacity: 0; } }
  @keyframes o-kart-s2 { 0%, 11.321% { opacity: 0; transform: translateY(12px); } 11.845%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nav-s2 { 0% { background: var(--secili); color: var(--secili-metin); font-weight: 600; } 21.728%, 100% { background: transparent; color: var(--yan-metin); font-weight: 500; } }
  @keyframes o-cip-s2 { 0% { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); } 21.728%, 100% { background: transparent; border-color: var(--so-cip-cizgi); color: var(--so-cip-metin); } }
  #r-oto:checked ~ .uyg .sahne-s2, #r-oto:checked ~ .uyg .ekran-s2 { display: block; animation: o-gor-s2 66.78s step-end -53.310s infinite; }
  #r-oto:checked ~ .uyg .yaz-s2 { display: block; animation: o-yaz-s2 66.78s step-end -53.310s infinite; }
  #r-oto:checked ~ .uyg .yaz-s2 i { animation: o-har 66.78s linear infinite; animation-delay: calc(var(--h) * 40ms + -52.910s); }
  #r-oto:checked ~ .uyg .bos-s2 { display: block; animation: o-bos-s2 66.78s step-end -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .m-kul { animation: o-kul-s2 66.78s ease-out -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .m-nokta { animation: o-nok-s2 66.78s linear -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .m-kart { animation: o-kart-s2 66.78s ease-out -53.310s infinite; }
  #r-oto:checked ~ .uyg .n-s2 { animation: o-nav-s2 66.78s step-end -53.310s infinite; }
  #r-oto:checked ~ .uyg .cip-s2 { animation: o-cip-s2 66.78s step-end -53.310s infinite; }
  @keyframes o-sat-s2 { 0%, 11.620% { opacity: 0; transform: translateX(14px); background: var(--sat-yeni); } 12.219%, 16.487% { opacity: 1; transform: none; background: var(--sat-yeni); } 16.786%, 100% { opacity: 1; transform: none; background: var(--sat-kayit); } }
  @keyframes o-bek-s2 { 0%, 16.487% { opacity: 1; } 16.562%, 100% { opacity: 0; } }
  @keyframes o-kay-s2 { 0%, 16.487% { opacity: 0; transform: rotate(var(--d-aci, 0deg)) scale(var(--d-olcek, 1)); } 16.786%, 100% { opacity: 1; transform: rotate(var(--d-aci, 0deg)) scale(1); } }
  @keyframes o-bas-s2 { 0%, 16.113% { transform: none; } 16.292% { transform: scale(0.95); } 16.487%, 100% { transform: none; } }
  @keyframes o-msg-s2 { 0%, 16.936% { opacity: 0; transform: translateY(6px); } 17.385%, 100% { opacity: 1; transform: none; } }
  #r-oto:checked ~ .uyg .ekran-s2 .yeni-sat td { animation: o-sat-s2 66.78s ease-out -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .bekliyor, #r-oto:checked ~ .uyg .ekran-s2 .bekliyor, #r-oto:checked ~ .uyg .sahne-s2 .m-onayla { display: inline-flex; animation: o-bek-s2 66.78s linear -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .kart-hedef { display: flex; animation: o-bek-s2 66.78s linear -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .kayitli, #r-oto:checked ~ .uyg .ekran-s2 .kayitli, #r-oto:checked ~ .uyg .sahne-s2 .m-geri { display: inline-flex; animation: o-kay-s2 66.78s linear -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .onay-dugme { display: inline-grid; pointer-events: none; animation: o-bas-s2 66.78s ease-out -53.310s infinite; }
  #r-oto:checked ~ .uyg .sahne-s2 .onay-dugme > span { grid-area: 1 / 1; justify-content: center; }
  #r-oto:checked ~ .uyg .sahne-s2 .m-kayit { display: flex; animation: o-msg-s2 66.78s ease-out -53.310s infinite; }
  .sahne-s3 .m-kul { animation: gir 300ms var(--giris) 5.34s both; }
  .sahne-s3 .m-nokta { animation: nok-tek 1600ms linear 5.64s both; }
  .sahne-s3 .m-kart { animation: gir 350ms var(--giris) 7.24s both; }
  .ekran-s3 .yeni-sat td { animation: sat-gir 400ms var(--giris) 7.44s both; }
  .ekran-s3 .zarar td { animation: zar-gir 400ms ease-out 7.44s both; }
  #r-s3:checked ~ .uyg .yaz-s3 { display: block; animation: gizle 1ms linear 5.34s forwards; }
  #r-s3:checked ~ .uyg .yaz-s3 i { animation: har 140ms linear forwards; animation-delay: calc(var(--h) * 40ms + 0.4s); }
  #r-s3:checked ~ .uyg .bos-s3 { opacity: 0; animation: goster 1ms linear 5.34s forwards; }
  #r-s3:checked ~ #onay-s3:checked ~ .uyg .sahne-s3 .m-kul, #r-s3:checked ~ #onay-s3:checked ~ .uyg .sahne-s3 .m-kart, #r-s3:checked ~ #onay-s3:checked ~ .uyg .ekran-s3 .yeni-sat td, #r-s3:checked ~ #onay-s3:checked ~ .uyg .bos-s3 { animation: none; opacity: 1; }
  #r-s3:checked ~ #onay-s3:checked ~ .uyg .sahne-s3 .m-nokta, #r-s3:checked ~ #onay-s3:checked ~ .uyg .yaz-s3 { display: none; }
  @keyframes o-gor-s3 { 0% { visibility: visible; } 21.249% { visibility: hidden; } 100% { visibility: hidden; } }
  @keyframes o-yaz-s3 { 0% { opacity: 1; } 7.996% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-bos-s3 { 0% { opacity: 0; } 7.996% { opacity: 1; } 21.249% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-kul-s3 { 0%, 7.996% { opacity: 0; transform: translateY(10px); } 8.446%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nok-s3 { 0%, 8.446% { opacity: 0; } 8.595%, 10.842% { opacity: 1; } 10.916%, 100% { opacity: 0; } }
  @keyframes o-kart-s3 { 0%, 10.842% { opacity: 0; transform: translateY(12px); } 11.366%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nav-s3 { 0% { background: var(--secili); color: var(--secili-metin); font-weight: 600; } 21.249%, 100% { background: transparent; color: var(--yan-metin); font-weight: 500; } }
  @keyframes o-cip-s3 { 0% { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); } 21.249%, 100% { background: transparent; border-color: var(--so-cip-cizgi); color: var(--so-cip-metin); } }
  #r-oto:checked ~ .uyg .sahne-s3, #r-oto:checked ~ .uyg .ekran-s3 { display: block; animation: o-gor-s3 66.78s step-end -38.800s infinite; }
  #r-oto:checked ~ .uyg .yaz-s3 { display: block; animation: o-yaz-s3 66.78s step-end -38.800s infinite; }
  #r-oto:checked ~ .uyg .yaz-s3 i { animation: o-har 66.78s linear infinite; animation-delay: calc(var(--h) * 40ms + -38.400s); }
  #r-oto:checked ~ .uyg .bos-s3 { display: block; animation: o-bos-s3 66.78s step-end -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .m-kul { animation: o-kul-s3 66.78s ease-out -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .m-nokta { animation: o-nok-s3 66.78s linear -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .m-kart { animation: o-kart-s3 66.78s ease-out -38.800s infinite; }
  #r-oto:checked ~ .uyg .n-s3 { animation: o-nav-s3 66.78s step-end -38.800s infinite; }
  #r-oto:checked ~ .uyg .cip-s3 { animation: o-cip-s3 66.78s step-end -38.800s infinite; }
  @keyframes o-sat-s3 { 0%, 11.141% { opacity: 0; transform: translateX(14px); background: var(--sat-yeni); } 11.740%, 16.008% { opacity: 1; transform: none; background: var(--sat-yeni); } 16.307%, 100% { opacity: 1; transform: none; background: var(--sat-kayit); } }
  @keyframes o-bek-s3 { 0%, 16.008% { opacity: 1; } 16.083%, 100% { opacity: 0; } }
  @keyframes o-kay-s3 { 0%, 16.008% { opacity: 0; transform: rotate(var(--d-aci, 0deg)) scale(var(--d-olcek, 1)); } 16.307%, 100% { opacity: 1; transform: rotate(var(--d-aci, 0deg)) scale(1); } }
  @keyframes o-bas-s3 { 0%, 15.633% { transform: none; } 15.813% { transform: scale(0.95); } 16.008%, 100% { transform: none; } }
  @keyframes o-msg-s3 { 0%, 16.457% { opacity: 0; transform: translateY(6px); } 16.906%, 100% { opacity: 1; transform: none; } }
  #r-oto:checked ~ .uyg .ekran-s3 .yeni-sat td { animation: o-sat-s3 66.78s ease-out -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .bekliyor, #r-oto:checked ~ .uyg .ekran-s3 .bekliyor, #r-oto:checked ~ .uyg .sahne-s3 .m-onayla { display: inline-flex; animation: o-bek-s3 66.78s linear -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .kart-hedef { display: flex; animation: o-bek-s3 66.78s linear -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .kayitli, #r-oto:checked ~ .uyg .ekran-s3 .kayitli, #r-oto:checked ~ .uyg .sahne-s3 .m-geri { display: inline-flex; animation: o-kay-s3 66.78s linear -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .onay-dugme { display: inline-grid; pointer-events: none; animation: o-bas-s3 66.78s ease-out -38.800s infinite; }
  #r-oto:checked ~ .uyg .sahne-s3 .onay-dugme > span { grid-area: 1 / 1; justify-content: center; }
  #r-oto:checked ~ .uyg .sahne-s3 .m-kayit { display: flex; animation: o-msg-s3 66.78s ease-out -38.800s infinite; }
  .sahne-s4 .m-kul { animation: gir 300ms var(--giris) 5.06s both; }
  .sahne-s4 .m-nokta { animation: nok-tek 1600ms linear 5.36s both; }
  .sahne-s4 .m-kart { animation: gir 350ms var(--giris) 6.96s both; }
  .ekran-s4 .yeni-sat td { animation: sat-gir 400ms var(--giris) 7.16s both; }
  .ekran-s4 .zarar td { animation: zar-gir 400ms ease-out 7.16s both; }
  #r-s4:checked ~ .uyg .yaz-s4 { display: block; animation: gizle 1ms linear 5.06s forwards; }
  #r-s4:checked ~ .uyg .yaz-s4 i { animation: har 140ms linear forwards; animation-delay: calc(var(--h) * 40ms + 0.4s); }
  #r-s4:checked ~ .uyg .bos-s4 { opacity: 0; animation: goster 1ms linear 5.06s forwards; }
  #r-s4:checked ~ #onay-s4:checked ~ .uyg .sahne-s4 .m-kul, #r-s4:checked ~ #onay-s4:checked ~ .uyg .sahne-s4 .m-kart, #r-s4:checked ~ #onay-s4:checked ~ .uyg .ekran-s4 .yeni-sat td, #r-s4:checked ~ #onay-s4:checked ~ .uyg .bos-s4 { animation: none; opacity: 1; }
  #r-s4:checked ~ #onay-s4:checked ~ .uyg .sahne-s4 .m-nokta, #r-s4:checked ~ #onay-s4:checked ~ .uyg .yaz-s4 { display: none; }
  @keyframes o-gor-s4 { 0% { visibility: visible; } 20.830% { visibility: hidden; } 100% { visibility: hidden; } }
  @keyframes o-yaz-s4 { 0% { opacity: 1; } 7.577% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-bos-s4 { 0% { opacity: 0; } 7.577% { opacity: 1; } 20.830% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-kul-s4 { 0%, 7.577% { opacity: 0; transform: translateY(10px); } 8.026%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nok-s4 { 0%, 8.026% { opacity: 0; } 8.176%, 10.422% { opacity: 1; } 10.497%, 100% { opacity: 0; } }
  @keyframes o-kart-s4 { 0%, 10.422% { opacity: 0; transform: translateY(12px); } 10.946%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nav-s4 { 0% { background: var(--secili); color: var(--secili-metin); font-weight: 600; } 20.830%, 100% { background: transparent; color: var(--yan-metin); font-weight: 500; } }
  @keyframes o-cip-s4 { 0% { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); } 20.830%, 100% { background: transparent; border-color: var(--so-cip-cizgi); color: var(--so-cip-metin); } }
  #r-oto:checked ~ .uyg .sahne-s4, #r-oto:checked ~ .uyg .ekran-s4 { display: block; animation: o-gor-s4 66.78s step-end -24.610s infinite; }
  #r-oto:checked ~ .uyg .yaz-s4 { display: block; animation: o-yaz-s4 66.78s step-end -24.610s infinite; }
  #r-oto:checked ~ .uyg .yaz-s4 i { animation: o-har 66.78s linear infinite; animation-delay: calc(var(--h) * 40ms + -24.210s); }
  #r-oto:checked ~ .uyg .bos-s4 { display: block; animation: o-bos-s4 66.78s step-end -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .m-kul { animation: o-kul-s4 66.78s ease-out -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .m-nokta { animation: o-nok-s4 66.78s linear -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .m-kart { animation: o-kart-s4 66.78s ease-out -24.610s infinite; }
  #r-oto:checked ~ .uyg .n-s4 { animation: o-nav-s4 66.78s step-end -24.610s infinite; }
  #r-oto:checked ~ .uyg .cip-s4 { animation: o-cip-s4 66.78s step-end -24.610s infinite; }
  @keyframes o-sat-s4 { 0%, 10.722% { opacity: 0; transform: translateX(14px); background: var(--sat-yeni); } 11.321%, 15.588% { opacity: 1; transform: none; background: var(--sat-yeni); } 15.888%, 100% { opacity: 1; transform: none; background: var(--sat-kayit); } }
  @keyframes o-bek-s4 { 0%, 15.588% { opacity: 1; } 15.663%, 100% { opacity: 0; } }
  @keyframes o-kay-s4 { 0%, 15.588% { opacity: 0; transform: rotate(var(--d-aci, 0deg)) scale(var(--d-olcek, 1)); } 15.888%, 100% { opacity: 1; transform: rotate(var(--d-aci, 0deg)) scale(1); } }
  @keyframes o-bas-s4 { 0%, 15.214% { transform: none; } 15.394% { transform: scale(0.95); } 15.588%, 100% { transform: none; } }
  @keyframes o-msg-s4 { 0%, 16.038% { opacity: 0; transform: translateY(6px); } 16.487%, 100% { opacity: 1; transform: none; } }
  #r-oto:checked ~ .uyg .ekran-s4 .yeni-sat td { animation: o-sat-s4 66.78s ease-out -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .bekliyor, #r-oto:checked ~ .uyg .ekran-s4 .bekliyor, #r-oto:checked ~ .uyg .sahne-s4 .m-onayla { display: inline-flex; animation: o-bek-s4 66.78s linear -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .kart-hedef { display: flex; animation: o-bek-s4 66.78s linear -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .kayitli, #r-oto:checked ~ .uyg .ekran-s4 .kayitli, #r-oto:checked ~ .uyg .sahne-s4 .m-geri { display: inline-flex; animation: o-kay-s4 66.78s linear -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .onay-dugme { display: inline-grid; pointer-events: none; animation: o-bas-s4 66.78s ease-out -24.610s infinite; }
  #r-oto:checked ~ .uyg .sahne-s4 .onay-dugme > span { grid-area: 1 / 1; justify-content: center; }
  #r-oto:checked ~ .uyg .sahne-s4 .m-kayit { display: flex; animation: o-msg-s4 66.78s ease-out -24.610s infinite; }
  .sahne-s5 .m-kul { animation: gir 300ms var(--giris) 3.30s both; }
  .sahne-s5 .m-nokta { animation: nok-tek 1600ms linear 3.60s both; }
  .sahne-s5 .m-kart { animation: gir 350ms var(--giris) 5.20s both; }
  .ekran-s5 .yeni-sat td { animation: sat-gir 400ms var(--giris) 5.40s both; }
  .ekran-s5 .zarar td { animation: zar-gir 400ms ease-out 5.40s both; }
  #r-s5:checked ~ .uyg .yaz-s5 { display: block; animation: gizle 1ms linear 3.30s forwards; }
  #r-s5:checked ~ .uyg .yaz-s5 i { animation: har 140ms linear forwards; animation-delay: calc(var(--h) * 40ms + 0.4s); }
  #r-s5:checked ~ .uyg .bos-s5 { opacity: 0; animation: goster 1ms linear 3.30s forwards; }
  @keyframes o-gor-s5 { 0% { visibility: visible; } 16.023% { visibility: hidden; } 100% { visibility: hidden; } }
  @keyframes o-yaz-s5 { 0% { opacity: 1; } 4.942% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-bos-s5 { 0% { opacity: 0; } 4.942% { opacity: 1; } 16.023% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes o-kul-s5 { 0%, 4.942% { opacity: 0; transform: translateY(10px); } 5.391%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nok-s5 { 0%, 5.391% { opacity: 0; } 5.541%, 7.787% { opacity: 1; } 7.862%, 100% { opacity: 0; } }
  @keyframes o-kart-s5 { 0%, 7.787% { opacity: 0; transform: translateY(12px); } 8.311%, 100% { opacity: 1; transform: none; } }
  @keyframes o-nav-s5 { 0% { background: var(--secili); color: var(--secili-metin); font-weight: 600; } 16.023%, 100% { background: transparent; color: var(--yan-metin); font-weight: 500; } }
  @keyframes o-cip-s5 { 0% { background: var(--so-cip-aktif); border-color: var(--so-cip-aktif); color: var(--so-cip-aktif-metin); } 16.023%, 100% { background: transparent; border-color: var(--so-cip-cizgi); color: var(--so-cip-metin); } }
  #r-oto:checked ~ .uyg .sahne-s5, #r-oto:checked ~ .uyg .ekran-s5 { display: block; animation: o-gor-s5 66.78s step-end -10.700s infinite; }
  #r-oto:checked ~ .uyg .yaz-s5 { display: block; animation: o-yaz-s5 66.78s step-end -10.700s infinite; }
  #r-oto:checked ~ .uyg .yaz-s5 i { animation: o-har 66.78s linear infinite; animation-delay: calc(var(--h) * 40ms + -10.300s); }
  #r-oto:checked ~ .uyg .bos-s5 { display: block; animation: o-bos-s5 66.78s step-end -10.700s infinite; }
  #r-oto:checked ~ .uyg .sahne-s5 .m-kul { animation: o-kul-s5 66.78s ease-out -10.700s infinite; }
  #r-oto:checked ~ .uyg .sahne-s5 .m-nokta { animation: o-nok-s5 66.78s linear -10.700s infinite; }
  #r-oto:checked ~ .uyg .sahne-s5 .m-kart { animation: o-kart-s5 66.78s ease-out -10.700s infinite; }
  #r-oto:checked ~ .uyg .n-s5 { animation: o-nav-s5 66.78s step-end -10.700s infinite; }
  #r-oto:checked ~ .uyg .cip-s5 { animation: o-cip-s5 66.78s step-end -10.700s infinite; }
  @keyframes o-zar-s5 { 0%, 8.086% { background: var(--sat-zemin); } 8.685%, 100% { background: var(--sat-zarar); } }
  #r-oto:checked ~ .uyg .ekran-s5 .zarar td { animation: o-zar-s5 66.78s ease-out -10.700s infinite; }
}
@media (max-width: 1500px) {
  .cip, .cip-kucuk { gap: 3px; padding-inline: 7px; font-size: var(--fs-13); }
}
@media (max-width: 1180px) {
  .uyg-uc { grid-template-columns: minmax(0, 1fr) minmax(440px, 46%); grid-template-areas: "ana sohbet"; }
  .uyg-yan { display: none; }
}
@media (max-width: 1000px) {
  .m-kart .alan { grid-template-columns: 78px minmax(0, 1fr) auto; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .so-ust { padding-block: var(--sp-2); }
  .so-giris { padding-block: var(--sp-3) var(--sp-2); }
  .sohbet .so-h1 { margin-block-end: var(--sp-2); font-size: 36px; }
  .m-asistan { display: none; }
  .m-kart .alan { padding-block: 2px; }
  .sohbet .s-dugme { min-block-size: 44px; }
  .onay-dugme.btn { min-block-size: 40px; }
}
@media (max-width: 860px) {
  .uyg-uc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "yan" "sohbet" "ana"; block-size: auto; min-block-size: 0; }
  .uyg-yan { display: block; padding: 0; border-inline-end: 0; border-block-end: 1px solid var(--yan-cizgi, var(--border)); }
  .yan-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .yan-nav .nav-item { flex-direction: column; justify-content: center; gap: 2px; min-block-size: 58px; padding: var(--sp-1) 2px; border-radius: 0; font-size: var(--fs-12); line-height: 1.15; text-align: center; }
  .so-ust, .so-giris, .so-akis, .so-alt { padding-inline: var(--sp-4); }
  .so-akis { display: block; overflow: visible; }
  .yaz { white-space: normal; }
  .kart-hedef .icon { transform: rotate(-90deg); }
  .cip, .cip-kucuk { min-block-size: 48px; padding-inline: var(--sp-3); }
  .uyg-ana { padding: var(--sp-4); }
  .ek-sayi { font-size: var(--fs-18); }
  .ek-stat > div { padding-inline: var(--sp-2); }
  .ekran .table th:nth-child(4), .ekran .table td:nth-child(4) { display: none; }
  .ekran tbody tr:nth-child(n+7) { display: none; }
  .ekran .table th, .ekran .table td { padding-inline: var(--sp-2); }
}

/* ---- Kocan gorunumu: kagit, kobalt murekkep, delik, nusha yigini, kase ---- */
.site-ana { --uyg-ust: var(--s-ust-h); --so-zemin: var(--s-zemin); --so-metin: var(--s-murekkep); --so-soluk: var(--s-soluk); --so-cizgi: var(--s-cizgi); --so-asistan: var(--s-kagit); --so-asistan-metin: var(--s-murekkep); --so-asistan-cizgi: var(--border); --so-kul: var(--brand); --so-kul-metin: var(--on-brand); --so-h1: var(--s-murekkep); --so-h1-2: var(--brand); --so-vurgu: var(--brand); --so-cip-cizgi: var(--border-strong); --so-cip-metin: var(--s-murekkep); --so-cip-aktif: var(--brand); --so-cip-aktif-metin: var(--on-brand); --so-yazi-zemin: var(--s-kagit); --so-yazi-cizgi: var(--brand); --so-yazi-metin: var(--brand); --so-yazi-soluk: var(--s-soluk); --so-gonder: var(--brand); --so-gonder-metin: var(--on-brand); --so-imlec: var(--brand); --so-nokta: var(--muted); --k-zemin: var(--s-kagit); --k-metin: var(--text); --sat-yeni: var(--brand-tint); --sat-kayit: var(--ok-soft); --sat-zarar: var(--danger-soft); --sat-zemin: transparent; --secili: var(--s-kagit); --secili-metin: var(--brand); --yan-metin: var(--text); --r-balon: var(--r-lg); --r-kuyruk: var(--r-xs); --so-avatar: var(--s-kagit); }
.uyg-bolum { background: var(--s-zemin); }
.sohbet { border-inline-end: 1px solid var(--s-cizgi); }
.so-avatar { border: 1px solid var(--s-cizgi); }
.uyg-yan { background: transparent; border-color: var(--s-cizgi); }
.uyg-ana { padding: 0 var(--sp-8) var(--sp-6); }
.ekranlar { padding: var(--sp-5) var(--sp-6) var(--sp-5) calc(var(--sp-6) + var(--sp-8)); background-color: var(--s-kagit); border: 1px solid var(--border); box-shadow: 6px 6px 0 -1px var(--brand-tint), 6px 6px 0 0 var(--border), 12px 12px 0 -1px var(--bg-inset), 12px 12px 0 0 var(--border); background-image: radial-gradient(circle at 20px 16px, var(--s-zemin) 6px, var(--border) 6px 7px, transparent 7.5px); background-size: 40px 32px; background-repeat: repeat-y; }
.ek-bas { padding-block-end: var(--sp-2); border-block-end: 2px solid var(--brand); }
.ek-ad { font-family: var(--s-font-baslik); font-size: 36px; font-weight: 600; line-height: 1; color: var(--brand); }
.ek-stat > div { background: transparent; border: 1px dashed var(--border-strong); border-radius: 0; }
.ek-sayi { font-family: var(--font-mono); font-size: var(--fs-20); font-weight: 500; color: var(--brand); }
.uyg-ana .table-wrap { background: transparent; border: 0; border-radius: 0; }
.ekran .table th { background: transparent; border-block-end: 1px solid var(--brand); color: var(--muted); font-size: var(--fs-13); }
.ekran .table td { border-block-end: 1px dashed var(--border-strong); color: var(--brand); font-family: var(--font-mono); font-size: var(--fs-13); }
.ekran .table td .st { font-family: var(--font-ui); }
.ekran .yeni-sat .kayitli { border: 2px solid var(--ok-text); background: transparent; transform: rotate(-2deg); }
.m-kart { position: relative; padding-block-start: calc(var(--sp-3) + 12px); border: 1px solid var(--border); background-image: radial-gradient(circle at 12px 6px, var(--s-zemin) 4px, var(--border) 4px 5px, transparent 5.5px); background-size: 24px 12px; background-repeat: repeat-x; }
.kart-ad { font-family: var(--s-font-baslik); font-size: var(--fs-24); font-weight: 600; line-height: 1; color: var(--brand); }
.m-kart .alan { border-block-start: 1px dashed var(--border-strong); }
.m-kart .deger { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 500; color: var(--brand); }
.m-kart .kayitli { --d-aci: -7deg; --d-olcek: 1.7; position: absolute; inset-block-end: var(--sp-3); inset-inline-end: var(--sp-5); padding: var(--sp-1) var(--sp-3); border: 3px solid var(--ok-text); border-radius: var(--r-sm); background: var(--s-kagit); font-family: var(--s-font-baslik); font-size: var(--fs-22); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ok-text); transform: rotate(-7deg); }
.m-kart .kayitli .icon { display: none; }
.m-kart { overflow: hidden; }
@media (min-width: 861px) and (max-height: 820px) {
  .m-kart { padding-block: calc(var(--sp-2) + 10px) var(--sp-2); background-size: 24px 10px; }
  .kart-bas { margin-block-end: var(--sp-1); }
}
@media (min-width: 861px) {
  .uyg-uc { grid-template-columns: minmax(460px, 40%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "sohbet yan" "sohbet ana"; }
  .uyg-yan { display: block; padding: var(--sp-4) var(--sp-8) 0; border: 0; overflow: hidden; }
  .yan-nav { flex-direction: row; gap: 2px; }
  .yan-nav .nav-item { gap: var(--sp-2); padding-inline: var(--sp-3); border: 1px solid var(--border); border-block-end: 0; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--bg-subtle); white-space: nowrap; }
  .yan-nav .nav-item .icon { color: inherit; }
}
@media (max-width: 860px) {
  .uyg-yan { background: var(--s-kagit); }
  .uyg-ana { padding: var(--sp-4); }
  .ekranlar { padding: var(--sp-4) var(--sp-3) var(--sp-4) var(--sp-8); background-image: radial-gradient(circle at 14px 16px, var(--s-zemin) 5px, var(--border) 5px 6px, transparent 6.5px); background-size: 28px 32px; box-shadow: 4px 4px 0 -1px var(--brand-tint), 4px 4px 0 0 var(--border); }
  .ek-stat { gap: var(--sp-1); }
  .ekran .table th:nth-child(1), .ekran .table td:nth-child(1) { padding-inline-start: 0; }
  .ekran .table td { font-size: var(--fs-12); }
  .ekran .table td .st .icon { display: none; }
  .ek-sayi { font-size: var(--fs-16); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes damga { from { opacity: 0; transform: rotate(-7deg) scale(1.7); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
  .m-kart .kayitli { animation: damga 260ms var(--giris) both; }
}