/* SMART360 SECURITY satir ici dogrulama blogu - yeni kabuk icin KOPYA.
   Kaynak: web/styles.css (s360-rozet .. s360-satir, basarisiz durumu dahil) ve
   partials/smart360-security.ejs + web/smart360-security.js (davranis ayni).
   Eski kabuk kalkinca tek kaynak bu dosya olur; o zamana dek iki yerde
   degistirilmeli. Yalniz formlu sayfada yuklenir. Eski degiskenler yeni
   renklere baglanir: */
/* --metin-silik koyulastirildi (2026-10-16): 11px durum metni %8 mor karisimli zeminde #6c6579 ile 4,9:1
   idi (AA sinirinda); #5a5366 ile 6,5:1. */
.s360-satir{--yuzey:#fff;--metin:#15111d;--metin-silik:#5a5366;--marka-koyu:#6b3fd4;--marka-gradyan:linear-gradient(135deg,#6b3fd4,#c8529b)}
.s360-rozet { position: relative; width: var(--s360-rozet, 64px); height: var(--s360-rozet, 64px); margin: 0 auto; flex: none; }
.s360-halka {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--marka-koyu, #8259D2);
  opacity: 0; animation: s360-yayil 2.4s ease-out infinite;
}
.s360-halka-gec { animation-delay: 1.2s; }
@keyframes s360-yayil {
  0%   { transform: scale(1);    opacity: .55 }
  70%  { transform: scale(1.55); opacity: 0 }
  100% { transform: scale(1.55); opacity: 0 }
}
.s360-daire {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--marka-gradyan, linear-gradient(135deg,#8259D2,#C2569A));
  box-shadow: 0 8px 22px -8px rgba(130,89,210,.65);
}
.s360-tik {
  stroke-dasharray: 14; stroke-dashoffset: 14;
  animation: s360-ciz 2.4s ease-in-out infinite;
}
@keyframes s360-ciz {
  0%,10%   { stroke-dashoffset: 14 }
  45%,70%  { stroke-dashoffset: 0 }
  95%,100% { stroke-dashoffset: 14 }
}
/* Hareket duyarliligi: halkalar durur, tik tam cizili kalir - gosterge
   bilgiyi SEKLIYLE tasiyor, hareketiyle degil. */
@media (prefers-reduced-motion: reduce) {
  .s360-halka { animation: none; opacity: .3 }
  .s360-tik { animation: none; stroke-dashoffset: 0 }
}

.s360-satir {
  margin: 4px 0 18px; padding: 14px 16px 16px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: color-mix(in srgb, var(--yuzey) 92%, var(--marka-koyu, #8259D2) 8%);
}
/* 🔴 `margin: 0 auto` BURADA SIFIRLANIYOR. `.s360-rozet` tek basina
   (perdede) ortalanmak icin auto kenar boslugu tasiyor; bir FLEX
   satirinin icinde ise auto bosluk TUM BOS ALANI EMER ve rozeti metinden
   ayirir - rozet solda, ad sagda, arada koca bir bosluk. Bunu React
   surumunde bir kez yasayip oraya not dusmustum (`SecurityRozeti`in
   `ortala` bayragi); duz CSS surumunde ayni tuzaga yeniden dustum. */
.s360-satir-bas { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 11px; }
.s360-satir-bas .s360-rozet { margin: 0; }
.s360-satir-ad { font-size: 13px; font-weight: 800; letter-spacing: -.01em; color: var(--metin); }
.s360-satir-ad span { color: var(--marka-koyu, #8259D2); }
/* Parcacik cizilmeden once `.cf-turnstile` 69px yer kapliyor (bos kutu
   tuzagi, bkz. `.s360-yuva`). Burada bu SORUN DEGIL: kutu zaten
   gorunmesi gereken yerde ve yuksekligi dogrulama gelene kadar bir
   yukleniyor alani gibi duruyor - kartin ortasinda aciklanamayan bir
   bosluk degil. O yuzden gizlenmiyor. */
.s360-satir .cf-turnstile { display: flex; justify-content: center; }
/* Parcacik gercekten cizilmediyse kutu HIC yer kaplamaz - bkz.
   smart360-security.js icindeki "bos kutu 69px" notu. */
.s360-satir.s360-parcaciksiz .cf-turnstile { height: 0; overflow: hidden; }
.s360-satir.s360-parcaciksiz .s360-satir-not { margin-top: 2px; }
.s360-satir-not { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--metin-silik); text-align: center; }

/* =====================================================================
   IKI DURUM: "doğrulanıyor" -> "doğrulandı"
   =====================================================================
   Kullanici karari (2026-09-21): "doğrulanana kadar pulse şeklinde
   loading versin, sonra animasyonlu biçimde tik gelsin... nabız dönerek
   loading biçiminde de olabilir."

   TASARIM: rozetin cevresinde DONEN bir tarama yayi + kalkanin kendi
   yavas nefesi. Yay, "bir sey su an calisiyor" demenin en okunakli
   yolu - disari acilan halkalardan farkli olarak BITMEYEN bir hareket
   degil, DONEN bir hareket: bekleme hissi veriyor, tamamlanma degil.

   Bittiginde yay SOLUYOR, kalkan kucuk bir pop yapiyor, tik BIR KEZ
   cizilip KALIYOR ve disari tek bir yesil dalga aciliyor. Yani hareket
   AZALARAK bitiyor - gozun "tamamlandi" diye okudugu sey bu.

   Ayrim hem HAREKETTE hem SEKILDE: hareketi kapatan bir kullanici
   (prefers-reduced-motion) da cizili tik'i gorur, bilgi kaybolmaz. */

/* Bekleme: disari acilan halkalar KAPALI - donen yay ile birlikte iki
   ayri hareket goz yorardi. Halkalar yalnizca onay dalgasinda kullanilir. */
.s360-satir .s360-halka { animation: none; opacity: 0; }

/* DONEN TARAMA YAYI. Konik gradyan + radyal maske = ince bir halka
   uzerinde kaybolan bir yay. `border-top-color` numarasindan daha
   yumusak; ucu sert kesilmiyor. */
.s360-satir .s360-rozet::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0turn, rgba(130,89,210,0) 0 52%,
                             var(--marka-koyu, #8259D2) 88%, rgba(130,89,210,0) 100%);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, #0000 calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: s360-donus 1.15s linear infinite;
}
.s360-satir .s360-daire { animation: s360-nefes 2.6s ease-in-out infinite; }
/* Tik bekleme durumunda CIZILMEZ. Perdedeki surekli yeniden cizen
   animasyon burada YANLIS olurdu: "kontrol ediliyor" degil, her birkac
   saniyede bir "tamamlandi" der gibi gorunurdu. */
.s360-satir .s360-tik { animation: none; stroke-dashoffset: 14; }

/* ONAYLANDI */
.s360-satir.s360-onayli .s360-rozet::before { animation: s360-yay-son .4s ease-out forwards; }
.s360-satir.s360-onayli .s360-daire { animation: s360-onay-pop .5s cubic-bezier(.2,1.5,.35,1) both; }
.s360-satir.s360-onayli .s360-tik { animation: s360-tik-ciz .45s .16s ease-out forwards; }
/* Tek seferlik onay dalgasi - marka moru degil YESIL: "guvenli" evrensel
   olarak yesil okunur ve bu, rengin TEK anlam tasidigi yer. */
.s360-satir.s360-onayli .s360-rozet::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid #2e9e5b; animation: s360-onay-dalga .9s .1s ease-out both;
}
@keyframes s360-donus   { to { transform: rotate(1turn) } }
@keyframes s360-yay-son { to { opacity: 0; transform: scale(1.12) } }
@keyframes s360-nefes   { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@keyframes s360-onay-pop { 0% { transform: scale(.86) } 100% { transform: scale(1) } }
@keyframes s360-tik-ciz  { to { stroke-dashoffset: 0 } }
@keyframes s360-onay-dalga {
  0%   { transform: scale(1);   opacity: .9 }
  100% { transform: scale(1.95); opacity: 0 }
}
/* Durum metni: ikisinden YALNIZCA biri gorunur. */
.s360-satir .s360-dur-tamam { display: none; }
.s360-satir.s360-onayli .s360-dur-bekle { display: none; }
.s360-satir.s360-onayli .s360-dur-tamam { display: inline; color: #2e7d4f; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .s360-satir .s360-rozet::before { animation: none; opacity: .5; }
  .s360-satir .s360-daire,
  .s360-satir.s360-onayli .s360-daire { animation: none; }
  .s360-satir.s360-onayli .s360-rozet::before { opacity: 0; }
  .s360-satir.s360-onayli .s360-tik { animation: none; stroke-dashoffset: 0; }
  .s360-satir.s360-onayli .s360-rozet::after { animation: none; opacity: 0; }
}

/* BASARISIZ - kullanici karari (2026-09-21): "Eğer güvenlik kontrolü
   olumsuz yanıt verirse Smart360 Security logosu X işaretiyle kırmızıya
   dönsün ve 'Güvenlik sorgusu başarısız' yazsın. Bu tüm sistemlerde
   böyle olacak." `error-callback` (bkz. smart360-security.ejs +
   smart360-security.js) tetikler; jeton gelirse geri alinir (js). */
.s360-satir.s360-basarisiz .s360-rozet::before { animation: none; opacity: 0; }
.s360-satir.s360-basarisiz .s360-daire {
  animation: none; background: #c0392b;
  box-shadow: 0 8px 22px -8px rgba(192,57,43,.55);
}
.s360-satir.s360-basarisiz .s360-daire svg { opacity: 0; }
/* Kalkan+tik SVG'si yerine X - ayri bir ikon indirmek yerine iki
   dondurulmus CSS cubugu, boylece basarisiz durum sadece rengi degil
   SEKLI de degistiriyor (kullanicinin tam istegi). */
.s360-satir.s360-basarisiz .s360-daire::before,
.s360-satir.s360-basarisiz .s360-daire::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46%; height: 2.4px; background: #fff; border-radius: 2px;
  transform-origin: center;
}
.s360-satir.s360-basarisiz .s360-daire::before { transform: translate(-50%, -50%) rotate(45deg); }
.s360-satir.s360-basarisiz .s360-daire::after { transform: translate(-50%, -50%) rotate(-45deg); }
.s360-satir.s360-basarisiz .s360-dur-bekle,
.s360-satir.s360-basarisiz .s360-dur-tamam { display: none; }
.s360-satir .s360-dur-basarisiz { display: none; }
.s360-satir.s360-basarisiz .s360-dur-basarisiz { display: inline; color: #c0392b; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .s360-satir.s360-basarisiz .s360-daire { animation: none; }
}
/* Rozet satir ici olcekte: halkalar `--s360-rozet` degiskeninden
   besleniyor, `.s360-daire` ise `span` olarak da calismali (perdede
   `div`). */
.s360-satir .s360-daire { display: grid; }
.cf-turnstile:focus-within,.cf-turnstile:focus{outline:2.5px solid var(--marka);outline-offset:3px;border-radius:8px}