
/* ================================================
   08 - MAGAZINE EDITORIAL
   Çok sütunlu CSS metin düzeni, büyük başlangıç harfleri
   (drop caps), Playfair Display serif tipografisi, asimetrik
   grid düzeni, yüksek kontrastlı siyah beyaz tema, ince
   ayırıcı çizgiler, masonry yerleşimi, yapışkan kenar
   çubuğu, hover durumunda grayscale filtresi, tipografi
   odaklı beyaz boşluk kullanımı
   ================================================ */

:root{
  --me-bg:#FFFFFF;
  --me-text:#111111;
  --me-text2:#666666;
  --me-accent:#111111;
  --me-border:#E0E0E0;
  --me-border-dark:#111111;
  --me-bg-off:#F7F7F7;
  --me-red:#C62828;
  --me-radius:0px;
  --me-font-body:'Source Serif 4','Georgia',serif;
  --me-font-head:'Playfair Display','Georgia',serif;
  --me-font-ui:'Inter',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--me-bg);
  color:var(--me-text);
  font:400 16px/1.8 var(--me-font-body);
  -webkit-font-smoothing:antialiased;
}
h1{font:700 clamp(30px,5vw,48px)/1.1 var(--me-font-head);color:var(--me-text);letter-spacing:-.02em;margin:0 0 12px}
h2{font:700 clamp(22px,3.5vw,32px)/1.15 var(--me-font-head);color:var(--me-text);letter-spacing:-.01em;margin:0 0 10px}
h3{font:600 18px/1.25 var(--me-font-head);color:var(--me-text);margin:0 0 8px}
a:link,a:visited{color:var(--me-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:all .15s}
a:hover{color:var(--me-red);text-decoration-color:var(--me-red)}
img{max-width:100%;height:auto}

.me-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
#container{text-align:left}

/* == HEADER: Gazete Masthead == */
#me-masthead{
  text-align:center;
  padding:32px 0 0;
  border-bottom:4px double var(--me-border-dark);
}
.me-date-line{
  font:400 11px var(--me-font-ui);
  color:var(--me-text2);
  text-transform:uppercase;
  letter-spacing:.15em;
  margin-bottom:12px;
}
.me-title{
  font:700 clamp(36px,6vw,64px)/1 var(--me-font-head);
  letter-spacing:-.03em;
  color:var(--me-text);
}
.me-title a{color:inherit;text-decoration:none}
.me-title a:hover{color:var(--me-red)}
.me-subtitle{
  font:400 14px var(--me-font-body);
  color:var(--me-text2);
  font-style:italic;
  margin:8px 0 16px;
}

/* Nav: İnce çizgili, serif */
.me-nav{
  display:flex;justify-content:center;gap:0;
  list-style:none;
  padding:12px 0;
  border-top:1px solid var(--me-border);
  font-family:var(--me-font-ui);
}
.me-nav li+li::before{content:'|';color:var(--me-border);margin:0 16px}
.me-nav a{
  color:var(--me-text);font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;transition:color .15s;
}
.me-nav a:hover{color:var(--me-red)}

/* User bar */
.me-user-bar{
  text-align:right;padding:8px 0;
  font:400 12px var(--me-font-ui);color:var(--me-text2);
  border-bottom:1px solid var(--me-border);
}
.me-user-bar a{color:var(--me-text);text-decoration:none;font-weight:500}
.me-user-bar a:hover{color:var(--me-red)}

/* Breadcrumb */
.navigation{
  padding:12px 0;margin:0;
  font:400 12px var(--me-font-ui);color:var(--me-text2);
  border-bottom:1px solid var(--me-border);
}
.navigation a{color:var(--me-text);text-decoration:none;font-weight:500}
.navigation a:hover{color:var(--me-red)}

/* == ASIMETRIK LAYOUT: 2/3 + 1/3 == */
.me-layout{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:32px;
  padding:28px 0;
  align-items:start;
}
.me-main{min-width:0}
.me-sidebar{
  position:sticky;top:20px;
  border-left:1px solid var(--me-border);
  padding-left:28px;
}

/* == FORUM LİSTESİ: Makale/editoryal stil == */
.me-cat{margin-bottom:28px}
.me-cat-head{
  font:700 12px var(--me-font-ui);
  color:var(--me-red);
  text-transform:uppercase;
  letter-spacing:.12em;
  padding-bottom:8px;
  border-bottom:2px solid var(--me-border-dark);
  margin-bottom:16px;
}
.me-cat-head a{color:var(--me-red);text-decoration:none}

