/* =========================================================
   Spinchat - modernized & responsive stylesheet
   Original visual look preserved (colors, boxes, nav bar)
   but rebuilt with clean HTML5 + CSS, mobile friendly.
   ========================================================= */

:root{
  --page-bg:#ffffff;
  --cream:#fff1ca;          /* main box body   */
  --cream-head:#ffe9ad;     /* main box header */
  --cream-border:#e3cf95;
  --blue:#378fde;           /* nav bar         */
  --blue-hover:#5ca1de;
  --lblue:#cfdef6;          /* side box body / subnav */
  --lblue-head:#b5cef6;     /* side box header */
  --lblue-border:#b0acbb;
  --link:#0450bb;
  --text:#000000;
  --muted:#333333;
  --ruled:#ede6d0;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--text);
  font:14px/1.5 "Lucida Grande",Lucida,Verdana,Arial,Helvetica,sans-serif;
  -webkit-text-size-adjust:100%;
}
img{border:0;max-width:100%;height:auto;vertical-align:middle;}
a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{margin:0;font-size:100%;}

/* ---------- sticky header group (top bar + nav + subnav) ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--page-bg);
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}

/* ---------- top bar (logo + chat launcher + search) ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:6px 12px;
}
.topbar .logo img{height:60px;width:auto;display:block;}
.topsearch{margin-left:auto;display:flex;align-items:center;gap:6px;}
.topsearch input{padding:6px 9px;border:1px solid #256095;border-radius:4px;font-size:13px;width:170px;}
.topsearch input:focus{outline:none;box-shadow:0 0 0 2px rgba(55,143,222,.25);}
.topsearch button{padding:6px 14px;border:0;border-radius:4px;background:var(--blue);color:#fff;font-weight:bold;cursor:pointer;}
.topsearch button:hover{background:var(--blue-hover);}

/* ---------- main navigation ---------- */
.mainnav{
  background:var(--blue);
  color:#fff;
}
.mainnav .navinner{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
}
.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;flex:1 1 auto;
}
.mainnav li a{
  display:flex;align-items:center;gap:6px;
  color:#fff;font-weight:bold;font-size:15px;
  padding:6px 20px 6px 18px;
  border-right:1px solid #45657c;
  white-space:nowrap;
  flex:0 0 auto;
}
.mainnav li a .ic{width:16px;height:16px;object-fit:contain;}
.mainnav li a:hover{background:var(--blue-hover);text-decoration:none;}
.mainnav .logout a{background:transparent;}
.mainnav .logout a:hover{background:var(--blue-hover);}

/* ---------- priority navigation ("More" overflow menu) ---------- */
/* When JS is active the nav row never wraps: items that fit stay in the
   bar, the rest collapse into a "Menu" dropdown at the end of the row. */
.mainnav.prio ul{flex-wrap:nowrap;flex:1 1 0;min-width:0;}

/* "Menu" button is pinned to the far right of the nav row; any leftover
   space appears between the last visible item and the button. */
.nav-more{position:relative;margin-left:auto;}
.nav-more[hidden]{display:none;}
.more-btn{
  display:flex;align-items:center;gap:6px;
  color:#fff;font-weight:bold;font-size:15px;
  padding:6px 14px;border:0;border-right:1px solid #45657c;
  background:transparent;cursor:pointer;white-space:nowrap;
  font-family:inherit;
}
.more-btn:hover{background:var(--blue-hover);}
.mainnav .nav-more .more-menu{
  list-style:none;margin:0;padding:0;
  position:absolute;top:100%;right:0;z-index:50;
  min-width:190px;background:var(--blue);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  display:none;flex-direction:column;
}
.mainnav .nav-more.open .more-menu{display:flex;}

/* Fill the whole bar on small/tablet screens: once the overflow items are
   moved out, the remaining visible items stretch to use the leftover space
   so there is never an empty gap on the right, on any phone width.
   (Disabled on desktop where left-aligned items look better.) */
/* Kucuk/tablet ekranlarda menu ogeleri dogal genislikte, sola yasli kalir;
   oge adinin saginda yalnizca kucuk bir bosluk (padding) olur. Ogeler tum
   bari doldurmak icin gerilmez, boylece adlar saga asiri yaslanmaz. */
