/* Tek ortak çerez kartı: temanın açık yüzeyi, düğmesi ve renk değişkenleri. */
.cerez {
  position: fixed; z-index: 400; inset-inline-start: 16px; inset-block-end: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  inline-size: min(560px, calc(100% - 32px)); box-sizing: border-box; padding: 18px;
  background: #fff; color: var(--op-metin, var(--metin, #263b35)); border: 1px solid var(--op-cizgi, var(--cizgi, #dfe7e3));
  border-radius: var(--op-yaricap, var(--r, var(--yaricap, 18px))); box-shadow: 0 12px 40px -12px rgb(25 50 40 / .2);
  font-family: inherit; font-size: 14px; line-height: 1.55; animation: cerez-belir 220ms ease-out both;
}
.cerez[hidden] { display: none; }
.cerez .cerez-ikon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--op-ana-acik, var(--ana-acik, #e9f4ef)); color: var(--op-ana-metin, var(--ana-metin, var(--ana, #08674d))); }
.cerez .cerez-ikon svg { inline-size: 24px; block-size: 24px; margin: 0; }
.cerez .cerez-metin { margin: 0; padding: 0; min-inline-size: 0; color: inherit; font: inherit; overflow-wrap: anywhere; }
.cerez .cerez-metin a { display: inline; color: var(--op-ana-metin, var(--ana-metin, var(--ana-yazi, var(--ana, #08674d))));
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: normal; }
.cerez .cerez-tamam { --h: 42px; min-block-size: 42px; block-size: auto; min-inline-size: 80px; inline-size: auto; margin: 0;
  padding: 10px 18px; border-radius: var(--op-yaricap-kucuk, var(--r-k, 10px)); font: inherit; font-weight: 700; line-height: 1.4;
  background: var(--op-ana, var(--ana, #087a5a)); color: var(--op-ana-uzeri, var(--ana-uzeri, var(--ana-ustu, #fff)));
  border: 1px solid transparent; cursor: pointer; }
.cerez :is(.cerez-tamam, a):focus-visible { outline: 3px solid var(--op-ana-metin, var(--ana, #08674d)); outline-offset: 3px; }
.cerez.cerez-kapaniyor { animation: cerez-kaybol 160ms ease-in both; pointer-events: none; }
@keyframes cerez-belir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cerez-kaybol { to { opacity: 0; transform: translateY(6px); } }
@media (max-width: 600px) {
  .cerez { inset-inline: 12px; inline-size: auto; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px;
    inset-block-end: max(var(--cerez-alt-bosluk, calc(var(--tk-alt-cubuk, var(--alt-eylem, 0px)) + 76px)), calc(12px + env(safe-area-inset-bottom, 0px))); }
  .cerez .cerez-tamam { grid-column: 1 / -1; inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cerez, .cerez.cerez-kapaniyor { animation: none; } }
@media print { .cerez { display: none !important; } }