/* Her forum = editoryal satır */
.me-forum{
  padding:16px 0;
  border-bottom:1px solid var(--me-border);
}
.me-forum:last-child{border-bottom:none}
.me-forum:hover{background:var(--me-bg-off);margin:0 -12px;padding:16px 12px}

.me-f-title{
  font:700 20px/1.25 var(--me-font-head);
  margin-bottom:4px;
}
.me-f-title a{color:var(--me-text);text-decoration:none}
.me-f-title a:hover{color:var(--me-red)}
.me-f-desc{
  font:400 14px/1.6 var(--me-font-body);
  color:var(--me-text2);
  margin-bottom:6px;
}
.me-f-meta{
  font:400 11px var(--me-font-ui);
  color:var(--me-text2);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.me-f-meta b{color:var(--me-text)}

/* == SIDEBAR WIDGETLERİ == */
.me-widget{margin-bottom:24px}
.me-widget-head{
  font:700 12px var(--me-font-ui);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding-bottom:8px;
  border-bottom:2px solid var(--me-border-dark);
  margin-bottom:12px;
  color:var(--me-text);
}
.me-widget-body{font:400 14px var(--me-font-body);color:var(--me-text2);line-height:1.6}
.me-widget-body a{display:block;padding:6px 0;border-bottom:1px solid var(--me-border);color:var(--me-text);text-decoration:none}
.me-widget-body a:last-child{border-bottom:none}
.me-widget-body a:hover{color:var(--me-red)}

.me-stat-line{display:flex;justify-content:space-between;padding:4px 0;font:400 13px var(--me-font-ui)}
.me-stat-line b{color:var(--me-text)}

/* == KONU LİSTESİ: Editoryal makale listesi == */
.me-thread-list{margin-bottom:20px}
.me-tl-item{
  padding:18px 0;
  border-bottom:1px solid var(--me-border);
}
.me-tl-item:hover{background:var(--me-bg-off);margin:0 -12px;padding:18px 12px}

.me-tl-title{
  font:700 18px/1.3 var(--me-font-head);
  margin-bottom:4px;
}
.me-tl-title a{color:var(--me-text);text-decoration:none}
.me-tl-title a:hover{color:var(--me-red)}
.me-tl-excerpt{font:400 14px/1.6 var(--me-font-body);color:var(--me-text2);margin-bottom:6px}
.me-tl-meta{
  font:400 11px var(--me-font-ui);
  color:var(--me-text2);
  text-transform:uppercase;letter-spacing:.05em;
}
.me-tl-meta a{color:var(--me-text2);text-decoration:none}.me-tl-meta a:hover{color:var(--me-red)}
.me-tl-meta b{color:var(--me-text)}

/* == MESAJ GÖRÜNÜMÜ: Editoryal, drop cap, çok sütunlu okuma == */
.me-post{
  padding:28px 0;
  border-bottom:1px solid var(--me-border);
}
.me-post-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:16px;
  font:400 12px var(--me-font-ui);
  color:var(--me-text2);
}
.me-post-author{
  font-weight:700;color:var(--me-text);text-transform:uppercase;letter-spacing:.05em;
}
.me-post-author a{color:var(--me-text);text-decoration:none}
.me-post-author a:hover{color:var(--me-red)}
.me-post-role{font-weight:400;color:var(--me-text2);text-transform:none;letter-spacing:0;margin-left:4px;font-style:italic}
.me-post-time{font-style:italic}

/* Çok sütunlu metin (uzun mesajlarda) */
.me-post-body{
  line-height:1.85;
  font-size:16px;
  color:var(--me-text);
}
/* Drop cap: ilk harf */
.me-post-body::first-letter{
  font:700 3.5em/1 var(--me-font-head);
  float:left;
  margin:0 8px 0 0;
  color:var(--me-red);
}

.me-post-foot{
  display:flex;justify-content:flex-end;gap:16px;
  margin-top:14px;
  font:500 11px var(--me-font-ui);
  text-transform:uppercase;letter-spacing:.06em;
}
.me-post-foot a{color:var(--me-text2);text-decoration:none}
.me-post-foot a:hover{color:var(--me-red)}

/* İstatistikler: Kenar çubuğu stili */
.me-stats-block{
  padding:16px 0;
  border-top:2px solid var(--me-border-dark);
}

