/* ==================================================================== */
/* ===  KÖK RENK TANIMLARI                                            */
/* ==================================================================== */
:root{
  --pembe: #d12492;                      /* Temanın ana fosforlu pembesi   */
  --siyah: #0a0a0a;                      /* En koyu zemin                  */
  --beyaz: #fff;                         /* Düz beyaz                      */
  --gri  : #1e1e1e;                      /* İkincil koyu ton               */
  --parlak-golge: rgba(209,36,146,.45);  /* Pembe gölge  / glow            */
  --cam-zemin  : rgba(255,255,255,.06);  /* Transparan cam iç rengi        */
  --cam-kenar  : rgba(255,255,255,.18);  /* Cam kutu kenar parlaması       */
}

/* ==================================================================== */
/* ===  RESET & GENEL                                                     */
/* ==================================================================== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Segoe UI',sans-serif;                 /* Modern sistem fontu     */
  background:linear-gradient(               /* Koyu degrade zemin          */
    135deg,var(--siyah) 0%,#1a1a1a 100%);
  color:var(--beyaz);
  min-height:100vh;display:flex;flex-direction:column;
}
main{flex:1;}                                         /* Footer’ı alta iter      */

/* ==================================================================== */
/* ===  HEADER  (Cam efekti + pembe neon çizgi)                         */
/* ==================================================================== */
header{
  position:sticky;top:0;z-index:100;                 /* Scroll’da sabit         */
  backdrop-filter:blur(14px) saturate(1.4);          /* Asıl cam efekti         */
  background:rgba(209,36,146,.5);                    /* Pembe yarı saydam       */
  box-shadow:0 2px 26px var(--parlak-golge);         /* Neon pembe alt gölge    */
}
header .container{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 40px;flex-wrap:wrap;
}
.logo{font-size:28px;font-weight:700;text-shadow:2px 2px 4px #000;}
.logo a{color:var(--beyaz);text-decoration:none;}
.logo a:hover{color:#ffd3eb;}
.logo span{background:var(--beyaz);color:#000;padding:2px 6px;border-radius:6px;}

/* -------------------------------------------------------------------- */
/* NAVIGASYON (Header içi)                                              */
/* -------------------------------------------------------------------- */
nav ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap;}
nav a{
  color:var(--beyaz);text-decoration:none;font-weight:bold;
  padding:10px;border-radius:8px;transition:.3s;
}
nav a:hover{background:rgba(255,255,255,.18);backdrop-filter:blur(4px);}
.btn-nav{background:var(--beyaz);color:var(--pembe);}
.btn-nav:hover{background:var(--pembe);color:var(--beyaz);}
.btn-exit{font-size:22px;padding:4px 14px;line-height:1;}
.btn-exit:hover{background:rgba(255,255,255,.18);color:var(--pembe);}

/* ================================================================== */
/* === ADMIN TOPBAR  (Yönetim üst şeridi + açılır Referans menüsü) === */
/* ================================================================== */

/* Şerit; zaten #333 zemin ve flex yapıda — sadece dikey ortaladık */
.admin-topbar{
  width:100%;
  background:#333;
  padding:12px 20px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;            /* 🔹 Üyeler – Referans aynı yükseklik */
}

/* Düğmeler & “Referans ▾” metni */
.admin-topbar > a,
.admin-topbar .drop > span{
  background:#444;
  color:#fff;
  font-weight:bold;
  padding:8px 16px;
  border-radius:6px;
  text-decoration:none;
  display:inline-flex;           /* 🔹 Hover alanı tam dolsun            */
  align-items:center;
  cursor:pointer;
  transition:.3s;
}
.admin-topbar > a:hover,
.admin-topbar .drop > span:hover{
  background:var(--pembe);
}

/* “Referans” kapsayıcısı – pozisyon referansı */
.admin-topbar .drop{
  display:inline-flex;           /* 🔹 Üyeler linkiyle aynı hizada       */
  align-items:center;
  position:relative;
}

/* Açılır kutu */
.admin-topbar .drop-content{
  position:absolute;
  top:calc(100% - 2px);          /* 🔹 Şeride yapışık (boşluk yok)      */
  left:0;
  background:#444;
  border-radius:0 0 6px 6px;     /* Üst köşeler sıfır – şeritle bütün  */
  min-width:180px;
  display:none;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  z-index:5;
}
.admin-topbar .drop-content a{
  display:block;
  padding:10px;
  color:#fff;
  text-decoration:none;
}
.admin-topbar .drop-content a:hover{background:var(--pembe);}
.admin-topbar .drop:hover .drop-content{display:block;}  /* 🔹 Hover ile açılır */

/* ==================================================================== */
/* ===  CAM KUTU / GLASS BOX                                           */
/* ==================================================================== */
.glass-box{
  background:var(--cam-zemin);
  border:1px solid var(--cam-kenar);
  border-radius:20px;padding:30px;
  backdrop-filter:blur(10px);
  box-shadow:0 0 22px var(--parlak-golge);
  max-width:1100px;width:100%;margin:40px auto;
}
/* Hata listesi görünümü */
.glass-box ul{margin-left:20px;} .glass-box li{margin-bottom:6px;}

/* ==================================================================== */
/* ===  KARE GÖRSEL KUTULAR  (Ana sayfa & Referans Grid)               */
/* ==================================================================== */
.grid-section{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:30px;padding:50px;background:#181818;
  justify-items:center;justify-content:center;
}
.grid-box{
  width:200px;height:200px;border-radius:20px;overflow:hidden;cursor:pointer;
  background-size:cover;background-position:center;
  box-shadow:0 0 15px var(--parlak-golge);
  position:relative;transition:.3s;
}
.grid-box::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);}
.grid-box span{
  position:absolute;bottom:10px;left:10px;font-weight:700;font-size:16px;
  color:var(--beyaz);text-shadow:1px 1px 4px #000;z-index:2;
}
.grid-box:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(209,36,146,.9);}
.grid-section a:link,.grid-section a:visited{color:inherit;}  /* Başlık beyaz kalsın */

