/* ------------------------------------------------------------ Tahta
   İki tema: .tema-ahsap (gerçekçi oyma ahşap) ve .tema-modern (koyu, ışıklı).
   Taş renkleri oyuncuya göredir: data-o="0" → --tas-0, data-o="1" → --tas-1 */

.tahta {
  --tas-0: #d8402f;
  --tas-1: #2f78d4;
  --adim: 270ms;
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* dokunmatikte gecikme ve çift dokunuşla yakınlaşma olmasın */
  container-type: inline-size;
}
.tahta-govde {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr) clamp(10px, 3.2cqi, 34px) repeat(3, 1fr) 1.3fr;
  grid-template-rows: auto minmax(14px, auto) auto;
  column-gap: clamp(4px, 1.6cqi, 18px);
  row-gap: clamp(2px, .8cqi, 8px);
  padding: clamp(10px, 3cqi, 34px) clamp(10px, 2.6cqi, 30px);
}

.kuyu, .hazine {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  z-index: 1;
}
.kuyu { cursor: default; }
.taslar { position: absolute; inset: 9% 8%; pointer-events: none; }
.tas {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  --renk: var(--tas-0);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.35) 16%, transparent 34%),
    radial-gradient(circle at 60% 75%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--renk) 0 55%, color-mix(in srgb, var(--renk), #000 45%) 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,.55), inset 0 -2px 4px rgba(0,0,0,.25);
}
.tas[data-o="1"] { --renk: var(--tas-1); }
.hazine .tas { width: 30%; }
.tas.yeni { animation: tas-dus .35s ease-out; }
@keyframes tas-dus { 0% { transform: translate(-50%, -90%) scale(1.2); } 70% { transform: translate(-50%, -45%) scale(.95); } }
.ucan { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.ucan-tas { left: 0; top: 0; width: 24px; transform: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }

.sayi {
  position: absolute; left: 50%; transform: translateX(-50%);
  min-width: 2em; text-align: center;
  font-family: Georgia, serif; font-weight: 700; font-size: clamp(.72rem, 2.1cqi, 1.15rem); line-height: 1.45;
  border-radius: 8px; padding: 0 6px; pointer-events: none; z-index: 2;
}
.kuyu[data-taraf="rakip"] .sayi { top: -.2em; }
.kuyu[data-taraf="ben"] .sayi { bottom: -.2em; }
.hazine .sayi { top: 50%; transform: translate(-50%, -50%); font-size: clamp(.9rem, 3cqi, 1.6rem); padding: 1px 8px; }
.hazine[data-taraf="ben"] .sayi { top: 76%; }
.hazine[data-taraf="rakip"] .sayi { top: 24%; }
.no { position: absolute; font-size: clamp(.55rem, 1.4cqi, .75rem); opacity: .55; pointer-events: none; }
.kuyu[data-taraf="ben"] .no { top: 6%; left: 10%; }
.kuyu[data-taraf="rakip"] .no { bottom: 6%; right: 10%; }
.hazine .etiket {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: clamp(.55rem, 1.5cqi, .8rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 6px; padding: 1px 6px; pointer-events: none; z-index: 2;
}
.hazine[data-taraf="ben"] .etiket { bottom: 4%; }
.hazine[data-taraf="rakip"] .etiket { top: 4%; }

/* Oynanabilir kuyu, yol önizlemesi, hedef, ipucu, yanlış bırakma */
.kuyu.secilebilir { cursor: pointer; }
@media (hover: hover) { .kuyu.secilebilir:hover { transform: translateY(-2px); } }
.kuyu.secilebilir:active { transform: scale(.97); }
.kuyu, .hazine { transition: box-shadow .2s, transform .15s; }
.yanlis { animation: salla .4s; }
@keyframes salla { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.elle-aktif .kuyu, .elle-aktif .hazine { cursor: pointer; }
.dustu .sayi { animation: zipla .3s ease; }
@keyframes zipla { 50% { scale: 1.35; } }

/* El: üstten gelen tek el. Alt ucu kuyunun üst kenarında durur (taşlar oradan düşer); kuyuyu kapatmaz. */
.el {
  --boy: clamp(40px, 7.2cqi, 72px);
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  width: var(--boy); height: calc(var(--boy) * 1.16); margin: calc(var(--boy) * -.9) 0 0 calc(var(--boy) / -2);
  opacity: 0; scale: .8; transform-origin: 50% 100%;
  transition: transform calc(var(--adim) * .45) ease-in-out, opacity .2s, scale .2s;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.4));
}
.el.goster { opacity: 1; scale: 1; }
.el svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.el .el-acik, .el .el-yumruk { transition: opacity .12s; }
.el[data-durum="acik"] .el-yumruk, .el[data-durum="yumruk"] .el-acik { opacity: 0; }
.el .el-parmak { transition: transform .1s ease-out; }
.el.birakiyor .el-parmak { transform: translateY(5px); }
.el.birakiyor { scale: 1.04 .97; }
.el-sayi {
  position: absolute; right: -16%; top: 30%; min-width: 1.6em; text-align: center;
  background: #141615; color: #fff; border-radius: 999px; padding: 0 5px;
  font-weight: 800; font-size: clamp(.68rem, 1.9cqi, 1rem); line-height: 1.5; box-shadow: 0 0 0 2px #fff;
}
.el-sayi:empty { display: none; }

/* Geri sayım: süre azalınca tahtanın ortasında belirir */
.sayac {
  position: absolute; left: 50%; z-index: 8; pointer-events: none;
  width: clamp(54px, 11cqi, 120px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; translate: -50% -50%;
  font: 900 clamp(1.6rem, 6cqi, 3.6rem) / 1 system-ui, sans-serif; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffb347, #f07d03 60%, #b35a00);
  box-shadow: 0 0 0 4px #fff, 0 12px 30px rgba(0,0,0,.45);
  opacity: 0; scale: .5; transition: opacity .2s, scale .2s;
}
.sayac { top: 50%; width: clamp(46px, 9cqi, 100px); }
.sayac[data-o="1"] { box-shadow: 0 0 0 4px var(--tas-1), 0 12px 30px rgba(0,0,0,.45); }
.sayac[data-o="0"] { box-shadow: 0 0 0 4px var(--tas-0), 0 12px 30px rgba(0,0,0,.45); }
.sayac.goster { opacity: 1; scale: 1; }
.sayac.kritik { background: radial-gradient(circle at 35% 30%, #ff7a6b, #d63a2a 60%, #8e1d12); }
.sayac.vur { animation: sayac-vur .35s ease-out; }
@keyframes sayac-vur { 0% { scale: 1.35; } 100% { scale: 1; } }

/* Afiş: "Bir hamle daha!", "+6 taş!" */
.afis {
  position: absolute; left: 50%; top: 50%; z-index: 7; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  padding: .45em 1.2em; border-radius: 999px; white-space: nowrap;
  font-weight: 900; font-size: clamp(1rem, 4cqi, 2.1rem); letter-spacing: .02em; color: #fff;
  background: linear-gradient(90deg, #e8a628, #4db36a);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow: 0 2px 3px rgba(0,0,0,.35);
  transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.afis[data-tur="kotu"] { background: linear-gradient(90deg, #c0392b, #8e44ad); }
.afis[data-tur="bilgi"] { background: linear-gradient(90deg, #2d6fb3, #23a3a0); }
.afis.goster { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ================================================================ Ahşap */
.tema-ahsap .tahta-govde {
  border-radius: clamp(18px, 5cqi, 56px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='460' preserveAspectRatio='none'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.075' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.1 0 0 0 0 0.02 0 0 0 -3.2 1.75'/%3E%3C/filter%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.6' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.12 0 0 0 0 0.03 0 0 0 -1.4 0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E") center / 100% 100%,
    radial-gradient(ellipse at 28% 18%, rgba(255,205,130,.38), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(70,25,5,.35), transparent 55%),
    linear-gradient(180deg, #cf8a43, #b56b2e 45%, #94511f);
  box-shadow:
    inset 0 3px 0 rgba(255,225,180,.35),
    inset 0 -6px 14px rgba(60,25,5,.45),
    0 2px 0 #5a2e10, 0 18px 40px rgba(0,0,0,.55);
}
/* Kenar oyma çizgisi */
.tema-ahsap .tahta-govde::before {
  content: ""; position: absolute; inset: clamp(5px, 1.2cqi, 12px); border-radius: inherit; pointer-events: none;
  border: 2px solid rgba(70,30,8,.35); box-shadow: 0 1px 0 rgba(255,220,170,.2), inset 0 1px 0 rgba(255,220,170,.2);
}
/* Ortadaki katlanma çizgisi */
.tema-ahsap .tahta-govde::after {
  content: ""; position: absolute; top: 2%; bottom: 2%; left: 50%; width: 3px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(40,15,2,.75), rgba(255,210,160,.25)); pointer-events: none;
}
.tema-ahsap .orta-bant {
  grid-column: 2 / 9; grid-row: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='rgba(255,220,170,.28)' stroke-width='2.4' transform='translate(.8 .8)'%3E%3Cpath d='M60 6 74 20 60 34 46 20Z M60 13 67 20 60 27 53 20Z M46 20H30 M74 20H90 M30 20c-6 0-8-8-14-8 M30 20c-6 0-8 8-14 8 M90 20c6 0 8-8 14-8 M90 20c6 0 8 8 14 8'/%3E%3C/g%3E%3Cg stroke='rgba(60,22,4,.55)' stroke-width='2.4'%3E%3Cpath d='M60 6 74 20 60 34 46 20Z M60 13 67 20 60 27 53 20Z M46 20H30 M74 20H90 M30 20c-6 0-8-8-14-8 M30 20c-6 0-8 8-14 8 M90 20c6 0 8-8 14-8 M90 20c6 0 8 8 14 8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / auto 100% space;
  min-height: clamp(14px, 4.5cqi, 46px);
  opacity: .9;
}
.tema-ahsap .kuyu, .tema-ahsap .hazine {
  border-radius: 50% / 38%;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,200,140,.18), transparent 60%),
    radial-gradient(ellipse at 50% 55%, #6b3816 0%, #4a230b 60%, #2e1405 100%);
  box-shadow:
    inset 0 10px 16px rgba(20,6,0,.75),
    inset 0 -3px 6px rgba(255,200,140,.18),
    0 2px 0 rgba(255,220,170,.35),
    0 -1px 0 rgba(40,15,2,.5);
}
.tema-ahsap .kuyu { aspect-ratio: .7; }
.tema-ahsap .hazine { border-radius: 50% / 18%; }
.tema-ahsap .sayi, .tema-ahsap .hazine .etiket {
  background: rgba(28,12,3,.82); color: #f6e7cf; border: 1px solid rgba(230,180,100,.55);
}
.tema-ahsap .hazine .sayi { color: #ffd37a; }
.tema-ahsap .no { color: #f6e7cf; }
.tema-ahsap .mentese {
  position: absolute; left: 50%; width: clamp(14px, 3cqi, 30px); height: clamp(36px, 9cqi, 90px); transform: translateX(-50%); z-index: 1;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 18%, #3a2a10 0 7%, transparent 8%), radial-gradient(circle at 70% 18%, #3a2a10 0 7%, transparent 8%),
    radial-gradient(circle at 30% 82%, #3a2a10 0 7%, transparent 8%), radial-gradient(circle at 70% 82%, #3a2a10 0 7%, transparent 8%),
    linear-gradient(90deg, #6d5320, #d9b45a 30%, #f3dc8e 50%, #b8913e 70%, #6d5320);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.tema-ahsap .mentese.ust { top: 13%; }
.tema-ahsap .mentese.alt { bottom: 13%; }
.tema-ahsap .plaka {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: clamp(40px, 10cqi, 110px); height: clamp(16px, 4cqi, 44px); border-radius: 40% / 50%;
  background: radial-gradient(ellipse at 50% 35%, #f5e6b0, #c9a659 60%, #8d6d2c);
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 0 0 2px rgba(110,80,30,.6);
}
.tema-ahsap .kuyu.secilebilir { box-shadow: inset 0 10px 16px rgba(20,6,0,.75), 0 0 0 3px rgba(255,214,110,.75), 0 0 16px rgba(255,200,80,.45); }
@media (hover: hover) { .tema-ahsap .kuyu.secilebilir:hover { box-shadow: inset 0 10px 16px rgba(20,6,0,.75), 0 0 0 3px #ffe08a, 0 0 22px rgba(255,210,90,.75); } }

/* ================================================================ Modern
   Ahşapla aynı ölçü (kuyu oranı .7, aynı ızgara): mat grafit gövde, net kenarlı oyuk kuyular */
.tema-modern { --tas-0: #f39a2b; --tas-1: #22c3b0; --cizgi: rgba(255,255,255,.1); }
.tema-modern .tahta-govde {
  border-radius: clamp(18px, 5cqi, 56px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.09), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #2a2f38, #1b1f26 55%, #15181e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.4),
    0 0 0 1px #0b0d10,
    0 2px 0 #0b0d10, 0 18px 40px rgba(0,0,0,.5);
}
/* İnce iç çerçeve ve iki oyuncunun renginde alt-üst çizgi */
.tema-modern .tahta-govde::before {
  content: ""; position: absolute; inset: clamp(5px, 1.2cqi, 12px); border-radius: inherit; pointer-events: none;
  border: 1px solid var(--cizgi);
  background:
    linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--tas-1), transparent 45%) 50%, transparent 88%) top / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 12%, color-mix(in srgb, var(--tas-0), transparent 45%) 50%, transparent 88%) bottom / 100% 2px no-repeat;
}
.tema-modern .tahta-govde::after {
  content: ""; position: absolute; top: 9%; bottom: 9%; left: 50%; width: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 20%, rgba(255,255,255,.14) 80%, transparent);
}
.tema-modern .orta-bant {
  grid-column: 2 / 9; grid-row: 2; min-height: clamp(14px, 4.5cqi, 46px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 15%, rgba(255,255,255,.08) 85%, transparent) center / 100% 1px no-repeat;
}
.tema-modern .mentese { display: none; }
.tema-modern .kuyu, .tema-modern .hazine {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(180deg, #0b0d11, #151920 70%, #1c2129);
  box-shadow:
    inset 0 8px 14px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(255,255,255,.1),
    0 -1px 0 rgba(0,0,0,.6);
}
.tema-modern .kuyu { aspect-ratio: .7; border-radius: 999px; }
.tema-modern .hazine { border-radius: 999px; }
.tema-modern .hazine[data-sahip="0"] { box-shadow: inset 0 8px 14px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px color-mix(in srgb, var(--tas-0), transparent 55%); }
.tema-modern .hazine[data-sahip="1"] { box-shadow: inset 0 8px 14px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px color-mix(in srgb, var(--tas-1), transparent 55%); }
.tema-modern .sayi, .tema-modern .hazine .etiket { background: #0e1116; color: #eef2f6; border: 1px solid rgba(255,255,255,.16); font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.tema-modern .hazine .sayi { color: #fff; }
.tema-modern .hazine[data-sahip="0"] .sayi { border-color: color-mix(in srgb, var(--tas-0), transparent 30%); }
.tema-modern .hazine[data-sahip="1"] .sayi { border-color: color-mix(in srgb, var(--tas-1), transparent 30%); }
.tema-modern .no { color: #7f8a97; }
.tema-modern .tas { box-shadow: 0 0 6px color-mix(in srgb, var(--renk), transparent 55%), 0 2px 3px rgba(0,0,0,.6), inset 0 -2px 4px rgba(0,0,0,.25); }
.tema-modern .kuyu.secilebilir { box-shadow: inset 0 8px 14px rgba(0,0,0,.75), 0 0 0 2px color-mix(in srgb, var(--tas-1), transparent 20%), 0 0 16px color-mix(in srgb, var(--tas-1), transparent 60%); }
.tema-modern .kuyu.secilebilir[data-sahip="0"] { box-shadow: inset 0 8px 14px rgba(0,0,0,.75), 0 0 0 2px color-mix(in srgb, var(--tas-0), transparent 20%), 0 0 16px color-mix(in srgb, var(--tas-0), transparent 60%); }

/* ============================================ Ortak vurgular (iki tema) */
.kuyu.yol, .hazine.yol { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.45) !important; }
.kuyu.hedef, .hazine.hedef { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 3px #7be08f, 0 0 22px rgba(123,224,143,.7) !important; }
.kaynak { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 3px rgba(255,255,255,.8) !important; }
.rehber { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 3px #7be08f, 0 0 22px rgba(123,224,143,.8) !important; animation: nabiz 1s ease-in-out infinite; }
@keyframes nabiz { 50% { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 6px rgba(123,224,143,.35), 0 0 30px rgba(123,224,143,.9); } }
.ipucu { animation: nabiz-altin .8s ease-in-out 3; }
@keyframes nabiz-altin { 50% { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 6px #ffd23f, 0 0 34px rgba(255,210,63,.95); } }
.yakalandi { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 3px #ff6b57, 0 0 24px rgba(255,107,87,.8) !important; }
.son { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 2px rgba(123,224,143,.6) !important; }
.vurgu { box-shadow: inset 0 8px 14px rgba(0,0,0,.7), 0 0 0 3px #ff6b57 !important; }

@media (prefers-reduced-motion: reduce) {
  .tas.yeni, .dustu .sayi, .rehber, .ipucu { animation: none; }
}

/* Dar tahtada (telefon) hazine adı sığmaz, sayı yeter */
@container (max-width: 520px) {
  .hazine .etiket, .no { display: none; }
  .tas { width: 40%; }
}

/* Ortadaki metal plakada Gazi Kırtasiye logosu: kazınmış gibi, göze batmadan */
.plaka::after {
  content: ""; position: absolute; inset: 22% 18%;
  background: url("logo-plaka.png") center / contain no-repeat;
  filter: grayscale(1) contrast(1.3);
  mix-blend-mode: multiply;
  opacity: .55;
}
.tema-modern .plaka {
  display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: clamp(36px, 8cqi, 84px); height: clamp(14px, 3cqi, 32px); background: none; box-shadow: none;
}
.tema-modern .plaka::after { inset: 0; filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .28; }

/* Oyun sonu kutlaması: kupa, konfeti */
.kutlama {
  position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; overflow: hidden;
  border-radius: clamp(18px, 5cqi, 56px); background: rgba(20, 22, 21, .45); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .3s; cursor: pointer;
}
.kutlama.goster { opacity: 1; pointer-events: auto; }
.kutlama-kart {
  position: relative; display: grid; justify-items: center; gap: 4px; text-align: center;
  background: #fff; color: #141615; border-radius: 22px; padding: clamp(14px, 3cqi, 30px) clamp(22px, 6cqi, 60px);
  box-shadow: 0 0 0 4px #f07d03, 0 20px 50px rgba(0,0,0,.4);
  scale: .6; transition: scale .45s cubic-bezier(.3, 1.6, .5, 1);
}
.kutlama.goster .kutlama-kart { scale: 1; }
.kutlama-simge { font-size: clamp(2.6rem, 11cqi, 6.5rem); line-height: 1; animation: kupa-zipla 1.2s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.kutlama-kart b { font-size: clamp(1.1rem, 4cqi, 2.2rem); font-weight: 900; }
.kutlama-kart span { color: #5f5e5c; font-size: clamp(.85rem, 2.2cqi, 1.15rem); }
.kutlama-kart small { color: #8a8987; font-size: .75rem; margin-top: 4px; }
@keyframes kupa-zipla { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10%) rotate(4deg); } }
.konfeti { position: absolute; inset: 0; pointer-events: none; }
.konfeti i { position: absolute; top: -8%; aspect-ratio: .55; border-radius: 2px; animation: konfeti-dus linear forwards; }
@keyframes konfeti-dus { to { transform: translate(var(--kay), 120cqh) rotate(var(--don)); } }
@media (prefers-reduced-motion: reduce) { .kutlama-simge, .konfeti i { animation: none; } .konfeti { display: none; } }