@media (max-width:900px){
  .mainnav.prio ul.filled > li{flex:0 0 auto;}
  .mainnav.prio ul.filled > li > a{width:auto;justify-content:flex-start;}
  .mainnav.prio ul.filled > li.nav-more{flex:0 0 auto;}
}
.more-menu li{width:100%;}
.more-menu li a{border-right:0;border-bottom:1px solid #45657c;width:100%;}
.more-menu li:last-child a{border-bottom:0;}

/* ---------- subnav ---------- */
.subnav{
  background:var(--lblue);
  font-weight:bold;
  padding:6px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.subnav a{margin:0 6px;}
.subnav .misafir-etiket{color:#555;font-weight:400;font-size:.9em;}

/* ---------- layout ---------- */
.content{
  max-width:1100px;
  margin:0 auto;
  padding:12px;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:14px;
}
.col-main{min-width:0;}
.col-side{min-width:0;}

/* two sub columns inside main (favorites / news vs alexa / tanks) */
.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* ---------- boxes ---------- */
.box{
  border-radius:9px;
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--cream-border);
}
.box .box-body{background:var(--cream);padding:12px 14px;}
/* kutu basligi (baslik cubugu) - box-body'nin ILK basligi */
.box .box-body > h1:first-child,
.box .box-body > h2:first-child,
.box .box-body > h3:first-child{
  background:var(--cream-head);
  border-bottom:1px solid var(--cream-border);
  padding:5px 14px;
  font-size:14px;font-weight:bold;
  margin:-12px -14px 10px;
}
/* icerik/metin icinde kullanilan basliklar (h2/h3/h4) - normal ust/alt bosluk */
.box .box-body h2,
.box .box-body h3,
.box .box-body h4,
.box .box-body h5{
  background:none;border:0;padding:0;
  font-weight:bold;line-height:1.3;color:inherit;
}
.box .box-body h2{font-size:19px;margin:.9em 0 .45em;}
.box .box-body h3{font-size:16px;margin:.8em 0 .4em;}
.box .box-body h4{font-size:14px;margin:.7em 0 .35em;}
.box .box-body h5{font-size:13px;margin:.6em 0 .3em;}
/* metin icindeki ilk baslik ust boslugu sifirlanmasin diye tekrar bar tanimi
   yalnizca gercek ilk cocuk icin gecerli (yukarida) */

/* blue side boxes */
.box.blue{border-color:var(--lblue-border);}
.box.blue .box-body{background:var(--lblue);}
.box.blue .box-body > h1:first-child,
.box.blue .box-body > h2:first-child,
.box.blue .box-body > h3:first-child{
  background:var(--lblue-head);
  border-bottom:1px solid var(--lblue-border);
}

/* ---------- favori sohbet odalari (ana sayfa) ---------- */
.rooms-wrap{display:flex;align-items:center;gap:12px;}
.rooms-wrap .homerooms{flex:1 1 auto;min-width:0;}
.rooms-side{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.rooms-side img{display:block;width:auto;height:auto;max-width:80px;max-height:110px;object-fit:contain;}

/* Ana sayfa ilk-giris formu (Rumuz + Varsa Sifre) */
.home-giris-wrap{display:flex;align-items:center;gap:12px;}
.home-giris{flex:1 1 auto;min-width:0;max-width:420px;}
.home-giris .hg-satir{display:block;margin-bottom:10px;}
.home-giris .hg-satir>span{display:block;font-size:13px;color:#666;margin-bottom:4px;}
.home-giris .hg-satir input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #ccd7e3;border-radius:8px;font:inherit;background:#fff;}
.home-giris .hg-satir input:focus{border-color:#378fde;outline:none;}
.home-giris .hg-aksiyon{margin-top:6px;}
.home-giris .hg-aksiyon button{width:100%;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#378fde;color:#fff;border:none;border-radius:22px;padding:11px 22px;font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
@media (hover:hover){.home-giris .hg-aksiyon button:hover{background:#5ca1de;}}
.home-giris .hg-aksiyon button:active{background:#2f7cc4;}
.home-giris .hg-alt{margin:10px 0 0;font-size:13px;color:#666;}
.home-giris .hg-alt a{color:#378fde;font-weight:600;text-decoration:none;}
.home-giris .hg-alt a:hover{text-decoration:underline;}
.home-giris .hg-hata{margin:0 0 10px;padding:9px 12px;border-radius:8px;background:#fdecec;border:1px solid #f2c2c2;color:#b02a2a;font-size:13px;}
@media (max-width:640px){
  .home-giris{max-width:100%;}
  .home-giris .hg-satir input{padding:12px 13px;font-size:16px;}
  .home-giris .hg-aksiyon button{padding:13px 22px;font-size:16px;min-height:48px;}
  .home-giris-wrap .rooms-side img{max-width:70px;max-height:100px;}
}
.homerooms{width:100%;border-collapse:collapse;background:transparent;}
.homerooms tr,.homerooms tr:nth-child(even){background:transparent;}
.homerooms td{
  padding:5px 4px;vertical-align:middle;background:transparent;
  border-bottom:1px solid #fff;
}
.homerooms tr:last-child td{border-bottom:0;}
.homerooms tr.room-row[data-href]{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.homerooms tr.room-row[data-href] td{transition:background .15s ease;}
@media (hover:hover){
  .homerooms tr.room-row[data-href]:hover td{background:#e9f2fb;}
  .homerooms tr.room-row[data-href]:hover .hr-name a{color:var(--blue);text-decoration:none;}
}
.homerooms tr.room-row[data-href]:active td{background:#dcebfa;}
.homerooms .hr-name{font-size:15px;}
.homerooms .hr-name a{
  color:var(--text);display:inline-flex;align-items:center;gap:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.homerooms .hr-name a:hover{text-decoration:underline;}
.homerooms tr.active .hr-name a{color:var(--link,#1a5fb4);}
.homerooms .hr-icon{width:28px;height:20px;object-fit:contain;flex:0 0 auto;vertical-align:middle;margin-right:-1px;}
.homerooms .hr-count{
  text-align:right;font-size:14px;font-weight:bold;
  color:var(--muted);white-space:nowrap;width:1%;
}
@media (max-width:640px){
  .homerooms td{padding:7px 4px;}
  .homerooms .hr-name{font-size:16px;}
  .homerooms .hr-icon{width:28px;height:20px;}
  .rooms-side img{max-width:70px;max-height:100px;}
}

/* ---------- login form (sohbet girisi) ---------- */.login-tabs{display:flex;gap:6px;margin-bottom:10px;}
.login-tabs button{
  flex:1;padding:8px;border:0;border-radius:4px;cursor:pointer;
  font-weight:bold;font-size:13px;color:#fff;background:var(--cream-border);
}
.login-tabs button.active{background:var(--blue);}

/* Spinchat tarzı giriş düzeni: resim solda, alanlar sağda.
   Resim yüksekliği üç kontrol + iki boşluk toplamına eşitlenir. */
.login-layout{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:14px;
  align-items:center;
}
.login-people{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.login-people img{
  display:block;
  width:100%;
  height:auto;
  max-width:120px;
  object-fit:contain;
}
.loginform{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.loginform input{
  padding:13px 14px;border:1px solid var(--cream-border);border-radius:7px;
  font-size:18px;background:#fffdf5;width:100%;box-sizing:border-box;
}
.loginform input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(55,143,222,.25);}
.loginform .btn-login{
  margin-top:0;padding:13px 16px;border:0;border-radius:7px;
  background:var(--blue);color:#fff;font-weight:bold;font-size:19px;cursor:pointer;
}
.loginform .btn-login:hover{background:var(--blue-hover);}
.loginform .btn-kayit{background:#007A3D;}
.loginform .btn-kayit:hover{background:#00964b;}

@media (max-width:640px){
  /* Mobilde de gorsel her zaman SOLDA kalir, form sagda; alt alta gecmez */
  .login-layout{grid-template-columns:110px minmax(0,1fr);gap:12px;}
  .login-people{height:auto;}
  .login-people img{height:auto;max-width:110px;width:100%;}
  .loginform{height:auto;gap:12px;}
  .loginform input,.loginform .btn-login{font-size:19px;padding-top:15px;padding-bottom:15px;}
}

@media (max-width:360px){
  .login-layout{grid-template-columns:88px minmax(0,1fr);gap:8px;}
  .login-people img{max-width:88px;}
  .loginform input,.loginform .btn-login{font-size:17px;padding-left:10px;padding-right:10px;}
}

/* ---------- greeting / overview grid ---------- */
.greet .avatar{
  border:4px solid #fff;box-shadow:0 0 0 1px #ddd;flex:0 0 auto;
}
.greet .greet-main{flex:1 1 220px;min-width:0;}
.greet h3{margin-bottom:8px;}
.overview{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12px;
}
.overview .item{display:flex;align-items:center;gap:8px;}
.overview .item img{width:41px;height:21px;object-fit:contain;}

/* room list */
.roomlist{width:100%;border-collapse:collapse;}
.roomlist td{padding:4px 3px;border-bottom:1px solid #fff;vertical-align:middle;}
.roomlist tr:nth-child(even){background:var(--ruled);}
.roomlist .rl-icon{width:34px;}
.roomlist .rl-count{text-align:right;font-size:11px;color:var(--muted);}

/* news / lists */
.news p{margin:0 0 .8em;font-size:13px;}
.k{font-size:12px;}
.xk{font-size:11px;}
ul.bullets{padding-left:20px;margin:.4em 0 .8em;}

/* poll banner */
.poll{font-size:13px;}

/* ---------- kategori filtre etiketleri (chips) ---------- */
.cat-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
.cat-chips .chip{
  display:inline-block;
  padding:5px 12px;
  border:1px solid var(--cream-border);
  border-radius:999px;
  background:#fffdf5;
  font-size:12px;font-weight:bold;
  color:var(--link);
  white-space:nowrap;
}
.cat-chips .chip:hover{background:var(--cream-head);text-decoration:none;}
.cat-chips .chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}

/* ---------- admin formlari (temiz, kendi stili) ---------- */
.form{display:flex;flex-direction:column;gap:14px;}
.form .field{display:flex;flex-direction:column;gap:5px;}
.form label{font-size:12px;font-weight:bold;color:var(--muted);}
.form input[type=text],
.form input[type=password],
.form select,
.form textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--cream-border);
  border-radius:5px;
  font:inherit;
  background:#fffdf5;
  color:var(--text);
}
.form textarea{resize:vertical;min-height:130px;line-height:1.5;}
.form input:focus,
.form select:focus,
.form textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(55,143,222,.25);
}
.form .thumb{max-width:180px;border:1px solid var(--cream-border);border-radius:6px;display:block;}
.form .btn{
  align-self:flex-start;
  padding:9px 22px;border:0;border-radius:5px;
  background:var(--blue);color:#fff;font-weight:bold;font-size:14px;cursor:pointer;
}
.form .btn:hover{background:var(--blue-hover);}

/* aktif menu vurgusu (admin + site) */
.mainnav li.on > a{background:var(--blue-hover);}

/* tablo icindeki islem butonlari icin ufak bosluk */
.roomlist form{margin:0;}
.roomlist .chip{margin:1px 2px;}

/* ---------- content media (icerik gorselleri) ---------- */
/* icerik + gorsel yan yana satiri (masaustu), mobilde alt alta */
.media-row{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.media-row .media{margin:0;}
.media-row .media-text{min-width:0;}
.media-row .media-text p{margin:0 0 .7em;}

/* tek gorsel + aciklama (masaustunde asiri buyumesin diye sinirli) */
.media{margin:0;}
.media img{
  display:block;width:100%;height:auto;
  border:1px solid var(--cream-border);border-radius:6px;
}
.media figcaption{
  font-size:12px;color:var(--muted);
  padding:6px 2px 0;text-align:center;
}
/* metnin yanina sarilan kucuk gorsel */
.media-inline{
  float:left;width:180px;max-width:45%;
  margin:2px 14px 8px 0;
}
.media-inline img{
  display:block;width:100%;height:auto;
  border:1px solid var(--cream-border);border-radius:6px;
}
.media-inline figcaption{font-size:11px;color:var(--muted);padding:4px 2px 0;text-align:center;}
/* birden fazla gorsel icin galeri izgarasi (resim + baslik kartlari) */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;margin:.4em 0;
}
.gallery .g-card{
  display:block;
  border:1px solid var(--cream-border);
  border-radius:6px;
  overflow:hidden;
  background:#fffdf5;
}
.gallery .g-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);text-decoration:none;}
.gallery .g-card img{
  display:block;width:100%;height:120px;object-fit:cover;
}
.gallery .g-title{
  display:block;
  padding:6px 8px;
  font-size:12px;font-weight:bold;line-height:1.35;
  color:var(--text);
  /* baslik iki satiri asarsa taspmadan ... ile kisalir */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:640px){
  .media-row{grid-template-columns:1fr;gap:12px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery img{height:110px;}
  .media-inline{width:140px;}
}

/* tanks */
.tanks img{float:left;margin:0 10px 6px 0;max-width:150px;}

/* ---------- footer ---------- */
.foot{max-width:1100px;margin:0 auto;padding:14px 12px 30px;color:#888;font-size:11px;text-align:center;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .content{grid-template-columns:1fr;}
  .two{grid-template-columns:1fr;}
}

/* On small screens shrink the top-bar search a little so the logo and
   search still share one line (logo left, search on the far right). */
@media (max-width:560px){
  .topsearch input{width:120px;}
}

@media (max-width:640px){
  .topbar{gap:10px;}
  .overview{grid-template-columns:1fr;}
  .subnav{font-size:13px;}
  .subnav a{display:inline-block;margin:2px 8px 2px 0;}
}

/* Sayfalama */
.pagination{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;align-items:center}
.pagination .chip.active{background:#2f6fb0;color:#fff;border-color:#2f6fb0}

/* =========================================================
   MOBIL OPTIMIZASYONU (iPhone + tum telefonlar)
   Yazilar okunakli, dokunma alanlari genis, yatay tasma yok.
   ========================================================= */

/* Yatay kaydirma / tasmayi engelle */
html,body{max-width:100%;overflow-x:hidden;}

@media (max-width:640px){
  /* Genel govde yazisini biraz buyut */
  body{font-size:15px;}

  /* Ust bar: logo + arama tek satirda, arama alta tasabilir */
  .topbar{padding:8px 12px;gap:10px;row-gap:8px;}
  .topbar .logo img{height:48px;}
  .topsearch{margin-left:auto;}
  .topsearch input{width:130px;font-size:15px;padding:8px 10px;}
  .topsearch button{padding:8px 14px;font-size:14px;}

  /* Menu ogeleri dokunmasi kolay olsun */
  .mainnav li a,.more-btn{font-size:15px;padding-top:9px;padding-bottom:9px;}

  /* Kutu icerigi ve basliklar */
  .box .box-body{padding:12px;}
  .box .box-body > h1:first-child,
  .box .box-body > h2:first-child,
  .box .box-body > h3:first-child{font-size:15px;padding:7px 12px;margin:-12px -12px 10px;}
  .box .box-body h2{font-size:18px;}
  .box .box-body h3{font-size:16px;}

  /* Kucuk yazilari okunur boyuta cek */
  .overview{font-size:14px;gap:8px 14px;}
  .news p{font-size:15px;}
  .k{font-size:14px;}
  .xk{font-size:13px;}
  .poll{font-size:14px;}
  .roomlist td{padding:7px 4px;}
  .roomlist .rl-count{font-size:12px;}
  .cat-chips .chip{font-size:14px;padding:7px 14px;}
  .subnav{font-size:14px;}
}

/* Cok dar iPhone ekranlari (SE / mini vb.) */
@media (max-width:400px){
  .topbar .logo img{height:52px;}
  .topsearch input{width:110px;}
  .box .box-body h2{font-size:17px;}
}