/* =========================================================================
   BY-RIZA/1 — ortak rıza (consent) bileşeni · görünüm
   Sözleşme: PROTOKOL-OLCUM.md § 2.6

   BU DOSYA BAĞIMSIZDIR. Sitenin tema değişkenlerine (--turuncu, --krem,
   --govde-yazi …) hiç dokunmaz; paket başka bir kiracıya olduğu gibi
   kopyalanacak ve oradaki değişken adları farklı. Kendi --by-riza-*
   kümesini tanımlar, tek dış bağımlılığı yoktur.

   Tersi de geçerli: burada tanımlanan her şey `.by-riza` altında kalır,
   sitenin hiçbir öğesini etkilemez.

   Ev sahibi sitenin genel kuralları (`button { … }`, `p { margin: 1.5em }`)
   bizim kutunun içine SIZAR. Bu yüzden düğme/paragraf/başlık özellikleri
   "gereksiz yere" açık açık yazılır: kalıtıma güvenmek, paketi kopyalanan
   her sitede farklı görünmeye mahkûm ederdi.

   ÖLÇÜLER `rem` DEĞİL `px`. `rem`, ev sahibi sitenin <html> yazı boyuna
   bağlıdır; `html { font-size: 62.5% }` kestirmesini kullanan bir kiracıda
   (yaygın bir eski alışkanlık) kutu üçte iki boyunda çizilirdi. Kendi
   ölçeğimizi kendimiz taşırız.
   ========================================================================= */

.by-riza {
  /* --- palet: AÇIK kip --- */
  --by-riza-zem:            #FFFFFF;
  --by-riza-zem-2:          #F4F6F9;
  --by-riza-yazi:           #141B25;
  --by-riza-yazi-2:         #55606F;
  --by-riza-cizgi:          #E4E8EF;
  --by-riza-cizgi-kuvvetli: #141B25;

  /* İKİ DÜĞME, EŞİT AĞIRLIK. Kabul koyu mürekkep, Reddet açık taş — ikisi de
     DOLGULU, ikisi de yüksek kontrastlı (mürekkep üzerine beyaz 15.8:1,
     taş üzerine mürekkep 12.4:1), ikisi de aynı ölçüde. Fark yalnız renk.
     Reddet'i soluk gri ya da çerçevesiz yapmak, seçeneği sunmuş görünüp
     fiilen caydırmaktır. */
  --by-riza-kabul-zem:      #141B25;
  --by-riza-kabul-yazi:     #FFFFFF;
  --by-riza-ret-zem:        #EDF0F5;
  --by-riza-ret-yazi:       #141B25;
  --by-riza-ret-cizgi:      #D3D9E3;

  --by-riza-odak:           #2563EB;

  /* Üstte ince bir ışık, altta derin ve yumuşak bir gölge: kutu sayfanın
     üstünde "duruyor" görünür, üstüne yapışmış değil. */
  --by-riza-golge:          0 -1px 0 rgba(255, 255, 255, .7) inset,
                            0 -4px 16px rgba(20, 27, 37, .05),
                            0 18px 50px -12px rgba(20, 27, 37, .28);

  --by-riza-r:              18px;
  --by-riza-r-k:            11px;

  /* Tek "ayarlanabilir" değişken. Site kendi yazı tipini dayatmak isterse
     :root üzerinde bunu ezer; ezmezse sistem yığını ile her yerde okunur
     bir sonuç çıkar. Sitenin gövde yazı tipini varsayılan yapmadık, çünkü
     o değişkenin adı kiracıdan kiracıya değişiyor. */
  --by-riza-yazi-tipi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       "Helvetica Neue", Arial, sans-serif;

  /* Sitelerin üst barı çoğunlukla 1000–9999 aralığında. Rıza kutusu her
     şeyin üstünde olmak zorunda: altında kalırsa karar verilemez. */
  z-index: 2147483000;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: clamp(10px, 2.2vw, 22px);
  margin: 0;

  /* Şerit tüm genişliği kaplar ama tıklamayı YUTMAZ: kutu modal değil,
     altındaki sayfa kullanılabilir kalmalı. */
  pointer-events: none;

  font-family: var(--by-riza-yazi-tipi);
  font-size: 15px;
  line-height: 1.55;
  color: var(--by-riza-yazi);
  text-align: left;
  box-sizing: border-box;
}

/* display:flex, [hidden]'ı ezer — bu satır olmadan kutu gizlenmez. */
.by-riza[hidden] { display: none !important; }

.by-riza *,
.by-riza *::before,
.by-riza *::after { box-sizing: border-box; }

/* Ev sahibi `button { opacity: .5 }` gibi bir kural yazdığında düğmelerimiz
   soluklaşıyordu — ölçüldü, sızıyor. Bu, sözleşmenin "Reddet soluk olamaz"
   maddesini doğrudan çiğner; üstelik `button:not(.birincil)` biçiminde bir
   kural yalnız Reddet'i soluklaştırıp Kabul'ü parlak bırakabilir.
   Sıfırlama kutunun İÇİNE uygulanır, kutunun kendisine değil: giriş
   animasyonu opaklığı 0'dan 1'e getiriyor, onu ezmemeli. */
.by-riza__kutu * { opacity: 1; }

.by-riza__kutu {
  pointer-events: auto;
  width: 100%;
  max-width: 672px;
  background: var(--by-riza-zem);
  color: var(--by-riza-yazi);
  border: 1px solid var(--by-riza-cizgi);
  border-radius: var(--by-riza-r);
  box-shadow: var(--by-riza-golge);
  padding: clamp(16px, 2.6vw, 24px);
  max-height: 84vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: by-riza-gir .26s ease-out both;
}

