/* ================================================
   18 - TIMELINE JOURNEY
   Dikey çizgi CSS pseudo-element zaman çizelgesi, gönderiler
   için dönüşümlü sol-sağ flex düzeni, tarih tabanlı tipografi
   hiyerarşisi, yapışkan yıl işaretçileri, dairesel avatar
   odaklı tasarım, kaydırma ile tetiklenen kayma animasyonları,
   kart tabanlı konu kapsülleri, sessiz pastel renk kodlaması,
   sans-serif okunabilirlik odağı, mobil tek sütun yedeği
   ================================================ */

:root{
  --tl-bg:#F9FAFB;
  --tl-surface:#FFFFFF;
  --tl-text:#1F2937;
  --tl-text2:#6B7280;
  --tl-primary:#8B5CF6;
  --tl-primary-light:#EDE9FE;
  --tl-secondary:#F59E0B;
  --tl-border:#E5E7EB;
  --tl-line:#D1D5DB;
  --tl-radius:12px;
  --tl-font:'Nunito',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--tl-bg);color:var(--tl-text);font:400 15px/1.7 var(--tl-font);-webkit-font-smoothing:antialiased}
h1{font-size:clamp(22px,3.5vw,32px);font-weight:800;color:var(--tl-text);margin:0 0 12px}
h2{font-size:clamp(17px,2.5vw,24px);font-weight:700;color:var(--tl-text);margin:0 0 8px}
h3{font-size:16px;font-weight:700;color:var(--tl-text);margin:0 0 6px}
a:link,a:visited{color:var(--tl-primary);text-decoration:none;transition:color .15s}
a:hover{color:#7C3AED}
img{max-width:100%;height:auto}

.tl-wrap{max-width:900px;margin:0 auto;padding:0 20px}
#container{text-align:left}

/* == HEADER: Ortalanmış, temiz == */
#tl-header{
  text-align:center;
  padding:32px 0;
  border-bottom:2px solid var(--tl-primary);
}
.tl-logo{font:800 28px var(--tl-font);color:var(--tl-text)}
.tl-logo a{color:inherit;text-decoration:none}
.tl-logo a:hover{color:var(--tl-primary)}
.tl-tagline{font-size:13px;color:var(--tl-text2);margin-top:4px}