/* Responsive kırılımlar: 4-3-2 kutu */
@media(max-width:1200px){.grid-section{grid-template-columns:repeat(4,1fr);}}
@media(max-width:992px ){.grid-section{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px ){
  .grid-section{grid-template-columns:repeat(2,1fr);gap:20px;padding:30px;}
  .grid-box{width:160px;height:160px;} .grid-box span{font-size:14px;}
}
@media(max-width:480px){
  .grid-box{width:120px;height:120px;} .grid-box span{font-size:12px;}
}

/* ==================================================================== */
/* ===  BUTON / LİNK  (Neon gölgeli)                                   */
/* ==================================================================== */
.btn,.btn-main{
  display:inline-block;padding:12px 30px;border-radius:30px;
  background:var(--pembe);color:var(--beyaz);font-weight:bold;
  box-shadow:0 0 15px rgba(209,36,146,.6);text-decoration:none;transition:.3s;
}
.btn:hover,.btn-main:hover{background:var(--beyaz);color:var(--pembe);
  box-shadow:0 0 25px rgba(209,36,146,.9);}
@media(max-width:480px){.btn,.btn-main{font-size:14px;padding:10px 20px;}}

/* ==================================================================== */
/* ===  FORMLAR  (Cam panel + okunabilir alanlar)                      */
/* ==================================================================== */
form{
  background:var(--cam-zemin);              /* yarı saydam cam iç          */
  border:1px solid var(--cam-kenar);        /* parlak kenar çizgisi        */
  border-radius:15px;
  padding:30px;
  backdrop-filter:blur(6px);                /* bulanıklık efekti           */
  box-shadow:0 0 18px var(--parlak-golge);  /* pembe glow                  */
  max-width:500px;
  margin:20px auto;
}

/* -- GİRİŞ ALANLARI -------------------------------------------------- */
input,
textarea,
select{
  width:100%;
  padding:10px;
  margin-bottom:15px;
  border-radius:8px;
  background:rgba(255,255,255,.08);         /* koyu yarı saydam zemin      */
  border:1px solid rgba(255,255,255,.20);   /* ince kenar                  */
  color:var(--beyaz);                       /* beyaz metin                 */
  font-size:15px;
  backdrop-filter:blur(4px);
  transition:.3s;
}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--pembe);                /* odakta pembe kenar          */
  outline:none;
}

