/* ============================================================
   EYMİR KÖYÜ DERNEĞİ — kabuk + genel reset (tasarım: Eymir Köyü Derneği.dc.html)
   Sayfa stillerinin ÇOĞU tasarımdaki gibi inline kalır; burada yalnız
   global reset, kabuk sınıfları ve inline yazılamayan :hover/:focus kuralları var.
   ============================================================ */

/* ── Global reset (tasarım satır 15–26) ── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#F3EADB;font-family:'Source Sans 3',system-ui,sans-serif;color:#33271E;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
input,textarea,select{font:inherit}
a{text-decoration:none;color:inherit}
::selection{background:#B4532B;color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:#D8C6A6;border-radius:8px;border:3px solid #F3EADB}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes eSpin{to{transform:rotate(360deg)}}

/* ── Buton yükleniyor efekti (global; eFetch tıklanan butona uygular) ── */
.e-yukleniyor{position:relative !important;color:transparent !important;pointer-events:none !important;cursor:default !important}
.e-yukleniyor>*{visibility:hidden !important}
.e-yukleniyor::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(90,75,62,.28);border-top-color:#7A6552;border-radius:50%;animation:eSpin .6s linear infinite;visibility:visible !important}
.e-yukleniyor.e-spin-acik::after{border-color:rgba(255,255,255,.45);border-top-color:#fff}

/* ── Kilim şeridi (marka aksanı) ────────────────────────────────
   Tek tanım: header üstü, giriş ekranı, hata/gizlilik sayfaları.
   Desen adımı --e-kilim-adim ile ayarlanır (8px varsayılan, giriş ekranı 10px).
   width:100% + max-width:none → şerit hiçbir konteyner max-width'ine hapsolmaz;
   background-size vermiyoruz: gradyan elemanın TAM genişliğine boyanır (kırpılma yok).
   Yatay taşma yapmaz — 100vw DEĞİL, 100% (dikey kaydırma çubuğu payını bozmaz). */
.e-kilim{
  display:block;
  width:100%;
  max-width:none;
  flex:none;
  background-image:repeating-linear-gradient(135deg,
    #B4532B 0 var(--e-kilim-adim,8px),
    #C29A3E var(--e-kilim-adim,8px) calc(var(--e-kilim-adim,8px) * 2),
    #6B7A43 calc(var(--e-kilim-adim,8px) * 2) calc(var(--e-kilim-adim,8px) * 3));
}

/* ── Header (sticky, #FCF7EC) ── */
.e-hbtn:hover{background:#EAD9BE !important}
.e-hmod:hover{background:#F0D9C9 !important}
.e-arama:focus-within{border-color:#C9B48F !important}
.e-arama-btn:hover{color:#B4532B !important}
.e-kul-btn:hover{background:#EAD9BE !important}

/* ── Dropdown menüler (kullanıcı + bildirim) ── */
.e-menu-oge:hover{background:#F5EDDD}
.e-menu-cikis:hover{background:#F8E7DF}

/* ── Sol menü ── */
.e-nav-oge:hover{background:#F5EDDD}
.e-destek-btn:hover{background:#D3AC4C !important}

/* ── Bildirim satırı (tıklanınca ilgili içeriğe gider) ── */
.e-bnav:hover{background:#FBF5EA}

/* ── Sağ ray ── */
.e-ray-ev:hover{background:#F5EDDD}

/* ── Genel butonlar / inputlar ── */
.e-pri:hover{background:#9C4523 !important}
.e-input:focus{border-color:#B4532B !important;outline:none}
.e-link:hover{color:#B4532B !important}
.e-fb:hover{background:#1465D0 !important}
.e-ggl:hover{background:#F5EDDD !important}

/* ── Chat dock ── */
.e-dock-ico:hover{background:#F5EDDD}
.e-dock-av > div{transition:transform .12s ease}
.e-dock-av:hover > div{transform:scale(1.08)}
.e-dock-input:focus{border-color:#C9B48F !important;outline:none}
.e-dock-gonder:hover{background:#9C4523 !important}

/* ── Onay modalı ── */
.e-vazgec:hover{background:#F5EDDD !important}
.e-evet:hover{background:#8F2F19 !important}

/* ── Telefon alanı (eTelKur: ülke bayrağı + koda göre maske) ────
   Kenarlık/zemin sarmalayıcıya taşınır, input içinde çerçevesiz durur —
   projedeki e-input görünümü (1px #E0D2B8, radius 10, #FBF6EC) korunur. */
.e-tel{position:relative;display:flex;align-items:stretch;min-width:0;
  border:1px solid #E0D2B8;border-radius:10px;background:#FBF6EC}
.e-tel:focus-within{border-color:#B4532B}
.e-tel-input{flex:1;min-width:0;padding:11px 12px;border:none;background:transparent;
  outline:none;color:#33271E;border-radius:0 10px 10px 0}
.e-tel-btn{display:flex;align-items:center;gap:6px;flex:none;padding:0 10px 0 12px;
  border-right:1px solid #E7DAC3;border-radius:10px 0 0 10px;color:#5A4B3E;
  font-weight:600;font-size:13.5px;white-space:nowrap}
.e-tel-btn:hover,.e-tel-btn-acik{background:#F3E9D6}
.e-tel-bayrak{font-size:16px;line-height:1}
.e-tel-ok{font-size:10px;color:#93826F}
.e-tel-panel{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:400;
  width:min(310px,88vw);background:#FFFFFF;border:1px solid #E0D2B8;border-radius:12px;
  box-shadow:0 14px 34px rgba(60,40,20,.22);overflow:hidden}
.e-tel-panel.acik{display:block}
.e-tel-ara{width:100%;padding:10px 13px;border:none;border-bottom:1px solid #F0E6D2;
  background:#FBF6EC;outline:none;color:#33271E;font-size:13.5px}
.e-tel-liste{max-height:232px;overflow-y:auto}
.e-tel-oge{display:flex;align-items:center;gap:9px;width:100%;padding:9px 13px;
  text-align:left;font-size:13.5px;color:#4A3B2E}
.e-tel-oge:hover{background:#F5EDDD}
.e-tel-secili{background:#F6E6DC;color:#B4532B;font-weight:700}
.e-tel-ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-tel-kod2{color:#93826F;font-weight:600;flex:none}
.e-tel-bos{padding:14px 13px;color:#93826F;font-size:13px}

/* ── Doğum tarihi (<input type="date">) — tarayıcı takvimi, ek bağımlılık yok ── */
.e-tarih{color:#33271E}
.e-tarih::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.65}
.e-tarih::-webkit-calendar-picker-indicator:hover{opacity:1}
.e-tarih:invalid{border-color:#C98A72 !important}

/* ── eDropdown (masaüstü özel açılır liste) ── */
.e-dd-btn:focus{border-color:#B4532B !important;outline:none}
.e-dd-opt:hover{background:#F5EDDD}
.e-dd-native:focus{border-color:#B4532B !important;outline:none}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — web sitesi telefonda/tablette tek kolona iner.
   (Tasarım masaüstü-sabitti; mobil kullanıcı hem burada hem uygulamada.)
   ══════════════════════════════════════════════════════════════════ */

/* Tablet ve altı: sağ ray kalkar, orta kolon genişler */
@media (max-width: 1080px) {
  #eRay { display: none !important; }
  .e-shell { max-width: 760px !important; }
}

/* Telefon/dar tablet: sol menü hamburger çekmecesine, tek kolon */
@media (max-width: 900px) {
  .e-ham { display: flex !important; }
  .e-header-inner { gap: 8px !important; padding: 10px 12px !important; }
  .e-arama { display: none !important; }        /* header araması gizli (yer dar) */
  .e-hmod { display: none !important; }          /* moderasyon çekmeceden erişilir */
  .e-kul-ad { display: none !important; }        /* avatar yanı isim gizli */

  .e-shell { padding: 12px !important; gap: 0 !important; max-width: 100% !important; }
  .e-main { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; }

  /* Sol menü → soldan açılan çekmece */
  .e-side {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 268px !important; max-width: 84vw;
    flex: none !important; min-width: 0 !important;
    z-index: 210 !important;
    background: #F3EADB;
    padding: 12px !important;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 34px rgba(0,0,0,.28);
  }
  .e-side.acik { transform: translateX(0); }

  /* Sağ alt sohbet dock'u telefonda taşmasın */
  #eDock { right: 12px !important; bottom: 12px !important; }
  #eDockWin { width: min(320px, calc(100vw - 24px)) !important; height: min(430px, 70vh) !important; }
}

/* Çok dar telefon: logo yazısı gizlenir, sadece amblem kalır */
@media (max-width: 420px) {
  .e-logo-text { display: none !important; }
  .e-header-inner { gap: 6px !important; }
}

/* ── Lightbox (akış medyası) mobilde: dikey yığıl, medya sınırlı, pencere kaydırılabilir → yoruma erişilir ── */
@media (max-width: 720px) {
  .elb-pencere { flex-direction: column; flex-wrap: nowrap !important; overflow-y: auto !important; max-height: 94vh !important; }
  .elb-sol { flex: none !important; min-height: 0 !important; max-height: 46vh; width: 100%; }
  .elb-sag { flex: none !important; min-height: 0 !important; max-height: none !important; width: 100%; }
  .elb-yorumlar { overflow: visible !important; }
}