/* =====================================================================
   TAVERNA KAPSAMI (.theme-taverna) — yalnızca Ravenland Taverna sayfası ve
   ana sayfadaki Taverna bölümü. Kurumsal taban (site.css) dışına taşmaz:
   her kural bu sınıfın altında. Taş duvar, kereste, serif başlık, köz rengi,
   mum ve okey masası burada yaşar.
   ===================================================================== */
.theme-taverna {
  --ink-1000: #090908; --ink-950: #0e0e0d; --ink-900: #1b1b19; --ink-850: #222220; --ink-800: #292927; --ink-700: #353532; --ink-600: #3b3b37; --ink-500: #55544e;
  --cream: #f4efe6; --txt: #ece8df; --dim: #b4b0a6; --mute: #8b877d;
  --ac: #e7a15a;
  --ac-soft: color-mix(in srgb, var(--ac) 16%, transparent);
  --ac-line: color-mix(in srgb, var(--ac) 38%, transparent);
  --ac-glow: color-mix(in srgb, var(--ac) 24%, transparent);
  --bg: #1b1b19; --surface: rgba(255, 255, 255, .035); --surface-2: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --f-display: var(--f-serif); --f-label: var(--f-mono);
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --sh-glow: 0 0 0 1px var(--ac-line), 0 22px 44px -24px rgba(0, 0, 0, .8);
  position: relative; isolation: isolate; color: var(--txt);
}
/* Taş duvar */
.theme-taverna::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; transition: filter 1.4s var(--ease-out);
  background: radial-gradient(120% 60% at 50% 0%, transparent 35%, rgba(0, 0, 0, .5) 100%), url("../img/tas-duvar.svg") 0 0 / 360px 240px, var(--bg); }
/* Ocağın alt ışığı: yalnızca bu bölümün içinde, hafif titrer */
.theme-taverna::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%, rgba(231, 161, 90, .1), rgba(231, 161, 90, .035) 55%, transparent 100%); animation: hearth 7s var(--ease-in-out) infinite alternate; transition: opacity 1.4s var(--ease-out); }
@keyframes hearth { 0% { opacity: .7; } 35% { opacity: 1; } 60% { opacity: .8; } 100% { opacity: .95; } }
/* Ana sayfadaki bölüm: kenarları kurumsal zemine karışır */
.tav-zone::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); }
.tav-zone::after { bottom: 110px; }
/* Oyun sayfası: altlığa doğru solar */
main.theme-taverna::before { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); }
main.theme-taverna::after { bottom: 60px; }
/* Mum söndüğünde oda kararır (yalnız bu bölümde) */
html.dark-room .tav-zone::before { filter: brightness(.38); }
html.dark-room .tav-zone::after { opacity: .15; animation: none; }

