:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --card:#ffffff;
  --accent:#f59e0b; --success:#10b981; --danger:#ef4444; --shadow:0 4px 24px rgba(0,0,0,.06);
}
[data-theme="dark"]{
  --bg:#0b0f16; --text:#e5e7eb; --muted:#9ca3af; --border:#1f2937; --card:#0f1520;
  --accent:#fbbf24; --success:#34d399; --danger:#f87171; --shadow:0 6px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:var(--bg); color:var(--text);
  transition:background .4s ease,color .4s ease;
}
.container{max-width:980px;margin:0 auto;padding:0 16px 80px}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:20; background:var(--bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(130%) blur(6px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:28px;height:28px;border-radius:8px;background:var(--accent);color:#1f2937;
  display:grid;place-items:center;font-weight:900
}
.site{font-weight:800;text-decoration:none;color:var(--text)}
.header-right{display:flex;align-items:center;gap:10px}
.theme-toggle{
  border:1px solid var(--border);border-radius:10px;background:var(--card);
  width:40px;height:40px;font-size:18px;display:grid;place-items:center;cursor:pointer;
  transition:transform .25s ease
}
.theme-toggle:hover{transform:rotate(25deg)}
.profile-btn{
  width:40px;height:40px;border-radius:50%;background:#4f46e5;color:#fff;font-weight:900;
  display:grid;place-items:center;cursor:pointer;border:none;outline:none;
  box-shadow:0 3px 12px rgba(0,0,0,.25);
  transition:transform .2s ease,box-shadow .2s ease
}
.profile-btn:hover{transform:scale(1.08);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.profile-btn:focus,.profile-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.profile-btn::before,.profile-btn::after{content:none!important}
.profile-btn::-moz-focus-inner{border:0}

/* ===== Profil menüsü ===== */
.profile-wrap{position:relative;display:inline-block}
.profile-menu{
  position:absolute;right:0;top:48px;min-width:220px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:50
}
.menu-item{
  display:flex;align-items:center;gap:8px;width:100%;
  border:0;background:transparent;color:inherit;text-decoration:none;
  padding:10px 12px;border-radius:10px;cursor:pointer;font:inherit;text-align:left
}
.menu-item:hover{background:rgba(0,0,0,.06)}
[data-theme="dark"] .menu-item:hover{background:rgba(255,255,255,.06)}
.menu-item.danger{color:var(--danger);font-weight:700}

/* ===== Coin başlığı ===== */
.pair{
  margin:16px 0;padding:14px;border:1px solid var(--border);border-radius:16px;background:var(--card);
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;box-shadow:var(--shadow)
}
.coin-logo{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#f3f4f6;display:grid;place-items:center}
.coin-logo img{width:44px;height:44px;object-fit:cover}
.pair-meta{display:flex;flex-direction:column;min-width:0}
.name-line{display:flex;align-items:center;gap:10px;min-width:0}
.name{font-weight:800;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.symbol{font-size:12px;color:var(--muted);font-weight:700}
.price-box{text-align:right}
.price{font-weight:800;font-size:22px;white-space:nowrap}
.chg{font-weight:700;font-size:14px}
.pos{color:var(--success)}.neg{color:var(--danger)}
.realtime{margin-top:4px;color:var(--muted);font-size:12px}
.back{
  display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  background:var(--card);border-radius:10px;padding:8px 12px;text-decoration:none;color:var(--text)
}
@media(max-width:640px){
  .pair{grid-template-columns:auto 1fr}
  .price-box{grid-column:1 / -1;text-align:left}
}

/* ===== Yorum kutusu ===== */
.compose{
  margin-top:14px;border:1px solid var(--border);border-radius:12px;background:var(--card);
  padding:10px;display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow)
}
.compose textarea{
  flex:1;resize:vertical;min-height:64px;border:0;outline:none;font:inherit;
  background:transparent;color:var(--text)
}
.compose .send{
  background:var(--accent);color:#1f2937;border:0;padding:10px 14px;
  border-radius:10px;font-weight:800;cursor:pointer;transition:filter .2s ease
}
.compose .send:hover{filter:brightness(.95)}
.rules{margin:8px 2px;font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;align-items:center;margin-top:8px}
.select,.search{
  border:1px solid var(--border);background:var(--card);
  border-radius:10px;padding:8px 10px;color:var(--text)
}
.search{flex:1;display:flex;align-items:center;gap:8px}
.search input{flex:1;border:0;outline:none;background:transparent;color:var(--text);font:inherit}
.counter{margin-left:auto;color:var(--muted);font-size:12px}

/* ===== Yorum listesi ===== */
.list{
  margin-top:6px;border:1px solid var(--border);border-radius:14px;background:var(--card);
  overflow:hidden;box-shadow:var(--shadow)
}
.comment{border-top:1px solid var(--border);padding:14px}
.comment:first-child{border-top:0}
.row{display:flex;align-items:flex-start;gap:10px}
.avatar{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  font-weight:800;color:#fff;background:#4f46e5;flex:0 0 auto;
  user-select:none;
}
.body{flex:1;min-width:0}
.meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.who{font-weight:800;color:var(--text);font-size:14px}
.text{margin-top:6px;line-height:1.55;word-wrap:break-word;white-space:pre-wrap}
.actions{margin-top:8px;display:flex;gap:12px;align-items:center;color:var(--muted);font-size:14px}
.actions button{
  border:0;background:transparent;color:inherit;cursor:pointer;padding:4px 6px;border-radius:8px;
  transition:background .15s ease, transform .05s ease;
}
.actions button:hover{background:rgba(0,0,0,.05)}
[data-theme="dark"] .actions button:hover{background:rgba(255,255,255,.06)}
.actions button:active{transform:scale(.98)}
.actions button[disabled]{opacity:.6;cursor:not-allowed}
.actions button.active{font-weight:800;text-decoration:underline}
.empty{padding:16px;color:var(--muted)}

/* Oy butonları netlik için */
.actions .up.active{color:var(--success)}
.actions .down.active{color:var(--danger)}

/* Kilit ikonu hizası */
.lock{margin-left:auto;opacity:.8}

/* Zaman etiketi rozet gibi dursun */
.time{
  padding:2px 8px;border:1px solid var(--border);border-radius:999px;
  line-height:1;background:var(--card);color:var(--muted);
}

/* ===== Auth Modal (ortak) ===== */
.auth-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);
  display:block;z-index:40
}
.auth-modal{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw,480px);background:var(--card);color:var(--text);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);z-index:41;padding:14px
}
.auth-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.auth-head h3{margin:0;font-size:18px;font-weight:800}
.auth-close{
  border:1px solid var(--border);background:var(--card);border-radius:10px;cursor:pointer;
  width:36px;height:36px;display:grid;place-items:center
}

