/* ==========================================================================
   TITLE: yazi-detay.css
   EXPLAIN: BilgelikSevgisi arayüzünün bu dosyaya ait stil kuralları.
   NOTE: Final temiz sürümde dosya adı korunmuş, sürüm numaralı geçici adlar kaldırılmıştır.
   ========================================================================== */

:root{
  --detail-paper:#f4f0e9;
  --detail-ink:#151514;
  --detail-accent:#755947;
  --detail-line:#d8d0c5;
  --detail-muted:#6d655e;
  --detail-deep:#0f1111;
}

.article-page{
  background:var(--detail-paper);
}

/* ARTICLE HEADER */
.article-header{
  padding:84px 7% 46px;
  background:#f5f1eb;
  border-bottom:1px solid var(--detail-line);
}

.article-header-inner{
  width:min(980px,100%);
  margin:0 auto;
  text-align:center;
}

.article-category{
  display:inline-block;
  color:var(--detail-accent);
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  margin-bottom:15px;
}

.article-header h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(48px,5.5vw,84px);
  line-height:.92;
  margin:0 auto 24px;
  font-weight:600;
  max-width:980px;
}

.article-lead{
  max-width:700px;
  margin:0 auto 24px;
  color:#4d4741;
  font-size:15px;
  line-height:1.75;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:18px 24px;
  font-size:12px;
  color:#5e5750;
}

.article-meta span,
.comment-jump{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.comment-jump{
  border:0;
  background:none;
  padding:0;
  color:var(--detail-accent);
  cursor:pointer;
  font:inherit;
  font-weight:600;
}

.comment-jump:hover{
  text-decoration:underline;
}

/* COVER */
.article-cover{
  width:min(1320px,90%);
  margin:42px auto 0;
}

.article-cover img{
  width:100%;
  height:min(68vh,720px);
  display:block;
  object-fit:cover;
  object-position:center 35%;
  border-radius:4px;
}

/* ARTICLE BODY */
.article-body{
  width:min(790px,calc(100% - 40px));
  margin:58px auto 74px;
  font-family:Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.95;
  color:#2d2a27;
}

.article-body p{
  margin:0 0 26px;
}

.article-body h2{
  font-family:'Cormorant Garamond',serif;
  font-size:38px;
  line-height:1.05;
  margin:52px 0 18px;
  color:#161412;
}

.dropcap::first-letter{
  float:left;
  font-family:'Cormorant Garamond',serif;
  font-size:78px;
  line-height:.73;
  padding:10px 10px 0 0;
  color:var(--detail-accent);
}

.article-body blockquote{
  margin:46px -70px;
  padding:32px 55px;
  border-top:1px solid var(--detail-line);
  border-bottom:1px solid var(--detail-line);
  font-family:'Cormorant Garamond',serif;
  font-size:34px;
  line-height:1.2;
  text-align:center;
  color:#3a2e26;
}

.article-inline-image{
  margin:44px -100px;
}

.article-inline-image img{
  width:100%;
  max-height:520px;
  object-fit:cover;
  border-radius:4px;
}

.article-inline-image figcaption{
  font-size:11px;
  color:#70685f;
  margin-top:8px;
  text-align:center;
}

.article-end{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin-top:58px;
  padding-top:26px;
  border-top:1px solid var(--detail-line);
  color:var(--detail-accent);
  font-size:10px;
  letter-spacing:.15em;
}

.article-end i{
  font-size:18px;
}

/* COMMON SECTION HEADING */
.section-heading{
  text-align:center;
  width:min(700px,100%);
  margin:0 auto 36px;
}

.section-heading small{
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
}

.section-heading h2{
  font-family:'Cormorant Garamond',serif;
  font-size:44px;
  line-height:1;
  margin:7px 0 12px;
}

.section-heading p{
  margin:0;
  color:#625b54;
  font-size:13px;
  line-height:1.6;
}

/* COMMENTS */
.comments-section{
  padding:72px 7%;
  border-top:1px solid var(--detail-line);
  background:#eee8df;
}

.comment-form{
  width:min(920px,100%);
  margin:0 auto 52px;
  padding:28px;
  border:1px solid #d5cabe;
  border-radius:7px;
  background:#f7f3ed;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.comment-form label{
  display:block;
}

.comment-form label>span{
  display:block;
  margin-bottom:8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.05em;
}

.comment-form input,
.comment-form textarea{
  width:100%;
  border:1px solid #cfc4b7;
  background:#fffdf9;
  color:#1b1917;
  border-radius:4px;
  padding:13px 14px;
  font:14px Inter,Arial,sans-serif;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}

.comment-form textarea{
  resize:vertical;
  margin-bottom:0;
}

.comment-form input:focus,
.comment-form textarea:focus{
  border-color:#8a6c58;
  box-shadow:0 0 0 3px rgba(117,89,71,.08);
}

.comment-form>.form-row,
.comment-form>label{
  margin-bottom:18px;
}

.form-note{
  color:#796f66;
  font-size:10px;
  margin:0 0 14px;
}

.comment-submit{
  border:1px solid #6d5140;
  background:#201b17;
  color:#fff;
  padding:12px 18px;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-weight:600;
}

.reply-state{
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid #c9b29d;
  background:#eee2d5;
  color:#4f3b2d;
  padding:10px 12px;
  border-radius:4px;
  margin-bottom:18px;
  font-size:12px;
}

.reply-state:not([hidden]){
  display:flex;
}

.reply-state button{
  border:0;
  background:transparent;
  cursor:pointer;
  text-decoration:underline;
  color:#604838;
}

.comments-list{
  width:min(920px,100%);
  margin:0 auto;
}

.comment{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:18px;
  padding:26px 0;
  border-top:1px solid #d3c8bb;
}

.comment:first-child{
  border-top:0;
}

.comment-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1c1e1e;
  color:#f4e9dc;
  font-family:'Cormorant Garamond',serif;
  font-size:18px;
}

