/* 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(var(--cerez-alt-bosluk, 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 { visibility: hidden; opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cerez-kaybol { to { opacity: 0; transform: translateY(6px); } }
/* Levha kendi menüsünü kullanır; tm ortak menü katmanına geçirilene dek: katmansız temada (cerez-bildirimi.js kartı göstermeden
   önce html.tk-eski-yerlesim koyar) 29 Ekim öncesi telefon kartı aynen; aşağıdaki yeni telefon kartı yalnız katmanlı temalarda.
   :where() özgüllük katmaz. */
@media (max-width: 600px) {
  :where(html.tk-eski-yerlesim) .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))); }
  :where(html.tk-eski-yerlesim) .cerez .cerez-tamam { grid-column: 1 / -1; inline-size: 100%; }
}
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px){
  :where(html:not(.tk-eski-yerlesim)) .cerez { inset-inline: 12px; inline-size: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 10px 10px 14px; font-size: 13px; line-height: 1.45; border-radius: 14px; max-block-size: 34svh; overflow: auto; animation-delay: 700ms;
    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))); }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-ikon { display: none; }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-tamam { --h: 44px; min-block-size: 44px; padding: 0 16px; align-self: start; position: sticky; inset-block-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .cerez, .cerez.cerez-kapaniyor { animation: none; } }
@media print { .cerez { display: none !important; } }

:is(html.tk-menu-kilit, html.tk-kilitli).tk-menu-dar .cerez { visibility: hidden !important; pointer-events: none; }

/* Kart kapaninca son icerik icin ayrilan alan da kaldirilir. */
.cerez-son-bosluk { display: block; block-size: var(--cerez-son-bosluk, 0px); pointer-events: none; }

@media (max-width: 760px), (pointer: coarse) and (max-height: 520px){
  html.tk-cerez-son tk-ornek-rozet { bottom: var(--tk-cerez-gorunur-alan, 0px) !important; }
  html.tk-cerez-son .yd :is(.yd-paylas, .yd-sosyal) { bottom: max(var(--tk-cerez-gorunur-alan, 0px), var(--tk-rozet-ust, 0px)); }
}

/* Ortak sıra: alt çubuk, bildirim, ardından yüzen denetimler. */
html.tk-cerez-yerlesim .cerez { inset-block-end: max(var(--cerez-alt-bosluk, 12px), calc(12px + env(safe-area-inset-bottom, 0px))); }
html.tk-cerez-yerlesim tk-ornek-rozet { bottom: var(--tk-cerez-gorunur-alan, 0px) !important; transition: none !important; }
@media (max-width: 760px) and (max-height: 520px), (pointer: coarse) and (max-height: 520px){
  :where(html:not(.tk-eski-yerlesim)) .cerez { inset-inline: 12px; inline-size: auto; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.4; border-radius: 12px; overflow: visible; max-block-size: none; }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-ikon { display: none; }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-metin { display: flex; align-items: center; gap: 6px; min-inline-size: 0; white-space: nowrap; }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-aciklama { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-metin a { flex: 0 0 auto; white-space: nowrap; }
  :where(html:not(.tk-eski-yerlesim)) .cerez .cerez-tamam { --h: 44px; min-block-size: 44px; block-size: 44px; padding: 0 14px; align-self: center; position: static; }
}

/* Sayisal onbellek yerine gercek kutu bagi: yeni alt cubuk ilk karede de korunur. */
@supports (anchor-name: --tk-cerez-olcu) and (bottom: anchor(--tk-cerez-olcu top, 0px)) {
  html.tk-cerez-yerlesim.tk-cerez-ankraj .cerez { anchor-name: --tk-cerez-kart; inset-block-end: max(var(--cerez-ankraj-sabit, 12px), var(--cerez-cubuk-ankraj, 12px), calc(12px + env(safe-area-inset-bottom, 0px))); }
  html.tk-cerez-yerlesim.tk-cerez-ankraj tk-ornek-rozet { bottom: calc(anchor(--tk-cerez-kart top, 0px) + 12px) !important; }
  html.tk-cerez-yerlesim.tk-cerez-ankraj .yd-cerez-ustunde[data-yd] :is(.yd-paylas, .yd-sosyal) { bottom: calc(anchor(--tk-cerez-kart top, 0px) + 12px + var(--yd-cerez-ek, 0px)); }
}

/* Masaüstü (bant2 S3, 2026-10-31): demo rozeti (tk-ornek-rozet) kart görünürken kartın üstünde — cerez-bildirimi.js
   html.tk-cerez-rozet-ustte + --tk-cerez-rozet-alt (kartın alt boşluğu + yüksekliği + 12 px); temanın kendi yükseltmesi daha yüksekse o
   kalır. Kart kapanınca sınıf kalkar, rozet yerine döner. Telefon (≤ 760 px ya da dokunmatik kısa ekran) kuralları değişmez. */
html.tk-cerez-rozet-ustte tk-ornek-rozet { bottom: max(var(--tk-cerez-rozet-alt, 0px), calc(var(--tk-rozet-alt, 12px) + env(safe-area-inset-bottom, 0px))) !important; }
@media (max-width: 900px) {
  html.tk-cerez-rozet-ustte tk-ornek-rozet { bottom: max(var(--tk-cerez-rozet-alt, 0px), calc(max(calc(var(--tk-alt-cubuk, 72px) + 10px), calc(var(--tk-rozet-alt-mobil, var(--tk-rozet-alt, 12px)) + env(safe-area-inset-bottom, 0px))) + var(--tk-rozet-kaldir, 0px))) !important; }
}