/* Placeholder yazıları da görünür olsun */
input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.60);              /* Soluk beyaz                 */
}

/* -- SELECT Kutusu + açılır option rengi ----------------------------- */
select{
  background:#222;                          /* koyu iç zemin               */
}
select option{
  background:#222;
  color:var(--beyaz);
}

/* -- DOSYA SEÇ DÜĞMESİ ---------------------------------------------- */
input[type="file"]{
  background:none;border:none;padding:4px;  /* Çıplak alan                 */
}
input[type="file"]::file-selector-button{
  background:var(--pembe);                  /* Tema rengi buton            */
  color:var(--beyaz);
  border:none;
  padding:6px 14px;
  border-radius:6px;
  cursor:pointer;
  transition:.25s;
}
input[type="file"]::file-selector-button:hover{
  background:var(--beyaz);                  /* Hover – renk ters çevir     */
  color:var(--pembe);
}

/* -- LABEL ----------------------------------------------------------- */
label{
  display:block;
  margin-bottom:5px;
  font-weight:bold;
  color:var(--beyaz);                       /* etiket beyaz                */
}


/* ==================================================================== */
/* ===  TABLO  (Hakkımızda & Üye listesi)                              */
/* ==================================================================== */
.about-table{
  width:100%;max-width:1000px;margin:0 auto;border-collapse:collapse;
  background:rgba(255,255,255,.04);backdrop-filter:blur(2px);
  border-radius:10px;overflow:hidden;
}
.about-table th,.about-table td{
  padding:14px 18px;border:1px solid rgba(255,255,255,.11);text-align:left;
}
.about-table th{background:rgba(209,36,146,.22);font-weight:bold;}
.about-table tr:hover{background:rgba(255,255,255,.06);}
@media(max-width:600px){
  .about-table th,.about-table td{padding:10px;font-size:14px;}
}
/* === Referans listesi – işlem düğmeleri ============================ */
.ref-actions{white-space:nowrap;}                       /* yan-yana tut    */

/* Düzenle düğmesi – mevcut .btn’den daha kompakt */
.btn-edit{
  display:inline-block;
  padding:6px 22px;
  background:var(--pembe);
  color:var(--beyaz);
  font-weight:bold;
  border-radius:30px;
  text-decoration:none;
  margin-right:8px;                                    /* X ile aralık    */
  transition:.25s;
}
.btn-edit:hover{background:var(--beyaz);color:var(--pembe);}

/* Sil düğmesi – kırmızı-siyah mini yuvarlak */
.btn-delete{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:34px;height:34px;                               /* Kare kutu       */
  background:#550000;                                  /* koyu kırmızı    */
  color:#fff;font-size:22px;line-height:1;
  border-radius:50%;
  text-decoration:none;
  transition:.25s;
}
.btn-delete:hover{background:#d40000;}

/* ==================================================================== */
/* ===  REFERANS DETAY – SLIDER (728 px kutu)                          */
/* ==================================================================== */
.slider{
  position:relative;max-width:728px;max-height:728px;margin:30px auto;
  overflow:hidden;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:#111;
}
.slider img{max-width:100%;max-height:100%;object-fit:contain;display:none;}
.slider img.active{display:block;}
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer;transition:.25s;
}
.nav-btn:hover{background:var(--pembe);}
#prev{left:10px;} #next{right:10px;}
@media(max-width:800px){
  .nav-btn{top:auto;bottom:12px;transform:none;}
  #prev{left:calc(50% - 60px);} #next{right:calc(50% - 60px);}
}
.ref-info{max-width:728px;margin:25px auto;}