.comment-head strong{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
}

.comment-head span{
  display:block;
  color:#776e65;
  font-size:10px;
  margin-top:2px;
}

.comment-content>p{
  font-size:13px;
  line-height:1.7;
  margin:12px 0 10px;
}

.reply-button{
  border:0;
  background:none;
  padding:0;
  color:var(--detail-accent);
  cursor:pointer;
  font-size:11px;
  font-weight:600;
}

.comment-replies{
  margin-top:18px;
  padding-left:22px;
  border-left:2px solid #c9b7a5;
}

.comment-child{
  padding-top:18px;
}

/* RELATED */
.related-section{
  padding:78px 7%;
  background:#f5f1eb;
  border-top:1px solid var(--detail-line);
}

.related-grid{
  width:min(1320px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.related-card{
  border:1px solid #d5cabe;
  border-radius:6px;
  overflow:hidden;
  background:#f8f4ee;
}

.related-card>img{
  width:100%;
  height:250px;
  object-fit:cover;
}

.related-card-body{
  padding:20px;
}

.issue-label{
  display:block;
  color:var(--detail-accent);
  font-size:9px;
  font-weight:600;
  letter-spacing:.07em;
  margin-bottom:8px;
}

.related-card h3{
  font-family:'Cormorant Garamond',serif;
  font-size:29px;
  line-height:1;
  margin:0 0 10px;
}

.related-card p{
  color:#605850;
  font-size:11px;
  line-height:1.6;
  margin:0 0 18px;
}

.related-card a{
  color:#241d18;
  text-decoration:none;
  font-size:11px;
  font-weight:600;
}

/* NEWSLETTER */
.newsletter-section{
  padding:58px 7%;
  background:#171919;
  color:#f4eee7;
}

.newsletter-inner{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
}

.newsletter-copy>span{
  color:#d6aa87;
  font-size:9px;
  font-weight:600;
  letter-spacing:.1em;
}

.newsletter-copy h2{
  font-family:'Cormorant Garamond',serif;
  font-size:46px;
  line-height:1;
  margin:7px 0 12px;
}

.newsletter-copy p{
  max-width:520px;
  color:#c9c3bc;
  font-size:12px;
  line-height:1.7;
}

.newsletter-form{
  display:flex;
}

.newsletter-form input{
  flex:1;
  min-width:0;
  border:1px solid #6d6258;
  border-right:0;
  background:#f4f0e9;
  color:#171717;
  padding:14px 16px;
  outline:none;
}

.newsletter-form button{
  border:1px solid #a88970;
  background:#5c332d;
  color:#fff;
  padding:0 22px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
}

/* DRAWER main accordion safety on detail page */
.drawer-main-accordion{
  border-bottom:1px solid #303333;
}

.drawer-main-toggle{
  width:100%;
  min-height:56px;
  border:0;
  background:transparent;
  color:#eee;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  font-family:'Cormorant Garamond',serif;
  font-size:19px;
}

.drawer-main-toggle>span{
  display:flex;
  align-items:center;
  gap:12px;
}

.drawer-main-toggle>span>i{
  width:22px;
  color:#d2ad8c;
}

.drawer-main-arrow{
  transition:transform .3s;
}

.drawer-main-accordion.active .drawer-main-arrow{
  transform:rotate(180deg);
}

.drawer-main-content{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:grid-template-rows .35s,opacity .25s;
}

.drawer-main-accordion.active .drawer-main-content{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.drawer-main-content-inner{
  min-height:0;
  overflow:hidden;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* TABLET */
@media(max-width:980px){
  .article-header{
    padding:62px 5% 38px;
  }

  .article-cover{
    width:92%;
  }

  .article-body blockquote{
    margin:42px -30px;
    padding:28px 35px;
  }

  .article-inline-image{
    margin:40px -45px;
  }

  .related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .newsletter-inner{
    gap:36px;
  }
}

/* MOBILE */
@media(max-width:680px){
  .article-header{
    padding:42px 20px 32px;
  }

  .article-header-inner{
    text-align:left;
  }

  .article-header h1{
    font-size:clamp(42px,12vw,58px);
    line-height:.94;
  }

  .article-lead{
    font-size:12px;
    margin-left:0;
  }

  .article-meta{
    justify-content:flex-start;
    gap:10px 16px;
    font-size:10px;
  }

  .article-cover{
    width:100%;
    margin-top:0;
  }

  .article-cover img{
    height:42svh;
    min-height:290px;
    border-radius:0;
  }

  .article-body{
    width:calc(100% - 40px);
    margin:38px auto 52px;
    font-size:14px;
    line-height:1.85;
  }

  .article-body h2{
    font-size:32px;
    margin-top:38px;
  }

  .dropcap::first-letter{
    font-size:66px;
  }

  .article-body blockquote{
    margin:34px 0;
    padding:24px 8px;
    font-size:28px;
  }

  .article-inline-image{
    margin:34px -20px;
  }

  .article-inline-image img{
    border-radius:0;
  }

  .comments-section,
  .related-section{
    padding:54px 20px;
  }

  .section-heading{
    text-align:left;
    margin-bottom:26px;
  }

  .section-heading h2{
    font-size:38px;
  }

  .form-row{
    grid-template-columns:1fr;
  }

  .comment-form{
    padding:20px;
  }

  .comment{
    grid-template-columns:40px 1fr;
    gap:12px;
  }

  .comment-avatar{
    width:38px;
    height:38px;
    font-size:15px;
  }

  .comment-replies{
    padding-left:12px;
  }

  .related-grid{
    grid-template-columns:1fr;
  }

  .related-card>img{
    height:220px;
  }

  .newsletter-section{
    padding:48px 20px;
  }

  .newsletter-inner{
    grid-template-columns:1fr;
    gap:24px;
  }

  .newsletter-copy h2{
    font-size:38px;
  }

  .newsletter-form{
    flex-direction:column;
    gap:10px;
  }

  .newsletter-form input{
    border-right:1px solid #6d6258;
  }

  .newsletter-form button{
    justify-content:center;
    padding:14px 18px;
  }
}


/* =========================================
   GÖRSEL NETLİĞİ / YÜKSEK ÇÖZÜNÜRLÜK
========================================= */
.article-cover img,
.article-inline-image img,
.related-card > img,
.mini-card img,
.announcement img,
.book-feature img {
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Büyük yazı kapağında kaynak görseli gereksiz yere aşırı büyütme */
.article-cover {
  max-width: 1320px;
}

.article-cover img {
  width: 100%;
  max-height: 720px;
  object-fit: cover;
}

/* Kartlarda görsel kırpmasını daha doğal tut */
.related-card > img {
  object-position: center;
}

@media(max-width:680px) {
  .article-cover img {
    max-height: 520px;
  }
}


/* =========================================
   YÜKSEK ÇÖZÜNÜRLÜKLÜ YENİ GÖRSELLER
========================================= */
.article-cover img {
  object-fit: cover;
  object-position: center 38%;
  image-rendering: auto;
}

.article-inline-image img {
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

.related-card > img {
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

@media(max-width:680px) {
  .article-cover img {
    height: 46svh;
    min-height: 310px;
    object-position: center 32%;
  }

  .article-inline-image img {
    max-height: 360px;
  }
}


/* Yorum sayısından gelindiğinde başlık navbar altında kalmasın */
.comments-section{
  scroll-margin-top:95px;
}


/* =========================================================
   FINAL DETAY SAYFASI GÖRSEL NETLİĞİ
========================================================= */
.article-cover{
  width:min(1180px,90%);
}

.article-cover img{
  width:100%;
  height:auto;
  max-height:680px;
  object-fit:cover;
  object-position:center 36%;
  filter:none;
  transform:none;
}

/* Atina Okulu gibi daha küçük kaynakları dev ekrana germiyoruz */
.article-inline-image{
  width:min(100%,700px);
  max-width:700px;
  margin:42px auto;
}

.article-inline-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center;
  filter:none;
  transform:none;
}

/* İlgili yazı görselleri kontrollü ölçüde */
.related-card>img{
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:center;
  filter:none;
  transform:none;
}

@media(max-width:900px){
  .article-cover{
    width:92%;
  }

  .article-inline-image{
    width:min(90%,650px);
  }
}

@media(max-width:680px){
  .article-cover{
    width:100%;
  }

  .article-cover img{
    max-height:none;
  }

  .article-inline-image{
    width:calc(100% - 32px);
    max-width:none;
    margin:28px auto;
  }

  .related-card>img{
    height:210px;
  }
}


/* =========================================================
   YORUMLAR - INLINE YANIT FORMU
========================================================= */

.reply-button.is-active{
  color:#2f2118;
}

.inline-reply-form{
  margin:18px 0 6px;
  padding:20px;
  border:1px solid #ccbba9;
  border-left:3px solid #8a5b3e;
  border-radius:6px;
  background:#f7f2eb;
  box-shadow:0 8px 24px rgba(57,40,28,.055);
  animation:inlineReplyOpen .22s ease both;
}

@keyframes inlineReplyOpen{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

.inline-reply-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding-bottom:13px;
  margin-bottom:16px;
  border-bottom:1px solid #ddd1c4;
}

.inline-reply-head small{
  display:block;
  margin-bottom:3px;
  color:#8a5b3e;
  font:700 9px Inter,Arial,sans-serif;
  letter-spacing:.09em;
}

.inline-reply-head strong{
  font-family:'Cormorant Garamond',serif;
  font-size:21px;
  font-weight:600;
}

.inline-reply-close{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #d4c6b8;
  border-radius:50%;
  background:transparent;
  color:#6e5b4c;
  cursor:pointer;
}

.inline-reply-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.inline-reply-form label{
  display:block;
}

.inline-reply-form label > span{
  display:block;
  margin-bottom:7px;
  color:#3e3731;
  font:600 9px Inter,Arial,sans-serif;
  letter-spacing:.04em;
}

.inline-reply-form input,
.inline-reply-form textarea{
  width:100%;
  border:1px solid #cfc0b2;
  border-radius:4px;
  background:#fffdf9;
  color:#1d1a17;
  padding:11px 12px;
  font:12px Inter,Arial,sans-serif;
  outline:none;
}

.inline-reply-form input:focus,
.inline-reply-form textarea:focus{
  border-color:#8a5b3e;
  box-shadow:0 0 0 3px rgba(138,91,62,.08);
}

.inline-reply-form textarea{
  resize:vertical;
  min-height:100px;
}

.inline-reply-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
}

.inline-reply-actions > span{
  color:#796f66;
  font:9px Inter,Arial,sans-serif;
}

.inline-reply-actions button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 15px;
  border:1px solid #6e4933;
  border-radius:3px;
  background:#241d19;
  color:#fff;
  cursor:pointer;
  font:600 10px Inter,Arial,sans-serif;
}

.inline-reply-actions button:hover{
  background:#6e4933;
}

@media(max-width:680px){
  .inline-reply-form{
    margin-top:14px;
    padding:16px;
  }

  .inline-reply-row{
    grid-template-columns:1fr;
    gap:12px;
  }

  .inline-reply-actions{
    align-items:flex-start;
    flex-direction:column;
  }

  .inline-reply-actions button{
    width:100%;
    justify-content:center;
  }
}

/* DİNAMİK DETAY GÖRSELİ - kaynak oranını koru */
#articleCover{width:100%!important;height:auto!important;max-height:640px;object-fit:cover!important;object-position:center!important;image-rendering:auto!important;filter:none!important;transform:none!important;}


/* =========================================================
   17.08.2026 - DETAY SAYFASI GÖRSEL NETLİĞİ
========================================================= */
.article-cover,
.article-cover img,
#articleCover,
.article-inline-image,
.article-inline-image img{
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  image-rendering:auto !important;
}

.article-cover img,
#articleCover{
  object-fit:cover !important;
  object-position:center !important;
}

.article-cover img,#articleCover,.article-inline-image img{
 filter:none!important;backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;transform:none!important;
 image-rendering:auto!important;object-fit:cover!important;object-position:center!important;
}


/* USER IMAGE SET + CACHE BREAK 20260817-user-images-v11 */
img {
  image-rendering: auto;
}
.article-list-image img,
.article-preview-image-wrap img,
#previewImage,
.article-cover img,
#articleCover {
  filter: none !important;
  -webkit-filter: none !important;
  transform: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  image-rendering: auto !important;
}


/* =========================================================
   DETAY SAYFASI - KARTTAKİ KAPAKLA BİREBİR EŞLEŞME
========================================================= */
.article-cover{
  position:relative;
  overflow:hidden;
  background:#191512;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:420px;
  isolation:isolate;
}

/* Kart/modal mantığındaki gibi arka planı yumuşat */
.article-cover::before{
  content:"";
  position:absolute;
  inset:-28px;
  z-index:0;
  background-image:var(--detail-cover-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(24px) brightness(.66);
  transform:scale(1.08);
  opacity:.9;
}

.article-cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(18,14,12,.12);
  pointer-events:none;
}

.article-cover img,
#articleCover{
  position:relative;
  z-index:2;
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:94% !important;
  max-height:620px !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
  transform:none !important;
  image-rendering:auto !important;
}