/* == MYBB UYUMU == */
.tborder{border-top:2px solid var(--me-border-dark);border-bottom:1px solid var(--me-border);margin-bottom:20px}
.thead{background:transparent;color:var(--me-text);padding:10px 0;font:700 14px var(--me-font-head);border-bottom:1px solid var(--me-border)}
.thead a{color:var(--me-red);text-decoration:none}
.tcat{background:transparent;color:var(--me-text2);padding:6px 0;font:500 10px var(--me-font-ui);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--me-border)}
.tcat a{color:var(--me-text2);text-decoration:none}
.trow1{background:transparent;padding:12px 0;border-bottom:1px solid var(--me-border)}
.trow2{background:var(--me-bg-off);padding:12px 8px;border-bottom:1px solid var(--me-border)}
.trow1:hover,.trow2:hover{background:#FFF5F5}
.trow_shaded{background:#FFF0F0;padding:12px 0;border-bottom:1px solid #FFCDD2}
.trow_selected{background:#FFFDE7;padding:12px 0}
.trow_sep{background:transparent;padding:4px 0;font:700 10px var(--me-font-ui);color:var(--me-text2);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--me-border)}

.post{padding:24px 0;border-bottom:1px solid var(--me-border);margin-bottom:0}
.post .post_author{padding:0 0 12px;font:700 12px var(--me-font-ui);color:var(--me-text);text-transform:uppercase;letter-spacing:.05em}
.post .post_content{line-height:1.85;font-size:16px}
.post .post_content::first-letter{font:700 3em/1 var(--me-font-head);float:left;margin:0 8px 0 0;color:var(--me-red)}
.post .post_controls{padding:12px 0 0;text-align:right;font:500 11px var(--me-font-ui);text-transform:uppercase;letter-spacing:.05em}
.post .post_controls a{color:var(--me-text2);margin-left:14px;text-decoration:none}
.post .post_controls a:hover{color:var(--me-red)}
.post.classic .post_author{border-right:1px solid var(--me-border);width:160px;vertical-align:top;padding:0 16px 0 0}
.post.classic .post_content::first-letter{font-size:2.5em}
.postbit_buttons > a{color:var(--me-text2);font:500 11px var(--me-font-ui);text-transform:uppercase;letter-spacing:.05em;margin-right:12px;display:inline-block;text-decoration:none}
.postbit_buttons > a:hover{color:var(--me-red)}

blockquote{
  border:none;
  padding:20px 28px;margin:20px 0;
  font:400 20px/1.5 var(--me-font-head);
  color:var(--me-text);
  text-align:center;
  font-style:italic;
  position:relative;
}
blockquote::before{content:'"';font-size:60px;color:var(--me-border);position:absolute;top:-10px;left:0}
blockquote cite{display:block;font:600 11px var(--me-font-ui);text-transform:uppercase;letter-spacing:.1em;margin-top:10px;font-style:normal;color:var(--me-red)}
.codeblock{background:var(--me-bg-off);border-left:3px solid var(--me-border-dark);padding:14px;font:14px 'Fira Code',monospace;color:var(--me-text);overflow-x:auto}

input.button,a.button{
  background:var(--me-text);color:var(--me-bg);
  border:none;
  padding:10px 24px;
  font:600 11px var(--me-font-ui);
  text-transform:uppercase;letter-spacing:.1em;
  cursor:pointer;transition:background .15s;display:inline-block;text-decoration:none;
}
input.button:hover,a.button:hover{background:var(--me-red)}

input.textbox,select,textarea{
  background:var(--me-bg);border:none;border-bottom:2px solid var(--me-border-dark);
  padding:10px 4px;color:var(--me-text);font:400 15px var(--me-font-body);
  outline:none;transition:border-color .15s;
}
input.textbox:focus,select:focus,textarea:focus{border-bottom-color:var(--me-red)}
textarea{border:1px solid var(--me-border);padding:12px;resize:vertical;min-height:120px}
textarea:focus{border-color:var(--me-red)}
fieldset{border:none;border-top:2px solid var(--me-border-dark);padding:16px 0;margin:12px 0}
legend{font:700 11px var(--me-font-ui);text-transform:uppercase;letter-spacing:.1em;color:var(--me-red);padding:0 8px 0 0}

.popup_menu{background:var(--me-bg);border:1px solid var(--me-border);box-shadow:0 4px 12px rgba(0,0,0,.08);min-width:200px}
.popup_item{padding:10px 16px;display:block;color:var(--me-text);font:400 14px var(--me-font-body);border-bottom:1px solid var(--me-border);text-decoration:none}
.popup_item:hover{background:var(--me-bg-off);color:var(--me-red)}

.pagination{display:flex;gap:6px;margin:16px 0;flex-wrap:wrap}
.pagination a,.pagination .current{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;font:500 12px var(--me-font-ui)}
.pagination a{color:var(--me-text);text-decoration:underline;text-underline-offset:2px}
.pagination a:hover{color:var(--me-red)}
.pagination .current{background:var(--me-text);color:var(--me-bg);text-decoration:none;padding:0 10px}

.red_alert{border-top:2px solid var(--me-red);padding:12px 0;color:var(--me-red);font:500 13px var(--me-font-ui);margin:12px 0}
.pm_alert{border-top:2px solid var(--me-text);padding:12px 0;color:var(--me-text);font:500 13px var(--me-font-ui);margin:12px 0}

/* Footer */
.me-footer{
  margin-top:40px;
  border-top:4px double var(--me-border-dark);
  padding:24px 0;
  text-align:center;
}
.me-footer-name{font:700 22px var(--me-font-head);color:var(--me-text);margin-bottom:8px}
.me-footer-links{font:400 12px var(--me-font-ui);color:var(--me-text2)}
.me-footer-links a{color:var(--me-text);text-decoration:none;margin:0 8px}
.me-footer-links a:hover{color:var(--me-red)}
.me-footer-copy{font:400 11px var(--me-font-ui);color:var(--me-text2);margin-top:10px}

.forum_status{width:20px;text-align:center;font-size:8px}
.forum_on{color:var(--me-red)}.forum_off,.forum_offlock,.forum_offlink{color:var(--me-border)}
.subforumicon{display:inline-block;margin:0 3px}.subforum_minion{color:var(--me-red)}
.usercp_nav_item,.modcp_nav_item{display:block;padding:8px 0;color:var(--me-text);border-bottom:1px solid var(--me-border);font:400 14px var(--me-font-body)}
.usercp_nav_item:hover,.modcp_nav_item:hover{color:var(--me-red)}
.usercp_container{margin:8px 0;padding:0}
.usercp_avatar{width:72px;height:72px;border-radius:0;border:1px solid var(--me-border);filter:grayscale(30%)}
.usercp_avatar:hover{filter:grayscale(0%)}
.editor_control_bar{background:var(--me-bg-off);padding:8px;border-bottom:1px solid var(--me-border)}
.scaleimages img{max-width:100%;filter:grayscale(20%)}.scaleimages img:hover{filter:grayscale(0%)}
.pollbar{height:14px;background:var(--me-text)}
.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:400 12px var(--me-font-ui);color:var(--me-text2)}.largetext{font:700 24px var(--me-font-head)}
.pmspace{float:right;margin:-3px 5px}
.pmspace_container{height:3px;background:var(--me-border)}
.pmspace_container .pmspace_used{background:var(--me-text);height:100%}
.reputation_positive{color:#2E7D32;font-weight:600}
.reputation_negative{color:var(--me-red);font-weight:600}
.reputation_neutral{color:var(--me-text2);font-weight:600}
.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;border-top:2px solid var(--me-text);padding:8px 0;font:700 12px var(--me-font-ui);text-transform:uppercase}

@media(max-width:900px){
  .me-layout{grid-template-columns:1fr}
  .me-sidebar{position:static;border-left:none;padding-left:0;border-top:1px solid var(--me-border);padding-top:24px;margin-top:24px}
  .post.classic .post_author{display:block;width:100%;border-right:none;padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--me-border)}
}
@media(max-width:640px){
  .me-wrap{padding:0 16px}
  .me-nav{flex-wrap:wrap;gap:6px}
  .me-nav li+li::before{margin:0 8px}
  .me-title{letter-spacing:-.01em}
  body{font-size:15px}
}
@media print{
  #me-masthead,.me-user-bar,.me-footer,.me-sidebar,.navigation,.pagination,.me-post-foot,.post_controls{display:none!important}
  body{background:#fff;color:#000}
  .me-layout{grid-template-columns:1fr}
  .me-post-body{column-count:2;column-gap:28px}
}

