/* =========================  styles.css v3.0  ========================= */

/* ---------- Genel ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f5f5f5;
    color: #333;
}

/* ---------- Üst Başlık ---------- */
header {
    background: #00acee;
    padding: 25px;
    text-align: center;
}
header h1  { color: #fff; font-size: 26px; margin-bottom: 6px; }
header p   { color: #e0f7ff; }

/* ---------- Grid & Kart Yapısı ---------- */
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 20px;
}

.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    padding: 15px;
}

.card h2 { font-size: 20px; margin-bottom: 10px; color: #00acee; }

.full { grid-column: 1 / -1; }          /* geniş kart (form & ana feed) */

/* ---------- Mini Feed’ler ---------- */
.mini-feed .tweet {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.mini-feed .tweet:last-child { border-bottom: none; }

.mini-feed h3 { font-size: 16px; margin: 4px 0; color: #add8e6; }
.mini-feed p  { font-size: 14px; color: #555; }

/* ---------- Trend Bulutu ---------- */
.trends-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.trends-cloud a {
    background: #e0f7ff;
    color: #0077b6;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s;
}
.trends-cloud a:hover { background: #b2ebff; }

/* ---------- Tweet Gönderme Formu ---------- */
#tweet-form input,
#tweet-form textarea {
    width: 100%;
    padding: 15px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
#tweet-form button {
    background: #00acee;
    color: #fff;
    padding: 15px 35px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
}

/* ---------- Ana Timeline Feed ---------- */
#tweet-feed { margin: 20px; }

.tweet {
    border-bottom: 1px solid #d3d3d3;
    padding: 25px 0;
}
.tweet:last-child { border-bottom: none; }

.tweet h2 {
    color: #add8e6;
    font-size: 24px;
    margin: 6px 0;
    font-weight: normal;
}
.tweet p { color: #778899; font-style: italic; font-size: 18px; margin: 6px 0; }
.timestamp { font-size: 12px; color: #999; }

/* ---------- Butonlar ---------- */
.like-btn,
.reply-toggle,
.reply-form button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background .2s;
}

/* Beğen */
.like-btn { background: #00acee; color: #fff; }
.like-btn:hover { background: #0090c4; }

/* Yorum butonları */
.reply-toggle,
.reply-form button { background: #ff7f00; color: #fff; }
.reply-toggle:hover,
.reply-form button:hover { background: #e06d00; }

/* ---------- Yorum Kutusu ---------- */
.reply-form-wrap { margin-top: 10px; }

.reply-form input,
.reply-form textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.comment {
    background: #fafafa;
    border-left: 4px solid #00acee;
    margin: 6px 0;
    padding: 6px 10px;
    font-size: 14px;
}
.c-nick { color: #00acee; font-weight: bold; }
.c-time { color: #999; font-size: 11px; margin-left: 4px; }

/* ---------- Flash Animasyonu ---------- */
@keyframes flashIn {
    from { background: #fffbe6; }
    to   { background: transparent; }
}
.tweet.flash { animation: flashIn 2s ease; }

/* ---------- Kayan Panel ---------- */
.kayan-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #87CEEB;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    z-index: 999;
}

/* ---------- Mobil Düzen ---------- */
@media (max-width: 600px) {
    .home-grid { grid-template-columns: 1fr; }
    header h1  { font-size: 22px; }
    .tweet h2  { font-size: 20px; }
    .tweet p   { font-size: 16px; }
}