/* ===== Sekmeler ===== */
.auth-tabs{
  display:flex;gap:6px;margin:8px 0 10px;background:var(--card)
}
.auth-tab{
  flex:1;padding:10px 12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);
  border-radius:10px;cursor:pointer;font-weight:800;text-align:center
}
.auth-tab.active{
  background:var(--accent);color:#1f2937;border-color:var(--accent)
}

/* ===== Paneller ve Form ===== */
.auth-panel[hidden]{display:none !important}
.auth-form{display:grid;gap:10px}
.auth-label{display:grid;gap:6px;font-weight:700}
.auth-label input[type="text"],
.auth-label input[type="email"],
.auth-label input[type="password"],
.auth-label input[type="color"],
.auth-label select{
  border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);
  padding:10px;font:inherit
}
.auth-label select{cursor:pointer}
.gender-group{display:flex;gap:16px;align-items:center;margin-top:4px}
.gender-option{display:flex;align-items:center;gap:6px}
.gender-option input[type="radio"]{accent-color:var(--accent);width:16px;height:16px}
.auth-hint{font-size:12px;color:var(--muted);line-height:1.4;margin-top:-2px}
.auth-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.auth-submit{
  background:var(--accent);color:#1f2937;border:0;
  padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer
}
.auth-submit.danger{background:var(--danger);color:#fff}
.auth-cancel{
  border:1px solid var(--border);background:var(--card);color:var(--text);
  padding:10px 14px;border-radius:10px;cursor:pointer
}

/* küçük linkler (login altı) */
.auth-links{display:flex;align-items:center;gap:8px;margin-top:-4px}
.auth-links .link{
  border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 2px;
  text-decoration:underline;font-size:13px
}
.auth-links .sep{color:var(--muted)}

/* ===== Genel gizleme ===== */
[hidden]{display:none !important}

/* ===== Erişilebilir profil linkleri (avatar & isim) ===== */
/* JS, avatar ve isme role="link" ekliyor. Burada görsel ipuçlarını veriyoruz. */
.avatar[role="link"], .who[role="link"]{ cursor:pointer; }
.who[role="link"]{
  text-decoration:underline;
  text-underline-offset:2px;
}
.avatar[role="link"]:focus-visible,
.who[role="link"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:10px;
}

/* ====== Devamını Göster (sayfalama) ====== */
.cm-loadmore,
#loadMoreBtn{
  margin:12px auto 0;
  display:block;
  padding:10px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.cm-loadmore:hover,
#loadMoreBtn:hover{
  transform:translateY(-1px);
  background:rgba(0,0,0,.04);
}
[data-theme="dark"] .cm-loadmore:hover,
[data-theme="dark"] #loadMoreBtn:hover{
  background:rgba(255,255,255,.06);
}
.cm-loadmore:focus-visible,
#loadMoreBtn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.cm-loadmore[disabled],
#loadMoreBtn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Liste + buton aralığı */
.list + .cm-loadmore,
.list + #loadMoreBtn{
  margin-top:14px;
}