/* ==================================================================== */
/* ===  FOOTER                                                         */
/* ==================================================================== */
footer{
  background:#222;padding:20px;text-align:center;font-size:14px;color:#aaa;
  border-top:2px solid var(--pembe);
}

/* ==================================================================== */
/* ===  İLETİŞİM KUTUSU & HARİTA                                       */
/* ==================================================================== */
.contact-section{
  display:flex;flex-wrap:wrap;justify-content:center;gap:40px;padding:50px;
}
.contact-info{
  flex:1;min-width:250px;max-width:400px;background:var(--cam-zemin);
  border:1px solid var(--cam-kenar);border-radius:15px;padding:30px;
  backdrop-filter:blur(6px);
}
.contact-info h2{margin-bottom:15px;color:var(--pembe);}
.contact-info p{margin-bottom:10px;font-size:16px;}
.contact-info a{color:var(--beyaz);text-decoration:none;}            /* Tel link rengi   */
.contact-info a:hover{color:var(--pembe);}                           /* Hover pembe      */
.contact-map{
  flex:1;min-width:250px;max-width:400px;border-radius:15px;overflow:hidden;
  box-shadow:0 0 15px var(--parlak-golge);
}
@media(max-width:768px){
  .contact-section{flex-direction:column;align-items:center;}
}
/* === Referans listesi küçük ön-izleme ============================ */
.ref-thumbs{
  display:flex;                 /* Yan yana göstersin              */
  gap:6px;
}
.ref-thumbs img{
  width:100px;height:100px;     /* Kesin boyut                     */
  object-fit:cover;             /* Görseli ortalayarak kırp        */
  border-radius:6px;
  box-shadow:0 0 6px rgba(0,0,0,.4);
}
.btn-del{
  background:#550000;
  color:#fff;
  border:none;
  border-radius:50%;
  width:32px;height:32px;
  font-size:18px;cursor:pointer;
  transition:.25s;
}
.btn-del:hover{background:#d40000;}
.preview{
  width:100px;height:100px;object-fit:cover;border-radius:6px;
  box-shadow:0 0 6px rgba(0,0,0,.4);
}
/* === CAPTCHA + BUTON satırı ===================================== */
.captcha-line{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:6px;
}

.code-box{
  font:700 18px/1 'Courier New', monospace;
  background:#333;
  padding:6px 12px;
  border-radius:6px;
}

.code-input{
  width:80px;                         /* ⬅  sabit 80 px */
  text-align:center;
  font-weight:bold;
}

/* Gönder / İptal küçük ek boşluk */
.captcha-line .btn-main,
.captcha-line .btn{
  margin-top:0;                       /* üst boşluk kalmasın */
}

@media(max-width:500px){
  .captcha-line{gap:8px}
}
.thumbnail,
.ref-thumbs img{
  width:100px;height:100px;object-fit:cover;border-radius:6px;
}
footer.footer-3bolum {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 20px;
  text-align: left;
}

/* Alt bölümler */
.footer-left,
.footer-center,
.footer-right {
  flex: 1 1 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Reklam kutusu ortalanmış */
.footer-center {
  align-items: center;
}
.footer-reklam img {
  max-height: 80px;
  object-fit: contain;
}

/* Küçük ekranlarda alt alta */
@media(max-width: 768px){
  footer.footer-3bolum {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-left, .footer-center, .footer-right {
    align-items: center;
  }
}
/* Sadece footer içindeki butonlar için özel daraltma */
footer.footer-3bolum .btn-main {
  padding: 10px 24px;             /* Genişliği azaltılmış */
  font-size: 15px;
  max-width: 200px;               /* Sabit genişlik sınırı */
  text-align: center;
  align-self: center;             /* Ortala */
}
@media (max-width: 480px){
  footer.footer-3bolum .btn-main {
    padding: 8px 18px;
    font-size: 14px;
    max-width: 160px;
  }
}