/* Nav: Yatay ortalanmış pill */
.tl-nav{
  display:flex;justify-content:center;gap:8px;
  list-style:none;
  padding:16px 0;
  flex-wrap:wrap;
}
.tl-nav a{
  padding:8px 18px;
  border-radius:20px;
  background:var(--tl-surface);
  border:1px solid var(--tl-border);
  color:var(--tl-text2);font:600 12px var(--tl-font);
  transition:all .2s;
}
.tl-nav a:hover{background:var(--tl-primary);color:#FFF;border-color:var(--tl-primary)}

.tl-user{text-align:center;padding:8px 0;font-size:12px;color:var(--tl-text2);border-bottom:1px solid var(--tl-border)}
.tl-user a{color:var(--tl-primary);font-weight:600}

/* Breadcrumb */
.navigation{padding:12px 0;margin:0 0 16px;font-size:13px;color:var(--tl-text2);border-bottom:1px solid var(--tl-border)}
.navigation a{color:var(--tl-primary)}

#content{padding:24px 0;min-height:60vh}

/* == DİKEY ZAMAN ÇİZELGESİ == */
.tl-timeline{
  position:relative;
  padding:0 0 20px;
}
/* Dikey çizgi */
.tl-timeline::before{
  content:'';
  position:absolute;
  left:50%;
  top:0;bottom:0;
  width:2px;
  background:var(--tl-line);
  transform:translateX(-50%);
}

/* Zaman çizelgesi öğesi */
.tl-item{
  display:flex;
  width:100%;
  margin-bottom:20px;
  position:relative;
}
/* Dönüşümlü sol-sağ */
.tl-item:nth-child(odd){flex-direction:row}
.tl-item:nth-child(even){flex-direction:row-reverse}

.tl-item-content{
  width:45%;
  background:var(--tl-surface);
  border:1px solid var(--tl-border);
  border-radius:var(--tl-radius);
  padding:16px;
  transition:all .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.tl-item-content:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

/* Ortadaki nokta */
.tl-dot{
  position:absolute;
  left:50%;
  top:20px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--tl-primary);
  border:3px solid var(--tl-bg);
  transform:translateX(-50%);
  z-index:2;
  box-shadow:0 0 0 3px var(--tl-primary-light);
}

/* Boşluk dolgusu */
.tl-spacer{width:45%}

.tl-item-title{font:700 15px var(--tl-font);color:var(--tl-text);margin-bottom:4px}
.tl-item-title a{color:var(--tl-text);text-decoration:none}
.tl-item-title a:hover{color:var(--tl-primary)}
.tl-item-desc{font-size:13px;color:var(--tl-text2);margin-bottom:6px}
.tl-item-meta{font-size:11px;color:var(--tl-text2)}
.tl-item-meta b{color:var(--tl-text)}

/* Pastel renk kodlaması: her kategori farklı renk */
.tl-item-content.pastel-purple{border-left:4px solid #8B5CF6}
.tl-item-content.pastel-blue{border-left:4px solid #3B82F6}
.tl-item-content.pastel-green{border-left:4px solid #10B981}
.tl-item-content.pastel-orange{border-left:4px solid #F59E0B}
.tl-item-content.pastel-pink{border-left:4px solid #EC4899}

/* == KONU LİSTESİ: Kart kapsülleri == */
.tl-thread-capsule{
  background:var(--tl-surface);
  border:1px solid var(--tl-border);
  border-radius:var(--tl-radius);
  padding:14px 18px;
  margin-bottom:8px;
  display:flex;align-items:center;gap:12px;
  transition:all .2s;
}
.tl-thread-capsule:hover{
  border-color:var(--tl-primary);
  box-shadow:0 2px 8px rgba(139,92,246,.08);
}

.tl-tc-av{
  width:36px;height:36px;border-radius:50%;
  background:var(--tl-primary-light);color:var(--tl-primary);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;
}
.tl-tc-av img{width:100%;height:100%;object-fit:cover}
.tl-tc-info{flex:1;min-width:0}
.tl-tc-title{font:600 14px var(--tl-font);color:var(--tl-text)}
.tl-tc-title a{color:inherit}.tl-tc-title a:hover{color:var(--tl-primary)}
.tl-tc-meta{font-size:12px;color:var(--tl-text2);margin-top:2px}
.tl-tc-meta a{color:var(--tl-text2)}
.tl-tc-nums{
  display:flex;gap:12px;font-size:12px;color:var(--tl-text2);flex-shrink:0;
}
.tl-tc-nums b{color:var(--tl-text)}

/* == MESAJ GÖRÜNÜMÜ: Timeline post, dönüşümlü sol-sağ == */
.tl-posts{
  position:relative;
  padding:0;
}
.tl-posts::before{
  content:'';
  position:absolute;
  left:50%;top:0;bottom:0;
  width:2px;background:var(--tl-line);
  transform:translateX(-50%);
}

.tl-post{
  display:flex;width:100%;
  margin-bottom:20px;
  position:relative;
}
.tl-post:nth-child(odd){flex-direction:row}
.tl-post:nth-child(even){flex-direction:row-reverse}

.tl-post-card{
  width:45%;
  background:var(--tl-surface);
  border:1px solid var(--tl-border);
  border-radius:var(--tl-radius);
  overflow:hidden;
  transition:all .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.tl-post-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}

.tl-post-dot{
  position:absolute;left:50%;top:20px;
  width:14px;height:14px;border-radius:50%;
  background:var(--tl-secondary);
  border:3px solid var(--tl-bg);
  transform:translateX(-50%);z-index:2;
  box-shadow:0 0 0 3px rgba(245,158,11,.15);
}

.tl-post-spacer{width:45%}

/* Kart içi */
.tl-post-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:var(--tl-primary-light);
}
.tl-post-av{
  width:32px;height:32px;border-radius:50%;
  background:var(--tl-primary);color:#FFF;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex-shrink:0;overflow:hidden;
}
.tl-post-av img{width:100%;height:100%;object-fit:cover}
.tl-post-who{flex:1}
.tl-post-who strong{font:600 13px var(--tl-font);color:var(--tl-text);display:block}
.tl-post-who strong a{color:var(--tl-text)}.tl-post-who strong a:hover{color:var(--tl-primary)}
.tl-post-who span{font-size:11px;color:var(--tl-text2)}
.tl-post-when{font-size:11px;color:var(--tl-text2)}

.tl-post-body{padding:16px;line-height:1.75}

.tl-post-foot{
  display:flex;justify-content:flex-end;gap:6px;
  padding:8px 16px;
  border-top:1px solid var(--tl-border);
}
.tl-post-foot a{
  padding:4px 10px;border-radius:6px;
  font-size:11px;color:var(--tl-text2);
  transition:all .15s;
}
.tl-post-foot a:hover{background:var(--tl-primary-light);color:var(--tl-primary)}

/* İstatistikler */
.tl-stats{
  display:flex;justify-content:center;gap:24px;flex-wrap:wrap;
  padding:24px 0;
  margin:20px 0;
  border-top:1px solid var(--tl-border);
  border-bottom:1px solid var(--tl-border);
}
.tl-stat{text-align:center}
.tl-stat-val{font:800 24px var(--tl-font);color:var(--tl-primary)}
.tl-stat-lbl{font-size:11px;color:var(--tl-text2);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}

/* == MYBB UYUMU == */
.tborder{background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:var(--tl-radius);overflow:hidden;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.thead{background:var(--tl-primary);color:#FFF;padding:12px 18px;font:700 14px var(--tl-font)}
.thead a{color:rgba(255,255,255,.9)}
.tcat{background:var(--tl-primary-light);color:var(--tl-primary);padding:8px 18px;font:700 11px var(--tl-font);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--tl-border)}
.tcat a{color:var(--tl-primary)}
.trow1{background:var(--tl-surface);padding:12px 18px;border-bottom:1px solid var(--tl-border)}
.trow2{background:#FAFAFB;padding:12px 18px;border-bottom:1px solid var(--tl-border)}
.trow1:hover,.trow2:hover{background:var(--tl-primary-light)}
.trow_shaded{background:#FEF2F2;padding:12px 18px;border-bottom:1px solid #FECACA}
.trow_selected{background:#FFFBEB;padding:12px 18px}
.trow_sep{background:#F3F4F6;padding:4px 18px;font:700 10px var(--tl-font);color:var(--tl-text2);text-transform:uppercase;letter-spacing:.04em}

.post{background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:var(--tl-radius);margin-bottom:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.post .post_author{padding:12px 16px;background:var(--tl-primary-light);font-size:13px}
.post .post_content{padding:16px;line-height:1.75}
.post .post_controls{display:flex;justify-content:flex-end;gap:6px;padding:8px 16px;border-top:1px solid var(--tl-border)}
.post .post_controls a{padding:4px 10px;border-radius:6px;font-size:11px;color:var(--tl-text2);transition:all .15s}
.post .post_controls a:hover{background:var(--tl-primary-light);color:var(--tl-primary)}
.post.classic .post_author{border-right:1px solid var(--tl-border);width:170px;vertical-align:top}
.postbit_buttons > a{padding:4px 10px;border-radius:6px;font-size:11px;color:var(--tl-text2);margin:2px;display:inline-block;transition:all .15s}
.postbit_buttons > a:hover{background:var(--tl-primary-light);color:var(--tl-primary)}

blockquote{background:var(--tl-primary-light);border-left:3px solid var(--tl-primary);padding:14px 18px;margin:14px 0;border-radius:0 var(--tl-radius) var(--tl-radius) 0;font-style:italic;color:var(--tl-text)}
blockquote cite{display:block;font-weight:700;margin-bottom:6px;font-style:normal;color:var(--tl-primary)}
.codeblock{background:#1E293B;color:#E2E8F0;padding:14px;border-radius:var(--tl-radius);font:13px 'Fira Code',monospace;overflow-x:auto}

input.button,a.button{
  background:var(--tl-primary);color:#FFF;border:none;border-radius:20px;
  padding:10px 24px;font:700 13px var(--tl-font);
  cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;
}
input.button:hover,a.button:hover{background:#7C3AED;box-shadow:0 4px 12px rgba(139,92,246,.2)}
input.textbox,select,textarea{
  background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:10px;
  padding:10px 14px;color:var(--tl-text);font:400 14px var(--tl-font);
  outline:none;transition:border-color .15s;
}
input.textbox:focus,select:focus,textarea:focus{border-color:var(--tl-primary);box-shadow:0 0 0 3px rgba(139,92,246,.1)}
textarea{resize:vertical;min-height:120px}
fieldset{border:1px solid var(--tl-border);border-radius:var(--tl-radius);padding:16px;margin:8px 0}
legend{color:var(--tl-primary);font-weight:700;font-size:13px;padding:0 8px}

.popup_menu{background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:var(--tl-radius);box-shadow:0 8px 24px rgba(0,0,0,.1);min-width:200px;overflow:hidden}
.popup_item{padding:10px 16px;display:block;color:var(--tl-text);font-size:14px;transition:background .1s}
.popup_item:hover{background:var(--tl-primary-light);color:var(--tl-primary)}

.pagination{display:flex;gap:6px;margin:16px 0;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination .current{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:50%;font:600 13px var(--tl-font)}
.pagination a{background:var(--tl-surface);border:1px solid var(--tl-border);color:var(--tl-text)}
.pagination a:hover{background:var(--tl-primary);color:#FFF;border-color:var(--tl-primary)}
.pagination .current{background:var(--tl-primary);color:#FFF}

.red_alert{background:#FEF2F2;border:1px solid #FECACA;border-left:4px solid #EF4444;padding:12px 16px;border-radius:0 var(--tl-radius) var(--tl-radius) 0;color:#DC2626;margin:12px 0}
.pm_alert{background:var(--tl-primary-light);border:1px solid #C4B5FD;border-left:4px solid var(--tl-primary);padding:12px 16px;border-radius:0 var(--tl-radius) var(--tl-radius) 0;color:var(--tl-primary);margin:12px 0}

.tl-footer{
  text-align:center;padding:24px 0;
  margin-top:40px;border-top:2px solid var(--tl-primary);
  font-size:13px;color:var(--tl-text2);
}
.tl-footer a{color:var(--tl-primary)}

.forum_status{width:36px;text-align:center;font-size:16px}
.forum_on{color:var(--tl-primary)}.forum_off,.forum_offlock,.forum_offlink{color:var(--tl-border)}
.subforumicon{display:inline-block;margin:0 3px}.subforum_minion{color:var(--tl-primary)}
.usercp_nav_item,.modcp_nav_item{display:block;padding:10px 14px;border-radius:10px;color:var(--tl-text);font-size:14px;transition:background .15s}
.usercp_nav_item:hover,.modcp_nav_item:hover{background:var(--tl-primary-light);color:var(--tl-primary)}
.usercp_container{margin:8px;padding:12px}
.usercp_avatar{width:72px;height:72px;border-radius:50%;border:3px solid var(--tl-primary-light)}
.editor_control_bar{background:var(--tl-primary-light);padding:8px;border:1px solid var(--tl-border);border-radius:var(--tl-radius) var(--tl-radius) 0 0}
.scaleimages img{max-width:100%;border-radius:8px}
.pollbar{height:18px;border-radius:9px;background:linear-gradient(90deg,var(--tl-primary),var(--tl-secondary))}
.hidden{display:none}.hiddenrow{display:none}.selectall{text-align:center}.no_bottom_border{border-bottom:0}
.tfixed{table-layout:fixed;word-wrap:break-word}.smalltext{font-size:12px;color:var(--tl-text2)}.largetext{font-size:18px;font-weight:800}
.pmspace{float:right;margin:-3px 5px}
.pmspace_container{height:4px;background:var(--tl-border);border-radius:2px;overflow:hidden}
.pmspace_container .pmspace_used{background:var(--tl-primary);height:100%;border-radius:2px}
.reputation_positive{color:#10B981;font-weight:700}
.reputation_negative{color:#EF4444;font-weight:700}
.reputation_neutral{color:var(--tl-text2);font-weight:700}
.thread_status{display:inline-block;width:16px;height:16px}
.star_rating_container{display:inline-block}.star_rating{display:inline-block;height:16px;background-repeat:no-repeat}
.showthread_spinner{width:100%;text-align:center;padding:20px}
#quick_login .remember_me input{vertical-align:middle;margin:-3px 0 0 5px}
.modqueue_controls{float:right;background:var(--tl-surface);border:1px solid var(--tl-border);border-radius:8px;padding:8px;font-weight:700}

/* Mobil: tek sütun timeline */
@media(max-width:768px){
  .tl-timeline::before,.tl-posts::before{left:16px}
  .tl-item,.tl-post{flex-direction:row!important}
  .tl-item-content,.tl-post-card{width:calc(100% - 40px);margin-left:32px}
  .tl-spacer,.tl-post-spacer{display:none}
  .tl-dot,.tl-post-dot{left:16px}
  .tl-nav{flex-wrap:wrap;gap:4px}
  .tl-thread-capsule{flex-wrap:wrap;gap:8px}
  .tl-tc-nums{display:none}
  .post.classic .post_author{display:block;width:100%;border-right:none;border-bottom:1px solid var(--tl-border)}
}
@media(max-width:480px){
  body{font-size:14px}
  .tl-logo{font-size:22px}
  .tl-item-content,.tl-post-card{padding:12px}
}
@media print{
  #tl-header,.tl-footer,.tl-user,.tl-post-foot,.post_controls,.pagination{display:none!important}
  .tl-timeline::before,.tl-posts::before,.tl-dot,.tl-post-dot{display:none}
  .tl-item,.tl-post{flex-direction:column!important}
  .tl-item-content,.tl-post-card{width:100%}
  .tl-spacer,.tl-post-spacer{display:none}
  body{background:#fff;color:#000}
}