/* Küçük ekranlarda nefes alanı */
@media(max-width:640px){
  .cm-loadmore,
  #loadMoreBtn{ width:100%; }
}



/* ===============================
   CoinMerkez • coin-blog alanı
   =============================== */
.coin-blog {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.coin-blog .blog-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Görsel alanı */
.coin-blog .blog-media {
  flex: 0 0 220px;
  max-width: 220px;
  overflow: hidden;
  background: #111;
}
.coin-blog .blog-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* İçerik alanı */
.coin-blog .blog-body {
  flex: 1;
  padding: 1rem 1.25rem;
}

.coin-blog .blog-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.coin-blog .blog-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.coin-blog .blog-meta .blog-dot {
  margin: 0 0.4rem;
  opacity: 0.6;
}

/* İçerik (kısaltma + aç/kapa) */
.coin-blog .blog-excerpt {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  --excerpt-max: 100px;                 /* varsayılan kısaltma yüksekliği */
  max-height: var(--excerpt-max);
  overflow: hidden;
  position: relative;
  transition: max-height 240ms ease;
}

/* Altta yumuşak gölge/gradient ile devam hissi */
.coin-blog .blog-excerpt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--card));
}

/* AÇIK DURUM: yüksek özgüllük + !important ile garantile */
.coin-blog .blog-excerpt.is-open {
  max-height: none !important;
}
.coin-blog .blog-excerpt.is-open::after {
  display: none !important;
}

/* Toggle butonu */
.blog-toggle {
  display: inline-block;
  margin: 0.6rem 0 0;
  font: inherit;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.blog-toggle:hover {
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  .coin-blog .blog-inner { flex-direction: column; }
  .coin-blog .blog-media {
    max-width: 100%;
    height: 180px;
  }
}

/* Masaüstünde biraz daha kısa kısaltma */
@media (min-width: 768px) {
  .coin-blog .blog-excerpt { --excerpt-max: 100px; }
}


/* ==== Canlı (yanıp sönen) ikon ==== */
.live-dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  background-color:#10b981; /* yeşil */
  margin-right:8px;
  box-shadow:0 0 0 0 rgba(16,185,129,0.6);
  animation:pulseLive 1.8s infinite;
  vertical-align:middle;
}

@keyframes pulseLive {
  0% { box-shadow:0 0 0 0 rgba(16,185,129,0.6); }
  70% { box-shadow:0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(16,185,129,0); }
}