/* ══════════════════════════════════════════════════════════════════
   ODA KABUĞU — kulübün odaları (Words with DOT, DOT Galeri)
   Odalar ayrı sayfalar ama kulübün üstünde açılmış birer panel gibi
   duruyor: arkada kulübün mavisi görünüyor, üstte her an kapatılabilen
   bir şerit var. Amaç "içeri girdim, istediğimde çıkarım" hissi.

   Kullanımı: sayfaya bu dosyayı bağla, <body class="oda">, içeriği
   <div class="oda-panel"> ile sar, en üste .oda-bar blokunu koy.
   ══════════════════════════════════════════════════════════════════ */

body.oda{
  background:linear-gradient(180deg,#2E9AA6 0%,#2C7FA8 42%,#2F5FA0 100%);
  background-attachment:fixed;
  min-height:100vh;
  padding:clamp(8px,1.4vw,16px) clamp(8px,1.4vw,18px) clamp(16px,2.4vw,28px);
}

/* ── üst şerit: geri, odalar, kapat ─────────────────────────────── */
.oda-bar{
  position:sticky;top:clamp(6px,1vw,10px);z-index:60;
  max-width:1120px;margin:0 auto clamp(8px,1.2vw,12px);
  display:flex;align-items:center;gap:8px;
  padding:6px;border-radius:999px;
  background:rgba(14,31,64,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.oda-bar a,.oda-bar .oda-kapat{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;text-decoration:none;
  font-size:12.5px;font-weight:800;letter-spacing:.03em;
  color:rgba(255,255,255,.86);border:0;background:transparent;cursor:pointer;
  white-space:nowrap;transition:background .15s ease,color .15s ease;
}
.oda-bar a:hover,.oda-bar .oda-kapat:hover{background:rgba(255,255,255,.18);color:#fff}
.oda-bar img{height:20px;width:auto;flex:0 0 auto}
/* Pebble & Co. markası şeridin en solunda: oda kulübün içinde, kulüp de
   Pebble'ın içinde. Logo koyu yeşil olduğu için şeritte beyaza çevriliyor. */
.oda-marka{padding:6px 12px 6px 10px !important;flex:0 0 auto;opacity:.9;transition:opacity .15s ease}
.oda-marka:hover{opacity:1;background:transparent !important}
.oda-marka img{height:15px !important;width:auto;filter:brightness(0) invert(1)}
.oda-marka::after{
  content:"";width:1px;height:16px;margin-left:12px;
  background:rgba(255,255,255,.24);
}
.oda-geri{font-size:12px !important;letter-spacing:.06em !important;text-transform:uppercase}
.oda-odalar{display:flex;align-items:center;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.oda-odalar::-webkit-scrollbar{display:none}
.oda-kapat{
  width:34px;height:34px;justify-content:center;padding:0;flex:0 0 auto;
  background:rgba(255,255,255,.16);font-size:17px;line-height:1;
}
@media (max-width:620px){
  .oda-geri span{display:none}          /* dar ekranda yalnız ok kalsın */
  .oda-marka{padding:6px 8px 6px 6px !important}
  .oda-marka img{height:13px !important}
  .oda-marka::after{margin-left:8px;height:14px}
  .oda-bar a{padding:8px 11px;font-size:12px}
  .oda-odalar img{display:none}
}

/* ── panel: odanın kendisi ──────────────────────────────────────── */
.oda-panel{
  max-width:1120px;margin:0 auto;
  border-radius:clamp(14px,1.8vw,24px);
  overflow:hidden;
  box-shadow:0 26px 60px rgba(10,26,54,.32);
  animation:oda-acil .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes oda-acil{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to  {opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){ .oda-panel{animation:none} }

/* Galeri sayfası tam ekran yükseklik istiyordu; panelin içinde gerekmiyor. */
.oda-panel .oyun-alani{min-height:0}

/* Oda sekmeleri (8 Ekim 2026): ok yerine yan yana geçiş — DOT Kulübü · DOT Galeri (· Kuşlar).
   Bulunulan sayfa beyaz hap; diğerleri tek dokunuşla. Şerit boyutu değişmedi. */
.oda-sekmeler{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;margin-right:auto}
.oda-sekmeler::-webkit-scrollbar{display:none}
.oda-bar .oda-sekmeler a{
  padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:800;letter-spacing:.01em;
  text-transform:none;color:rgba(255,255,255,.82);
}
.oda-bar .oda-sekmeler a:hover{background:rgba(255,255,255,.16);color:#fff}
.oda-bar .oda-sekmeler a[aria-current="page"]{background:rgba(255,255,255,.22);color:#fff}
.oda-bar .oda-kapat{margin-left:auto}
@media (max-width:620px){ .oda-bar .oda-sekmeler a{padding:8px 11px;font-size:12.5px} }
.sk-kisa{display:none}
@media (max-width:440px){ .sk-dot,.sk-uzun{display:none} .sk-kisa{display:inline} .oda-bar .oda-sekmeler a{padding:8px 10px} }

/* ── dot postası + footer: galeri sayfalarının altı (8 Ekim 2026) ─────────
   dot-club-v2.html'deki bant ve footer BİREBİR (kurallar oradan kopya). Panelin
   dışında, sayfanın tam genişliğinde; kulüpte bant ile footer arasındaki krem
   boşluk burada bandın alt payına eklendi (zemin mavi olduğu için). */
/* ── dot postası şeridi ──────────────────────────────────────────────
   Mavi alanla footer arasındaki krem bant. Dot ve Pat solda bekler,
   form sağda; dar ekranda alt alta geçer. */
.dpostasi{
  display:block;background:var(--cream);
  --dpostasi-yazi:var(--ink);--dpostasi-yazi-soft:rgba(29,43,38,.66);
  padding:clamp(44px,6vw,74px) var(--kenar);
}

/* footer'ın ana bağlantı satırı — sütunlar kalktı, tek sıra kaldı */
.footer-ana{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,2.6vw,34px);
  padding-bottom:clamp(18px,2.6vw,26px);
}
.footer-ana a{
  color:#fff;text-decoration:none;font-size:clamp(14px,1.7vw,16px);font-weight:800;
  opacity:.92;transition:opacity .16s ease;
}
.footer-ana a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.dpostasi-ic{
  width:100%;max-width:940px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(18px,3.4vw,46px);
}
.dpostasi-kus{width:clamp(130px,19vw,205px);height:auto;flex:0 0 auto}
.dpostasi-metin{flex:1 1 auto;min-width:0;text-align:center}
.dpostasi-bs{
  font-family:"Poppins",sans-serif;font-weight:800;letter-spacing:-.01em;   /* 8 Eki 2026: DotBubble yerine Poppins (Merve) */
  font-size:clamp(26px,3.6vw,38px);line-height:1.1;margin:0 0 10px;
  text-align:center;text-transform:lowercase;color:var(--dpostasi-yazi,#FFFDF9);
}
.dpostasi-metin p{
  margin:0 0 16px;font-size:clamp(14px,1.7vw,16px);
  font-weight:600;line-height:1.6;color:var(--dpostasi-yazi-soft,rgba(255,253,249,.85));
  max-width:46ch;margin-inline:auto;
}
.dpostasi-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:560px;margin-inline:auto}
.dpostasi-form input{
  flex:1 1 240px;min-width:0;
  font-family:var(--govde);font-size:16px;font-weight:600;color:var(--ink);
  background:var(--beyaz);border:2px solid rgba(29,43,38,.14);border-radius:999px;
  padding:13px 20px;outline:none;transition:border-color .16s ease;
}
.dpostasi-form input::placeholder{color:var(--ink-30);font-weight:500}
.dpostasi-form input:focus{border-color:var(--rozet)}
.dpostasi-form button{
  flex:0 0 auto;font-family:var(--govde);font-size:16px;font-weight:800;
  color:#fff;background:var(--rozet);border:0;border-radius:999px;
  padding:13px 30px;cursor:pointer;
  box-shadow:0 8px 18px rgba(232,69,47,.28);
  transition:transform .16s ease,box-shadow .16s ease;
}
.dpostasi-form button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(232,69,47,.34)}
.dpostasi-metin small{display:block;margin-top:10px;font-size:12.5px;color:var(--dpostasi-yazi-soft,rgba(255,253,249,.6));font-weight:600}
@media (max-width:620px){
  .dpostasi-ic{flex-direction:column;text-align:center}
  .dpostasi-metin p{margin-inline:auto}
  .dpostasi-form{justify-content:center}
}
.dpostasi-tuzak{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dpostasi-tamam{font-weight:700 !important;color:var(--ink) !important}
body.oda > .dpostasi, body.oda > .footer{margin-left:calc(-1 * clamp(8px,1.4vw,18px));margin-right:calc(-1 * clamp(8px,1.4vw,18px))}
body.oda > .dpostasi{margin-top:clamp(20px,3vw,40px)}   /* 9 Eki: alttaki ek boşluk kaldırıldı — üst ve alt eşit (.dpostasi padding) */
body.oda > .footer{margin-top:0;margin-bottom:calc(-1 * clamp(16px,2.4vw,28px))}