/* Kurumsal bileşenlerin taverna sürümü */
.theme-taverna .btn { border-radius: var(--r-pill); padding: 14px 24px; }
.theme-taverna .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); translate: -120% 0; transition: translate var(--dur-4) var(--ease-out); }
.theme-taverna .btn:hover::before { translate: 120% 0; }
.theme-taverna .btn:hover { border-color: var(--ac-line); background: var(--b-bg); box-shadow: 0 10px 34px -10px var(--ac-glow); }
.theme-taverna .btn--p:hover { --b-bg: #fff; border-color: #fff; box-shadow: 0 12px 40px -8px var(--ac-glow); }
.theme-taverna .btn--g:hover { background: transparent; }
.theme-taverna .btn--ac { --b-bg: var(--ac); --b-fg: var(--ink-1000); --b-bd: var(--ac); }
.theme-taverna .btn--sm { padding: 10px 18px; }
.theme-taverna .eyebrow { font: 500 var(--fs-xs)/1 var(--f-mono); letter-spacing: .16em; color: var(--ac); }
.theme-taverna .eyebrow::before { width: 7px; height: 7px; rotate: 45deg; background: currentColor; box-shadow: 0 0 12px currentColor; opacity: 1; }
.theme-taverna .tag, .theme-taverna .st { border-radius: var(--r-pill); }
.theme-taverna .chip { border-radius: var(--r-pill); }
.theme-taverna .st { border-color: var(--ac-line); }
.theme-taverna .st > i { background: var(--ac); box-shadow: 0 0 10px var(--ac); }
.theme-taverna .st.live > i { background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.theme-taverna .card { border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.theme-taverna .card:hover { border-color: var(--ac-line); }
.theme-taverna .gcard { border-radius: var(--r-xl); }
/* Demir perçinler */
.theme-taverna .card::before, .theme-taverna .gcard::before { content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 2; opacity: .75; --rv: radial-gradient(circle, #8d8a82 0 1.6px, rgba(0, 0, 0, .6) 2.2px, transparent 3px);
  background: var(--rv) left top / 8px 8px no-repeat, var(--rv) right top / 8px 8px no-repeat, var(--rv) left bottom / 8px 8px no-repeat, var(--rv) right bottom / 8px 8px no-repeat; }
.theme-taverna .stat .n { font-weight: 800; background: linear-gradient(180deg, var(--cream), var(--ac)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.theme-taverna .val .no { font: 800 clamp(3rem, 6vw, 5rem)/.9 var(--f-display); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px var(--ac-line); transition: color var(--dur-3); }
.theme-taverna .val:hover .no { color: var(--ac-soft); }
.theme-taverna .phead::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, var(--bg) 100%); }
.theme-taverna .sec--panel { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .025) 18%, rgba(255, 255, 255, .025) 82%, transparent); }

/* Ana sayfa: Taverna öne çıkan bölüm */
.tav-zone .sec { position: relative; }
.tav-zone h2 { font-size: var(--fs-3xl); }
/* Taverna odağı */
.tavf { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .tavf { grid-template-columns: 1fr 1.05fr; align-items: center; gap: var(--s-8); } }
.tavf-t { display: grid; gap: var(--s-5); align-content: start; }
.tavf-t .sh-l { color: var(--dim); font-size: var(--fs-lg); }
.tav-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.tav-pts li { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-left: 3px solid var(--ac); border-radius: var(--r-md); background: var(--surface); }
.tav-pts b { font: 700 var(--fs-md) var(--f-display); }
.tav-pts span { color: var(--dim); font-size: var(--fs-sm); }
.tavf-m { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.tavf-m figure { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ac-line); background: var(--ink-1000); }
.tavf-m .m1 { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.tavf-m .m2, .tavf-m .m3 { aspect-ratio: 1; }
.tavf-m img { width: 100%; height: 100%; object-fit: cover; }
.tavf-m .m1 img { height: 112%; }
.tavf-m figcaption { position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 4px 10px; border-radius: var(--r-pill); background: rgba(12, 12, 11, .72); backdrop-filter: blur(6px); font: 500 var(--fs-2xs) var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.tavf-m .m-lab { grid-column: 1 / -1; font: 400 var(--fs-2xs) var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }


/* ---------- Masa: küçük bir deneme ---------- */
.masa-w { display: grid; gap: var(--s-7); }
@media (min-width: 1000px) { .masa-w { grid-template-columns: .8fr 1.2fr; align-items: center; gap: var(--s-8); } }
.masa-t { display: grid; gap: var(--s-4); align-content: start; }
.masa-t .sh-l { color: var(--dim); font-size: var(--fs-lg); }
.masa-res { min-height: 3.2em; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--ac); background: rgba(231, 161, 90, .07); color: var(--cream); border-radius: 0 var(--r-md) var(--r-md) 0; }
.masa-hint { color: var(--mute); font-size: var(--fs-sm); }
.masa { display: grid; gap: var(--s-4); position: relative; }
.masa-bd { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid #4a4237; background:
  repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 118px),
  repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
  linear-gradient(180deg, #3a332b, #2a2520); box-shadow: inset 0 0 70px rgba(0, 0, 0, .55), var(--sh-3); }
.masa-bd .fb { width: 100%; height: 100%; object-fit: cover; }
.rack { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #5b4b39, #46392b); border-top: 3px solid #6c5a45; box-shadow: 0 -10px 24px rgba(0, 0, 0, .35), inset 0 6px 10px rgba(0, 0, 0, .35); }
.tile { position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); padding: 0; border: 0; background: none; perspective: 500px; transition: transform .7s cubic-bezier(.2, .8, .25, 1), opacity .4s, translate .35s var(--ease-spring); cursor: pointer; will-change: transform; }
.tile .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.tile.up .in { transform: rotateY(180deg); }
.tile .bk, .tile .ft { position: absolute; inset: 0; border-radius: 5px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tile .bk { background: linear-gradient(145deg, #c9bda6, #a89b82); box-shadow: 0 2px 0 #7b6f5a, 0 5px 7px rgba(0, 0, 0, .5); }
.tile .bk::after { content: ""; position: absolute; inset: 5px; border-radius: 3px; border: 1px solid rgba(60, 50, 35, .35); }
.tile .ft { transform: rotateY(180deg); background: linear-gradient(160deg, #f3ecda, #ddd2b8); box-shadow: 0 2px 0 #9b8f77, 0 5px 7px rgba(0, 0, 0, .5); display: grid; place-items: center; align-content: center; gap: 2px; }
.tile .ft b { font: 700 calc(var(--tw) * .56) / 1 var(--f-display); color: var(--tc); }
.tile .ft i { width: calc(var(--tw) * .2); height: calc(var(--tw) * .2); border-radius: 50%; border: 2px solid var(--tc); }
.c-k { --tc: #c0392f; } .c-m { --tc: #2d62b6; } .c-s { --tc: #1f1d1a; } .c-y { --tc: #c88a10; }
.tile:not(.up):hover, .tile:not(.up):focus-visible { translate: 0 -5px; }
.tile.rest { opacity: .35; pointer-events: none; }
.tile.per { translate: 0 -9px; }
.tile.per .ft { box-shadow: 0 0 0 2px var(--ac), 0 8px 14px rgba(0, 0, 0, .5); }
.masa-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.masa-ctl .btn { min-height: 44px; }
.masa-ctl .dice { display: inline-flex; gap: 8px; margin-inline: 4px; }
.masa-ctl .dres { font: 500 var(--fs-xs) var(--f-mono); color: var(--dim); min-width: 12ch; }
.die { position: relative; width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(150deg, #f3ecda, #d8ccb0); box-shadow: 0 2px 0 #8d8168, 0 5px 8px rgba(0, 0, 0, .45); display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px; }
.die i { width: 6px; height: 6px; border-radius: 50%; background: #2a2520; margin: auto; opacity: 0; }
.die[data-v="1"] i:is(:nth-child(5)) { opacity: 1; }
.die[data-v="2"] i:is(:nth-child(1),:nth-child(9)) { opacity: 1; }
.die[data-v="3"] i:is(:nth-child(1),:nth-child(5),:nth-child(9)) { opacity: 1; }
.die[data-v="4"] i:is(:nth-child(1),:nth-child(3),:nth-child(7),:nth-child(9)) { opacity: 1; }
.die[data-v="5"] i:is(:nth-child(1),:nth-child(3),:nth-child(5),:nth-child(7),:nth-child(9)) { opacity: 1; }
.die[data-v="6"] i:is(:nth-child(1),:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(9)) { opacity: 1; }
.die.roll { animation: roll .35s linear infinite; }
@keyframes roll { 0% { transform: rotate(0) translateY(0); } 25% { transform: rotate(40deg) translateY(-8px); } 50% { transform: rotate(80deg) translateY(0); } 75% { transform: rotate(-20deg) translateY(-5px); } 100% { transform: rotate(0) translateY(0); } }
.candle { position: absolute; right: 16px; top: 10px; z-index: 40; width: 40px; height: 74px; padding: 0; border: 0; background: none; cursor: pointer; }
.candle .wax { position: absolute; left: 9px; bottom: 0; width: 22px; height: 40px; border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, #cfc6b3, #efe8d6 45%, #b9af9a); box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }
.candle .wick { position: absolute; left: 19px; bottom: 40px; width: 2px; height: 7px; background: #231f1a; }
.candle .flame { position: absolute; left: 14px; bottom: 45px; width: 12px; height: 24px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 75%, #fff4c9 0 18%, #ffcb73 40%, #e7a15a 70%, rgba(231, 111, 40, 0) 100%); box-shadow: 0 0 14px 4px rgba(231, 161, 90, .4); transform-origin: 50% 90%; animation: flick 1.1s ease-in-out infinite alternate; transition: opacity .25s, scale .3s; }
@keyframes flick { 0% { transform: scale(1, 1) rotate(-2deg); } 30% { transform: scale(.94, 1.06) rotate(1.5deg); } 60% { transform: scale(1.04, .95) rotate(-1deg); } 100% { transform: scale(.97, 1.04) rotate(2deg); } }
.candle.out .flame { opacity: 0; scale: .2; animation: none; }
.candle .smoke { position: absolute; left: 18px; bottom: 46px; width: 4px; height: 26px; border-radius: 50%; background: linear-gradient(0deg, rgba(200, 196, 188, .6), transparent); opacity: 0; }
.candle.puff .smoke { animation: wisp 2.2s ease-out forwards; }
@keyframes wisp { 0% { opacity: .8; transform: translate(0, 0) scale(1, .4); } 50% { opacity: .5; transform: translate(4px, -22px) scale(2, 1.2); } 100% { opacity: 0; transform: translate(-3px, -48px) scale(3, 1.6); } }
.candle:focus-visible, .tile:focus-visible, .btn:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
html.dark-room .tav-zone .masa-bd { box-shadow: inset 0 0 90px rgba(0, 0, 0, .7), var(--sh-3); }
@media (prefers-reduced-motion: reduce) {
  .tile, .tile .in { transition: none !important; }
  .candle .flame, .die.roll, .candle.puff .smoke { animation: none !important; }
}
.sr-only-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tavf-m video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tavf-m .m2 img, .tavf-m .m3 img { height: 100%; }
.tavf-m .m1 { aspect-ratio: 16 / 9; }
.tavf-m .m1 video { height: 100%; }