@media(max-width:760px){
  .article-cover{
    min-height:280px;
  }

  .article-cover img,
  #articleCover{
    max-height:420px !important;
  }
}


/* =========================================================
   DETAY SAYFASI KAPAK - BLUR YOK / NORMAL NET GÖRSEL
   Modal blur sistemi etkilenmez.
========================================================= */

.article-cover{
  position:relative !important;
  overflow:visible !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
  isolation:auto !important;
  padding:0 !important;
}

/* Önceki blur arka plan katmanlarını tamamen kapat */
.article-cover::before,
.article-cover::after{
  content:none !important;
  display:none !important;
  background:none !important;
  filter:none !important;
  transform:none !important;
  opacity:0 !important;
}

.article-cover img,
#articleCover{
  position:relative !important;
  z-index:auto !important;
  display:block !important;

  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;

  object-fit:contain !important;
  object-position:center !important;

  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  transform:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  image-rendering:auto !important;

  margin:0 auto !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

@media(max-width:760px){
  .article-cover{
    min-height:0 !important;
  }

  .article-cover img,
  #articleCover{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
  }
}

/* Yazı detay etkileşim metrikleri */
.article-like-btn{border:0;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:0}.article-like-btn:hover,.article-like-btn.is-liked{color:#8a3f28}.article-like-btn.is-liked i{color:#8a3f28}


/* V61 - İlgili Yazılar kaynak + belge rozetleri */
.related-card-image{position:relative;overflow:hidden;height:250px}
.related-card-image>img{display:block;width:100%;height:100%;object-fit:cover}
.related-card-badges{position:absolute;left:14px;top:14px;z-index:4;display:flex;gap:7px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 28px)}
.related-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;font:800 10px/1.1 Arial,sans-serif;letter-spacing:.055em;box-shadow:0 5px 14px rgba(53,35,23,.14)}
.related-badge--interview{background:#b95b35;color:#fff}
.related-badge--reader{background:#f3d898;color:#3b2418}
.related-badge--editor{background:#3f8a62;color:#fff}
.related-badge--collaboration{background:#7657a8;color:#fff}
.related-badge--document{background:#5b2d23;color:#fff}
.related-empty{grid-column:1/-1;text-align:center;padding:34px;border:1px dashed rgba(128,84,55,.28);border-radius:16px;color:#806957;background:#fffaf4}
@media(max-width:700px){.related-card-image{height:220px}.related-card-badges{left:10px;top:10px;gap:5px}.related-badge{padding:6px 9px;font-size:9px}}


/* V113: yalnızca yeni yarım-yıldız puanlama arayüzü */
.article-rating-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px auto 0;max-width:1180px;padding:0 20px;font-size:13px}
.article-rating-label{font-weight:700}
.article-rating-stars{display:flex;gap:3px}
.rating-star{position:relative;display:inline-block;width:22px;height:22px;--fill:0%}
.rating-star>i{position:absolute;inset:0;font-size:20px;background:linear-gradient(90deg,currentColor var(--fill),rgba(120,120,120,.25) var(--fill));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}
.rating-star>button{position:absolute;top:0;bottom:0;width:50%;border:0;background:transparent;cursor:pointer;padding:0}
.rating-star>button:first-of-type{left:0}.rating-star>button:last-of-type{right:0}
.article-rating-picker small{opacity:.72}

/* =========================================================
   V114 — alışveriş sitesi tipi yıldız puanlama açılır alanı
========================================================= */
.article-rating-wrap{position:relative;cursor:pointer;display:inline-flex;align-items:center;gap:5px;overflow:visible!important}
.article-rating-wrap #articleRatingMeta>i{transition:transform .18s ease,color .18s ease}
.article-rating-wrap:hover #articleRatingMeta>i,.article-rating-wrap:focus-within #articleRatingMeta>i,.article-rating-wrap.rating-open #articleRatingMeta>i{color:#d69a18;transform:scale(1.08)}
.article-rating-count{font-size:11px;font-weight:500;opacity:.72;white-space:nowrap}
.article-rating-picker{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,-4px);z-index:80;display:flex;align-items:center;gap:9px;flex-wrap:nowrap;margin:0;padding:10px 12px;max-width:none;white-space:nowrap;background:#fffdf8;border:1px solid rgba(126,74,48,.18);border-radius:12px;box-shadow:0 12px 30px rgba(52,35,24,.14);font-size:12px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.article-rating-wrap:hover .article-rating-picker,.article-rating-wrap:focus-within .article-rating-picker,.article-rating-wrap.rating-open .article-rating-picker{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.article-rating-picker:before{content:"";position:absolute;left:50%;top:-6px;width:11px;height:11px;background:#fffdf8;border-left:1px solid rgba(126,74,48,.18);border-top:1px solid rgba(126,74,48,.18);transform:translateX(-50%) rotate(45deg)}
.article-rating-stars{display:flex;gap:2px;position:relative;z-index:1}
.rating-star{position:relative;display:inline-block;width:24px;height:24px;--fill:0%}
.rating-star>i{position:absolute;inset:0;font-size:21px;background:linear-gradient(90deg,#e3a21a var(--fill),rgba(120,120,120,.22) var(--fill));-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none;transition:background .08s linear}
.rating-star>button{position:absolute;top:0;bottom:0;width:50%;border:0;background:transparent;cursor:pointer;padding:0;z-index:2}
.rating-star>button:first-of-type{left:0}.rating-star>button:last-of-type{right:0}
.rating-star>button:focus-visible{outline:2px solid #8a402a;outline-offset:2px;border-radius:4px}
.article-rating-picker small{position:relative;z-index:1;opacity:.72;font-size:11px}
.article-rating-picker.rated-ok{box-shadow:0 12px 32px rgba(205,151,26,.22)}
@media(max-width:700px){.article-rating-picker{left:auto;right:0;transform:translateY(-4px)}.article-rating-wrap:hover .article-rating-picker,.article-rating-wrap:focus-within .article-rating-picker,.article-rating-wrap.rating-open .article-rating-picker{transform:translateY(0)}.article-rating-picker:before{left:auto;right:18px;transform:rotate(45deg)}}


/* V143 — Telefon/tablette puanlama alanını sağa al ve 5 yıldızın tamamını erişilebilir tut. */
@media(max-width:1024px){
  .article-meta .article-rating-wrap{
    flex:0 0 100%;
    width:100%;
    margin-left:auto;
    display:flex;
    justify-content:flex-end;
    align-items:center;
  }
  .article-meta .article-rating-wrap #articleRatingMeta{margin-left:auto;}
  .article-rating-picker{
    left:auto!important;
    right:0!important;
    max-width:min(330px,calc(100vw - 28px));
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    transform:translateY(-4px)!important;
  }
  .article-rating-wrap.rating-open .article-rating-picker{transform:translateY(0)!important;}
  .article-rating-picker:before{left:auto!important;right:18px!important;transform:rotate(45deg)!important;}
  .article-rating-stars{flex-wrap:nowrap;}
  .rating-star{flex:0 0 26px;}
  .article-rating-picker small{text-align:right;white-space:normal;line-height:1.3;max-width:220px;}
}