.by-riza__kutu:focus { outline: none; }
.by-riza__kutu:focus-visible {
  outline: 3px solid var(--by-riza-odak);
  outline-offset: 3px;
}

/* Başlık simgeyle aynı satırda. Simge süs değil: kutunun ne hakkında
   olduğunu okumadan önce söyler ve metin bloğunu yumuşatır. */
.by-riza__baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 0;
  font-family: inherit;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--by-riza-yazi);
}

.by-riza__simge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--by-riza-zem-2);
  color: var(--by-riza-yazi);
}

.by-riza__simge svg {
  width: 19px;
  height: 19px;
  display: block;
}

.by-riza__metin {
  margin: 0;
  padding: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--by-riza-yazi-2);
  text-wrap: pretty;
}

/* --- düğmeler ------------------------------------------------------------ */

.by-riza__dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.by-riza__dugme {
  flex: 1 1 152px;
  min-width: 152px;
  margin: 0;
  padding: 11px 18px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-decoration: none;

  border: 1.5px solid transparent;
  border-radius: var(--by-riza-r-k);
  box-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: filter .15s ease, background-color .15s ease;

  /* Eşitliği bozabilecek ev sahibi kurallarına karşı sıfırlama. Bunlar
     "her ihtimale karşı" değil: ikisinden birini küçülten, soluklaştıran ya
     da griye çeviren tek bir dış kural, bileşenin tek sert kuralını
     sessizce geçersiz kılardı. */
  opacity: 1;
  filter: none;
  transform: none;
  max-width: none;
  min-height: 0;
}

.by-riza__dugme:focus { outline: none; }
.by-riza__dugme:focus-visible {
  outline: 3px solid var(--by-riza-odak);
  outline-offset: 2px;
}
.by-riza__dugme:hover { filter: brightness(1.08); }
.by-riza__dugme:active { filter: brightness(.94); }

.by-riza__dugme--kabul {
  background: var(--by-riza-kabul-zem);
  border-color: var(--by-riza-kabul-zem);
  color: var(--by-riza-kabul-yazi);
}

/* "Reddet" DOLGULU kalır, ana hat değil. İki düğme de dolgu, aynı geometri,
   aynı yazı kalınlığı; fark yalnız renktedir. Reddet'i ana hatlı yapmak
   "ikincil eylem" görüntüsü verirdi ve o görüntü, ret seçeneğini biçimsel
   olarak sunup fiilen caydırmaktır. */
.by-riza__dugme--ret {
  background: var(--by-riza-ret-zem);
  border-color: var(--by-riza-ret-cizgi);
  color: var(--by-riza-ret-yazi);
}

/* --- dar ekran ----------------------------------------------------------- */

@media (max-width: 480px) {
  .by-riza { padding: 0; }
  .by-riza__kutu {
    max-width: none;
    border-width: 1px 0 0;
    border-radius: var(--by-riza-r) var(--by-riza-r) 0 0;
    max-height: 88vh;
  }
  /* Telefonda iki düğme yan yana 152px'e sığmaz; alt alta ikisi de tam
     genişlikte, yani yine eşit. */
  .by-riza__dugme { flex: 1 1 100%; }
}

/* --- karanlik kip --------------------------------------------------------
   Site kendi karanlık kipini `data-*` ya da sınıfla yönetiyor olabilir ama
   o sözleşmeyi bilmiyoruz (paket taşınabilir). Tek güvenilir sinyal
   işletim sistemi tercihi. */

@media (prefers-color-scheme: dark) {
  .by-riza {
    --by-riza-zem:            #171D26;
    --by-riza-zem-2:          #1F2731;
    --by-riza-yazi:           #E9EDF3;
    --by-riza-yazi-2:         #B2BDCC;
    --by-riza-cizgi:          #333D4B;
    --by-riza-cizgi-kuvvetli: #E9EDF3;

    --by-riza-kabul-zem:      #E9EDF3;
    --by-riza-kabul-yazi:     #141B25;
    --by-riza-ret-zem:        #2A3340;
    --by-riza-ret-yazi:       #E9EDF3;
    --by-riza-ret-cizgi:      #3A4453;

    --by-riza-odak:           #7AABFF;
    --by-riza-golge:          0 -2px 10px rgba(0, 0, 0, .3), 0 14px 44px rgba(0, 0, 0, .5);
  }

  .by-riza__dugme:hover { filter: brightness(1.14); }
}

/* --- hareket ve kontrast tercihleri --------------------------------------
   Giriş animasyonu `.by-riza__kutu` bloğunda tanımlı; kutu her yeniden
   gösterildiğinde (ör. altbilgiden ac()) baştan oynar, çünkü display
   değişimi animasyonu yeniden başlatır. İstenen davranış budur. */

@keyframes by-riza-gir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .by-riza__kutu { animation: none; }
  .by-riza__dugme { transition: none; }
}

/* Yüksek kontrast / zorunlu renk kiplerinde kendi paletimiz yok sayılır;
   düğmelerin birbirinden ayrılması kenarlıkla sürer. Bu kipte `filter` ile
   vurgu da işlemez, o yüzden kaldırılır. */
@media (forced-colors: active) {
  .by-riza__kutu { border: 1px solid CanvasText; }
  .by-riza__dugme {
    border: 1.5px solid ButtonText;
    forced-color-adjust: auto;
  }
  .by-riza__dugme:hover,
  .by-riza__dugme:active { filter: none; }
  .by-riza__dugme:focus-visible { outline: 3px solid Highlight; }
}

/* Kâğıtta rıza kutusunun işi yok; çıktının üstünü kapatmasın. */
@media print {
  .by-riza { display: none !important; }
}