/*
  Bluffers - ana sayfa bolumleri (W2b). site.css ustune yalniz ana sayfada yuklenir.
  Bolumler: kahraman (sahne, lamba, kart yelpazesi), hakkinda, adimlar, ozellikler, hayvan seridi, galeri, adil oyun, haberler, SSS, son cagri.
  Etkilesimli ogelerde hover icin `translate` ozelligi kullanilir (kaydirinca-belir animasyonundaki `transform` ile cakismasin).
*/

/* ===================================================================== 1. KAHRAMAN */
.kahraman { position: relative; padding: clamp(28px, 5vw, 56px) 0 clamp(124px, 12vw, 150px); clip-path: var(--kesik-alt); overflow: hidden; }
.kahraman__ic { display: grid; gap: 28px; align-items: center; }
.kahraman__metin { position: relative; z-index: 2; }
.kahraman__ust { margin: 0 0 14px; }
.kahraman__ust .rozet { max-width: 100%; white-space: normal; }
.kahraman__logo-kap { margin: 0 0 6px; }
.kahraman__logo { width: min(100%, 320px); height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .4)); }
.kahraman__baslik { font-size: clamp(1.9rem, 1rem + 3.3vw, 3.3rem); margin: 0 0 .45em; max-width: 20ch; text-shadow: 0 3px 24px rgba(0, 0, 0, .35); }
.kahraman__alt { color: var(--soluk); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 35rem; margin: 0; }
.kahraman__bilgi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; list-style: none; margin: 0; padding: 0; }
.kahraman__dil { color: var(--soluk); font-weight: 800; font-size: .95rem; }
.kahraman__not { margin: 16px 0 0; color: var(--soluk); font-size: .95rem; max-width: 30rem; }

