/*
  Bluffers - ic sayfalar (W2b): nasil oynanir, iletisim, haber listesi/yazisi, emegi gecenler, SSS ek, 404.
  site.css ustune yalniz ic sayfalarda yuklenir. Ortak bilesenler (galeri, sss, haber karti, cagri) site.css'te.
*/

/* ===================================================================== NASIL OYNANIR */
.nasil__liste { list-style: none; display: grid; gap: clamp(36px, 6vw, 72px); }
.nasil__adim { display: grid; gap: 22px; align-items: center; }
.nasil__resim { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--golge-b); background: var(--lavanta); }
.nasil__resim img { width: 100%; height: auto; }
.nasil__resim::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--bg); clip-path: polygon(0 100%, 0 70%, 12% 26%, 26% 74%, 42% 14%, 57% 68%, 72% 18%, 87% 64%, 100% 32%, 100% 100%); }
.nasil__metin h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); }
.nasil__metin > p { color: var(--soluk); font-size: 1.12rem; }
.ipucu { display: flex; gap: .7em; align-items: flex-start; margin: 20px 0 0; padding: 14px 18px; border-radius: var(--r-m); background: var(--bg-2); color: var(--yazi) !important; font-size: 1rem !important; }
.ipucu .simge { margin-top: .2em; color: var(--altin); fill: currentColor; stroke: none; }
.nasil-kurallar .yazi { padding: clamp(8px, 2vw, 16px); }
@media (min-width: 900px) {
  .nasil__adim { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
  .nasil__adim:nth-child(even) .nasil__resim { order: 2; }
}

/* ===================================================================== YAZI SAYFALARI */
.yazi-kapak { max-width: 46rem; margin: 0 auto 36px; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--golge-b); background: var(--lavanta); }
.yazi-kapak img { width: 100%; height: auto; }
.yazi-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 12px 0 0 !important; color: var(--soluk); font-weight: 800; font-size: 1rem !important; }
.yazi-meta .simge { width: 1.1em; height: 1.1em; }
.yazi-gezinti { display: grid; gap: 14px; max-width: 46rem; margin: 48px auto 0; }
.yazi-gezinti__bag { display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--r-m); background: var(--kart); box-shadow: var(--golge); color: var(--yazi); text-decoration: none; transition: translate .2s ease, box-shadow .2s ease; }
.yazi-gezinti__bag:hover { translate: 0 -3px; box-shadow: var(--golge-b); }
.yazi-gezinti__yon { display: inline-flex; align-items: center; gap: .4em; color: var(--baglanti); font-weight: 800; font-size: .95rem; }
.yazi-gezinti__bag--sonraki { text-align: end; }
.yazi-gezinti__bag--sonraki .yazi-gezinti__yon { justify-content: flex-end; }
.yazi-gezinti__baslik { font-family: var(--font-baslik); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.yazi-geri { margin: 32px 0 0; text-align: center; }
@media (min-width: 700px) { .yazi-gezinti { grid-template-columns: 1fr 1fr; } .yazi-gezinti__bag:only-child { grid-column: 1 / -1; } }
.emek__tesekkur { display: flex; align-items: center; justify-content: center; gap: .6em; max-width: 46rem; margin: 40px auto 0; padding: 16px 20px; border-radius: var(--r-m); background: var(--bg-2); font-weight: 800; text-align: center; }
.emek__tesekkur .simge { color: var(--altin); }

/* ===================================================================== HABER LISTESI */
.haber-izgara { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.haber-izgara .haber__govde h2 { margin: 0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); }
.sayfalama { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 44px; }
.sayfalama__no { font-weight: 800; color: var(--soluk); }
.bos { max-width: 32rem; margin: 0 auto; padding: 32px; text-align: center; color: var(--soluk); font-weight: 800; }

/* ===================================================================== SSS (sayfa) */
.sss-hala { display: grid; gap: 16px; align-items: center; justify-items: start; max-width: 52rem; margin: 40px auto 0; padding: 24px 26px; border-radius: var(--r-l); }
.sss-hala h2 { margin: 0 0 .2em; font-size: 1.5rem; }
.sss-hala p { margin: 0; color: var(--soluk); }
.sss-hala__simge { width: 44px; height: 44px; padding: 10px; border-radius: 14px; color: #2E2438; background: var(--nane); }
@media (min-width: 700px) { .sss-hala { grid-template-columns: auto 1fr auto; gap: 22px; } }

/* ===================================================================== ILETISIM */
.iletisim__ic { display: grid; gap: 28px; align-items: start; }
.form { display: grid; gap: 22px; padding: clamp(20px, 4vw, 36px); border-radius: var(--r-l); }
.alan { display: grid; gap: 6px; }
.alan label { font-family: var(--font-baslik); font-weight: 600; font-size: 1.1rem; }
.alan__zorunlu { color: var(--tehlike); }
.alan input, .alan select, .alan textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 2px solid var(--cizgi); border-radius: 16px; font: inherit; color: var(--yazi); background: var(--bg); transition: border-color .15s, box-shadow .15s; }
.alan textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: var(--soluk); }
.alan input:focus-visible, .alan select:focus-visible, .alan textarea:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; border-color: var(--odak); }
.alan--hata input, .alan--hata select, .alan--hata textarea { border-color: var(--tehlike); }
.alan__ipucu { margin: 0; font-size: .92rem; color: var(--soluk); }
.alan__hata { margin: 0; font-weight: 800; font-size: .98rem; color: var(--tehlike); }
.bal { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__alt { display: grid; gap: 14px; justify-items: start; }
.form__not { margin: 0; font-size: .92rem; color: var(--soluk); }
.hata-ozet { margin-bottom: 22px; padding: 16px 20px; border-radius: var(--r-m); background: var(--kart); border: 2px solid var(--tehlike); }
.hata-ozet h2 { display: flex; align-items: center; gap: .5em; margin: 0 0 .4em; font-size: 1.2rem; color: var(--tehlike); }
.hata-ozet ul { padding-inline-start: 1.2em; }
.hata-ozet a { color: var(--tehlike); font-weight: 800; }
.basari { display: grid; justify-items: start; gap: 6px; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-l); border: 2px solid var(--basari); }
.basari h2 { margin: 0; font-size: 1.8rem; }
.basari p { margin: 0 0 12px; color: var(--soluk); font-size: 1.1rem; }
.basari__simge { width: 52px; height: 52px; padding: 12px; margin-bottom: 8px; border-radius: 50%; color: #1B6B4A; background: #A8E6CF; }
.iletisim__yan { display: grid; gap: 18px; }
.iletisim__kutu { display: grid; gap: 4px; justify-items: start; padding: 22px 24px; border-radius: var(--r-l); }
.iletisim__kutu p { margin: 0; color: var(--soluk); }
.iletisim__simge { width: 44px; height: 44px; padding: 10px; margin-bottom: 8px; border-radius: 14px; color: #2E2438; background: var(--bebek); }
.iletisim__kutu--silme .iletisim__simge { background: var(--pudra); }
.iletisim__eposta { display: inline-flex; align-items: center; min-height: var(--hedef); font-family: var(--font-baslik); font-weight: 800; font-size: 1.3rem; overflow-wrap: anywhere; }
.iletisim__kedi { width: 150px; height: auto; margin: 0 auto -4px; filter: drop-shadow(0 12px 12px rgba(46, 36, 56, .3)); }
@media (min-width: 900px) {
  .iletisim__ic { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; }
  .iletisim__yan { position: sticky; top: calc(var(--ust-yuk) + 24px); }
}

/* ===================================================================== 404 */
.hata { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(96px, 12vw, 150px); clip-path: var(--kesik-alt); overflow: hidden; }
.hata__ic { display: grid; gap: 32px; align-items: center; }
.hata__kod { margin: 0; font-family: var(--font-dekor); font-size: clamp(5.5rem, 3rem + 14vw, 11rem); line-height: .95; color: var(--seftali); text-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 0 40px rgba(255, 184, 160, .35); }
.hata h1 { font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem); }
.hata__aciklama { max-width: 34rem; color: var(--soluk); font-size: 1.2rem; }
.hata__eylem { margin: 24px 0 30px; }
.hata__oneri-b { margin: 0 0 .6em; font-size: 1.1rem; font-family: var(--font-baslik); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--altin); }
.hata__oneri { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.rozet--lavanta-bag { min-height: var(--hedef); padding: .4em 1.1em; text-decoration: none; font-size: 1rem; transition: translate .15s, background-color .15s; }
.rozet--lavanta-bag:hover { background: var(--nane); translate: 0 -2px; }
.hata__sahne { position: relative; min-height: 460px; }
.hata__hayvan { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; width: min(62%, 270px); height: auto; margin-inline: auto; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5)); }
.hata__soru { position: absolute; z-index: 2; bottom: 4%; inset-inline-end: 12%; width: 78px; height: auto; rotate: 14deg; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.lamba--hata { top: -6px; }
@media (min-width: 900px) {
  .hata__ic { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; }
  .hata__sahne { min-height: 460px; }
  .hata__soru { width: 100px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hata__hayvan { animation: hata-sallan 5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  @keyframes hata-sallan { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
}