/* sahne: lamba + cerceveli gorsel + kart yelpazesi + maskot */
.sahne { position: relative; width: 100%; max-width: 640px; margin-inline: auto; padding: 132px 0 34px; }
.sahne::before { content: ""; position: absolute; inset: 6% -12% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 170, 110, .32), rgba(255, 170, 110, 0)); }
.cerceve { position: relative; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55)); }
.cerceve__ic { padding: 9px; background: linear-gradient(135deg, #FFB8A0 0%, #C3B1E1 55%, #A0D2EB 100%); clip-path: polygon(0 5%, 4% 0, 100% 0, 100% 92%, 96% 100%, 0 100%); }
.cerceve__resim { display: block; width: 100%; height: auto; aspect-ratio: 1376 / 768; background: #2A1F3A; clip-path: polygon(0 4%, 3% 0, 100% 0, 100% 93%, 97% 100%, 0 100%); }
@media (min-width: 700px) {
  .yelpaze { left: -1%; bottom: -8px; width: 220px; height: 172px; }
  .yelpaze__kart { width: 88px; margin-left: -44px; }
}
@media (min-width: 1000px) {
  .kahraman { padding-top: 36px; }
  .kahraman__ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 36px; }
  .cerceve { transform: rotate(-1.6deg); }
}

.yelpaze { position: absolute; z-index: 3; left: 0; bottom: -4px; width: 170px; height: 136px; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.yelpaze__kart { position: absolute; left: 50%; bottom: 0; width: 70px; height: auto; margin-left: -35px; transform-origin: 50% 118%; rotate: var(--a); transition: rotate .4s cubic-bezier(.2, .9, .3, 1.3); }
.yelpaze__kart:nth-child(1) { --a: -36deg; --s: 0; }
.yelpaze__kart:nth-child(2) { --a: -18deg; --s: 1; }
.yelpaze__kart:nth-child(3) { --a: 0deg; --s: 2; }
.yelpaze__kart:nth-child(4) { --a: 18deg; --s: 3; }
.yelpaze__kart:nth-child(5) { --a: 36deg; --s: 4; }
.sahne:hover .yelpaze__kart:nth-child(1) { rotate: -46deg; }
.sahne:hover .yelpaze__kart:nth-child(2) { rotate: -23deg; }
.sahne:hover .yelpaze__kart:nth-child(4) { rotate: 23deg; }
.sahne:hover .yelpaze__kart:nth-child(5) { rotate: 46deg; }
@media (prefers-reduced-motion: no-preference) {
  .yelpaze__kart { animation: yelpaze-ac .9s cubic-bezier(.2, .9, .3, 1.25) backwards; animation-delay: calc(var(--s) * 80ms + 300ms); }
  @keyframes yelpaze-ac { from { rotate: 0deg; opacity: 0; translate: 0 14px; } }
}
.sahne__hayvan { position: absolute; z-index: 3; right: -2%; bottom: -6px; width: clamp(104px, 26%, 168px); height: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .sahne__hayvan { animation: nefes 4.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  @keyframes nefes { from { transform: translateY(0) scale(1); } to { transform: translateY(-7px) scale(1.015); } }
}

/* ===================================================================== 2. HAKKINDA */
.hakkinda { position: relative; z-index: 3; margin-top: -70px; }
.hakkinda__kart { display: grid; gap: 22px; align-items: center; padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 52px); border-radius: var(--r-l); box-shadow: var(--golge-b); }
.hakkinda__takimlar { width: 100%; max-width: 300px; height: auto; margin-inline: auto; }
.hakkinda h2 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); margin-bottom: .35em; }
.hakkinda p { margin: 0; font-size: 1.12rem; color: var(--soluk); }
@media (min-width: 900px) { .hakkinda__kart { grid-template-columns: 300px 1fr; gap: 44px; } }


/* ===================================================================== 3. ADIMLAR */
.adimlar { list-style: none; display: grid; gap: 24px; grid-template-columns: 1fr; }
.adim { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--kart); box-shadow: var(--golge); overflow: hidden; transition: translate .25s ease, box-shadow .25s ease; }
.adim:hover { translate: 0 -6px; box-shadow: var(--golge-b); }
.adim__resim { position: relative; aspect-ratio: 480 / 358; background: var(--lavanta); }
.adim__resim img { width: 100%; height: 100%; object-fit: cover; }
.adim__resim::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; background: var(--kart); clip-path: polygon(0 100%, 0 64%, 13% 22%, 27% 72%, 43% 10%, 58% 66%, 73% 16%, 88% 62%, 100% 28%, 100% 100%); }
.adim__govde { padding: 6px 22px 26px; }
.adim__govde h3 { margin-bottom: .4em; }
.adim__govde p { margin: 0; color: var(--soluk); }
@media (min-width: 640px) { .adimlar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .adimlar { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

/* ===================================================================== 4. OZELLIKLER */
.ozellikler { list-style: none; display: grid; gap: 16px; grid-template-columns: 1fr; }
.ozellik { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: var(--r-l); background: var(--kart); box-shadow: var(--golge); transition: translate .2s ease, box-shadow .2s ease; }
.ozellik:hover { translate: 0 -4px; box-shadow: var(--golge-b); }
.ozellik__sanat { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: var(--lavanta); }
.ozellik__sanat img { width: 100%; height: 100%; object-fit: cover; }
.ozellik__simge { position: absolute; inset-inline-end: 6px; bottom: 6px; width: 32px; height: 32px; padding: 7px; border-radius: 50%; color: #2E2438; background: #FFF4E6; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ozellik__govde h3 { margin-bottom: .3em; }
.ozellik__govde p { margin: 0; color: var(--soluk); font-size: 1rem; line-height: 1.55; }
.ozellik--bot .ozellik__sanat { background: var(--nane); }
.ozellik--hayvan .ozellik__sanat { background: var(--pudra); }
.robot { width: 86%; height: auto; margin: 4% auto 0; }
.robot .r-cizgi { fill: none; stroke: #4A3F55; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.robot .r-nane { fill: #FFF4E6; stroke: #4A3F55; stroke-width: 4; }
.robot .r-lav { fill: #C3B1E1; stroke: #4A3F55; stroke-width: 4; stroke-linejoin: round; }
.robot .r-lav2 { fill: #DCCFF0; }
.robot .r-lav3 { fill: #AF9AD3; }
.robot .r-koyu { fill: #3A2F48; }
.robot .r-seftali { fill: #FFB8A0; }
.ozellik__uclu { display: flex; align-items: flex-end; justify-content: center; height: 100%; padding-top: 14%; }
.ozellik__uclu img { width: 40%; height: auto; object-fit: contain; margin-inline: -7%; }
.ozellik__uclu img:nth-child(2) { position: relative; z-index: 1; width: 44%; }
.ozellik__not { display: flex; align-items: center; justify-content: center; gap: .5em; margin: 28px auto 0; max-width: 44rem; text-align: center; color: var(--soluk); font-weight: 800; }
.ozellik__not .simge { color: var(--basari); }
@media (min-width: 700px) { .ozellik { grid-template-columns: 190px 1fr; gap: 22px; padding: 16px; } .ozellik__sanat { aspect-ratio: 4 / 3; } .ozellik__govde p { font-size: 1.05rem; } }
@media (min-width: 900px) { .ozellikler { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1100px) { .ozellik { grid-template-columns: 210px 1fr; } }

/* ===================================================================== 5. HAYVAN SERIDI */
.bolum--hayvanlar { padding-inline: 0; overflow: hidden; }
.serit__dugmeler { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 4px; }
.serit__d { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; color: #2E2438; background: var(--seftali); box-shadow: 0 3px 0 rgba(46, 36, 56, .28); transition: translate .15s, background-color .15s; }
.serit__d:hover:not(:disabled) { background: var(--seftali-2); translate: 0 -2px; }
.serit__d:disabled { cursor: default; background: var(--cizgi); color: var(--soluk); box-shadow: none; }
.serit__d[hidden] { display: none; }
.serit { --yan: max(16px, calc((100vw - var(--kap)) / 2)); padding: 18px var(--yan) 34px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--yan); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--seftali) transparent; }
.serit:focus-visible { outline-offset: -3px; }
.serit__liste { list-style: none; display: flex; gap: 18px; width: max-content; margin: 0; padding: 0; }
.hayvan { flex: 0 0 min(68vw, 236px); display: flex; flex-direction: column; padding: 10px 10px 20px; border-radius: var(--r-l); background: var(--kart); box-shadow: var(--golge); scroll-snap-align: start; transition: translate .25s ease, box-shadow .25s ease; }
.hayvan:hover { translate: 0 -8px; box-shadow: var(--golge-b); }
.hayvan__sahne { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 226px; border-radius: 20px; overflow: hidden; background: var(--nane); }
.hayvan--1 .hayvan__sahne { background: var(--lavanta); }
.hayvan--2 .hayvan__sahne { background: var(--bebek); }
.hayvan--3 .hayvan__sahne { background: var(--pudra); }
.hayvan--4 .hayvan__sahne { background: var(--seftali); }
.hayvan__sahne::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .38) 0 30%, transparent 30%), linear-gradient(245deg, rgba(255, 255, 255, .22) 0 22%, transparent 22%), linear-gradient(0deg, rgba(46, 36, 56, .12), transparent 38%); }
.hayvan__resim { position: relative; width: auto; height: 208px; max-width: none; transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.2, .8, .3, 1.3); }
.hayvan:hover .hayvan__resim { transform: scale(1.07) rotate(-1.5deg); }
.hayvan__rozet { position: absolute; z-index: 2; top: 10px; inset-inline-start: 10px; padding: 1px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; line-height: 1.7; color: #FFF4E6; background: #2E2438; }
.hayvan__rozet--acik { color: #2E2438; background: #FFFFFF; }
.hayvan__govde { padding: 14px 8px 0; }
.hayvan__govde h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: .3em; font-weight: 800; font-size: 1.4rem; }
.hayvan__tur { font-family: var(--font-baslik); font-weight: 800; font-size: .85rem; color: var(--altin); }
.hayvan__govde p { margin: 0; color: var(--soluk); font-size: .98rem; line-height: 1.5; }

/* ===================================================================== 7. ADIL OYUN */
.adil__ic { display: grid; gap: 36px; align-items: center; }
.adil__resim { filter: drop-shadow(0 22px 30px rgba(46, 36, 56, .3)); }
.adil__resim img { width: 100%; height: auto; clip-path: polygon(0 6%, 6% 0, 100% 0, 100% 94%, 94% 100%, 0 100%); background: var(--lavanta); }
.adil__metin h2 { margin-bottom: .3em; }
.adil__giris { color: var(--soluk); font-size: 1.15rem; }
.adil__liste { list-style: none; display: grid; gap: 18px; margin: 26px 0 0; }
.adil__madde { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.adil__simge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #2E2438; background: var(--nane); }
.adil__madde:nth-child(2) .adil__simge { background: var(--bebek); }
.adil__madde:nth-child(3) .adil__simge { background: var(--pudra); }
.adil__simge .simge { width: 28px; height: 28px; }
.adil__madde h3 { margin: 0 0 .15em; }
.adil__madde p { margin: 0; color: var(--soluk); }
.adil__not { display: flex; align-items: flex-start; gap: .6em; margin: 28px 0 0; padding: 14px 18px; border-radius: var(--r-m); background: var(--bg-2); font-weight: 800; }
.adil__not .simge { margin-top: .15em; color: var(--altin); }
@media (min-width: 960px) { .adil__ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; } }

/* ===================================================================== 8. HABERLER */
.haberler { display: grid; gap: 22px; grid-template-columns: 1fr; }
.haberler .haber:not(.haber--ana) .haber__ozet { display: none; }
@media (min-width: 560px) {
  .haberler .haber:not(.haber--ana) { flex-direction: row; }
  .haberler .haber:not(.haber--ana) .haber__resim { flex: 0 0 38%; aspect-ratio: auto; }
}
@media (min-width: 900px) {
  .haberler { grid-template-columns: 1.25fr 1fr; }
  .haber--ana { grid-row: span 2; }
  .haber--ana .haber__govde { padding: 24px 28px 28px; }
}