/* =========================================================
   v0.3.26 — FRONTEND FINAL: ARTICLE DETAIL + ABOUT BREADCRUMB
   ========================================================= */

/* Hakkımda breadcrumb diğer arşiv sayfalarının 1120px ekseniyle aynı hizada. */
.about-live{
    padding-top:30px !important;
}

.about-breadcrumb{
    position:relative;
    left:50%;
    width:min(1120px,calc(100vw - 40px));
    transform:translateX(-50%);
    margin-top:0 !important;
    margin-bottom:28px !important;
}

/* ---------------------------------------------------------
   ARTICLE DETAIL
   --------------------------------------------------------- */
.article-detail-page{
    background:#fff;
    padding:30px 0 58px;
    color:#2e3d44;
}

.article-detail-container{
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
}

.detail-breadcrumb{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    margin:0 0 22px;
    color:#9aa3a7;
    font-family:"Rubik",Arial,sans-serif;
    font-size:10px;
    line-height:1.45;
}

.detail-breadcrumb a{
    flex:0 0 auto;
    color:#808b90;
}

.detail-breadcrumb a:hover{color:#e23833}
.detail-breadcrumb span{color:#e23833}
.detail-breadcrumb strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#929ca1;
    font-weight:400;
}

.detail-top-stories{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin:0 0 24px;
    border-top:1px solid #eceff0;
    border-bottom:1px solid #eceff0;
}

.detail-top-story{
    min-width:0;
    min-height:76px;
    display:flex;
    align-items:center;
    padding:12px 16px;
    border-right:1px solid #eceff0;
    background:#fff;
    transition:background .2s ease;
}

.detail-top-story:first-child{padding-left:0}
.detail-top-story:last-child{border-right:0;padding-right:0}
.detail-top-story:hover,.detail-top-story.is-current{background:#fafafa}
.detail-top-story div{min-width:0}
.detail-top-story strong{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color:#35434a;
    font-family:"Poppins",Arial,sans-serif;
    font-size:12px;
    line-height:1.35;
    font-weight:600;
}
.detail-top-story time{
    display:block;
    margin-top:5px;
    color:#a5adb1;
    font-size:9px;
}

.article-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,790px) minmax(220px,260px);
    gap:42px;
    align-items:start;
}

.article-detail-main{min-width:0}

.detail-share-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:13px;
    color:#a1aaae;
    font-size:10px;
}

.detail-share-inline{
    display:flex;
    align-items:center;
    gap:7px;
}

.detail-share-inline a,
.detail-share-inline button,
.article-share-rail a{
    border:0;
    outline:0;
    text-decoration:none;
    cursor:pointer;
    font-family:Arial,sans-serif;
    font-weight:700;
    text-align:center;
}

.detail-share-inline a,
.detail-share-inline button{
    width:25px;
    height:25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f1f3f4;
    color:#6e797e;
    font-size:9px;
}

.detail-share-inline a:hover,
.detail-share-inline button:hover{background:#e23833;color:#fff}

.article-detail-header h1{
    margin:0 0 12px;
    color:#2e3d44;
    font-family:"Poppins",Arial,sans-serif;
    font-size:34px;
    line-height:1.14;
    letter-spacing:-.7px;
    font-weight:700;
}

.article-detail-spot{
    margin:0 0 18px;
    color:#737d82;
    font-family:"Rubik",Arial,sans-serif;
    font-size:14px;
    line-height:1.65;
}

.article-primary-media{
    position:relative;
    width:100%;
    overflow:hidden;
    background:#17242b;
}

.article-primary-media iframe,
.article-primary-media video,
.article-primary-media img{
    display:block;
    width:100%;
    border:0;
}

.article-primary-media iframe,
.article-primary-media video{aspect-ratio:16/9;height:auto}
.article-primary-media img{height:auto;max-height:650px;object-fit:cover}

.article-detail-toolbar{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:22px;
    border:1px solid #e7eaec;
    border-top:0;
    background:#fff;
}

.article-toolbar-left{
    display:flex;
    align-items:center;
    min-height:45px;
}

.article-youtube-link{
    min-height:45px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 17px;
    background:#e23833;
    color:#fff;
    font-size:11px;
    font-weight:600;
}
.article-youtube-link:hover{background:#c92d29;color:#fff}
.article-youtube-link span{font-size:10px}

.article-tool-button{
    width:42px;
    height:45px;
    border:0;
    border-right:1px solid #e7eaec;
    background:#fff;
    color:#9ca5a9;
    cursor:pointer;
}

.article-font-control{
    display:flex;
    align-items:center;
    gap:7px;
    padding-right:14px;
    color:#a0a8ac;
    font-size:9px;
    white-space:nowrap;
}

.article-font-control span{color:#929ca1}
.article-font-control small{font-size:8px}
.article-font-control input{width:140px;accent-color:#e23833;cursor:pointer}

.article-detail-body-wrap{
    position:relative;
}

.article-share-rail{
    position:absolute;
    top:0;
    left:-45px;
    display:flex;
    flex-direction:column;
    gap:7px;
}

.article-share-rail a{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e7eaec;
    border-radius:50%;
    background:#fff;
    color:#e23833;
    font-size:9px;
    transition:.2s ease;
}
.article-share-rail a:hover{background:#e23833;color:#fff;border-color:#e23833}

.article-detail-content-column{min-width:0}

.article-publish-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 12px;
    color:#a1aaae;
    font-family:"Rubik",Arial,sans-serif;
    font-size:9px;
}
.article-publish-meta span{color:#e23833}
.article-publish-meta b{font-weight:400;color:#a1aaae}

.article-rich-content{
    --article-font-size:16px;
    color:#4b565b;
    font-family:"Rubik",Arial,sans-serif;
    font-size:var(--article-font-size);
    line-height:1.72;
    overflow-wrap:anywhere;
}

.article-rich-content p{
    margin:0 0 17px;
}

.article-rich-content h1,
.article-rich-content h2,
.article-rich-content h3,
.article-rich-content h4,
.article-rich-content h5,
.article-rich-content h6{
    margin:23px 0 10px;
    color:#303e45;
    font-family:"Poppins",Arial,sans-serif;
    line-height:1.36;
    font-weight:700;
}
.article-rich-content h1{font-size:1.55em}
.article-rich-content h2{font-size:1.22em}
.article-rich-content h3{font-size:1.05em}
.article-rich-content h4,.article-rich-content h5,.article-rich-content h6{font-size:1em}

.article-rich-content strong{color:#344249;font-weight:700}
.article-rich-content a{color:#e23833;text-decoration:underline;text-underline-offset:2px}
.article-rich-content ul,.article-rich-content ol{margin:0 0 18px;padding-left:24px}
.article-rich-content li{margin:5px 0}
.article-rich-content blockquote{
    margin:22px 0;
    padding:15px 18px;
    border-left:3px solid #e23833;
    background:#f7f8f8;
    color:#59656a;
}

.article-rich-content img{
    display:block;
    max-width:100% !important;
    height:auto !important;
    margin:20px auto;
}

.article-rich-content figure{max-width:100%;margin:20px auto}
.article-rich-content figcaption{margin-top:6px;color:#9aa3a7;font-size:.76em;text-align:center}

.article-rich-content iframe,
.article-rich-content video{
    display:block;
    width:100% !important;
    max-width:100%;
    height:auto;
    aspect-ratio:16/9;
    margin:22px auto;
    border:0;
    background:#17242b;
}
.article-rich-content iframe.is-vertical-video{
    width:min(100%,420px) !important;
    aspect-ratio:9/16;
}

.article-rich-content table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    border-collapse:collapse;
    margin:20px 0;
}
.article-rich-content td,.article-rich-content th{padding:8px;border:1px solid #e3e7e9}

.article-rich-content .alignleft{float:left;margin:5px 20px 15px 0}
.article-rich-content .alignright{float:right;margin:5px 0 15px 20px}
.article-rich-content::after{content:"";display:block;clear:both}

.article-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin:28px 0 20px;
    padding-top:14px;
    border-top:1px solid #edf0f1;
}
.article-tags span{
    padding:6px 8px;
    border:1px solid #e5e8ea;
    background:#fff;
    color:#929ca1;
    font-size:9px;
    line-height:1;
}

.article-gallery-section{
    margin-top:30px;
    padding-top:18px;
    border-top:1px solid #e9edef;
}
.article-gallery-section h2{
    margin:0 0 13px;
    color:#37454c;
    font-family:"Poppins",Arial,sans-serif;
    font-size:14px;
    font-weight:600;
}
.article-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
}
.article-gallery-item{
    position:relative;
    display:block;
    padding:0;
    border:0;
    background:#eef0f1;
    cursor:zoom-in;
    overflow:hidden;
    aspect-ratio:4/3;
}
.article-gallery-item img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .25s ease;
}
.article-gallery-item:hover img{transform:scale(1.04)}

/* ---------------------------------------------------------
   DETAIL SIDEBAR
   --------------------------------------------------------- */
.article-detail-sidebar{
    min-width:0;
    padding-top:108px;
}
.detail-sidebar-block{margin-bottom:28px}
.detail-sidebar-block h2{
    margin:0 0 13px;
    padding-bottom:9px;
    border-bottom:1px solid #e8ecee;
    color:#505c61;
    font-family:"Poppins",Arial,sans-serif;
    font-size:13px;
    font-weight:600;
}
.detail-sidebar-block h2::after{
    content:"";
    display:block;
    width:32px;
    height:2px;
    margin-top:9px;
    margin-bottom:-11px;
    background:#e23833;
}
.detail-quick-menu{display:flex;flex-direction:column}
.detail-quick-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid #eef0f1;
    color:#7a858a;
    font-size:10px;
}
.detail-quick-menu a:hover{color:#e23833}
.detail-quick-menu span{color:#e23833}

.detail-sidebar-card{
    display:block;
    margin-bottom:16px;
}
.detail-sidebar-image{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    margin-bottom:7px;
    background:#e9ecee;
}
.detail-sidebar-image img{width:100%;height:100%;object-fit:cover;display:block}
.detail-sidebar-image span{
    position:absolute;
    left:50%;top:50%;
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#e23833;
    color:#fff;
    font-size:10px;
}
.detail-sidebar-card strong{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color:#4b575d;
    font-family:"Poppins",Arial,sans-serif;
    font-size:10px;
    line-height:1.4;
    font-weight:600;
}
.detail-sidebar-card time{display:block;margin-top:4px;color:#a2aaae;font-size:8px}
.detail-sidebar-card:hover strong{color:#e23833}

/* ---------------------------------------------------------
   DETAIL GALLERY MODAL
   --------------------------------------------------------- */
.detail-gallery-modal{
    position:fixed;
    z-index:1600;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(18,28,33,.92);
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
}
.detail-gallery-modal.is-open{opacity:1;visibility:visible}
.detail-gallery-modal img{
    display:block;
    max-width:min(1100px,94vw);
    max-height:88vh;
    width:auto;
    height:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.detail-gallery-close{
    position:absolute;
    top:18px;right:22px;
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:transparent;
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
}
body.detail-gallery-open{overflow:hidden}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media(max-width:1080px){
    .article-detail-layout{grid-template-columns:minmax(0,1fr) 230px;gap:28px}
    .article-share-rail{position:static;flex-direction:row;margin:0 0 13px}
    .article-detail-sidebar{padding-top:80px}
}

@media(max-width:820px){
    .article-detail-page{padding-top:20px}
    .article-detail-container{width:min(100% - 28px,720px)}
    .detail-breadcrumb{margin-bottom:17px;font-size:9px}
    .detail-top-stories{grid-template-columns:1fr;margin-bottom:20px}
    .detail-top-story,.detail-top-story:first-child,.detail-top-story:last-child{
        min-height:0;
        padding:10px 0;
        border-right:0;
        border-bottom:1px solid #edf0f1;
        background:#fff;
    }
    .detail-top-story:last-child{border-bottom:0}
    .article-detail-layout{display:block}
    .article-detail-header h1{font-size:27px}
    .article-detail-spot{font-size:13px;line-height:1.6}
    .article-detail-sidebar{padding-top:38px}
    .detail-sidebar-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .detail-sidebar-videos h2{grid-column:1/-1}
    .detail-sidebar-card{margin:0}
    .article-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:560px){
    .about-breadcrumb{width:calc(100vw - 28px)}
    .article-detail-container{width:calc(100% - 28px)}
    .detail-share-heading{align-items:flex-start;flex-direction:column;gap:8px}
    .article-detail-header h1{font-size:24px;line-height:1.2;letter-spacing:-.35px}
    .article-detail-toolbar{align-items:stretch;flex-direction:column;gap:0}
    .article-toolbar-left{border-bottom:1px solid #e7eaec}
    .article-font-control{justify-content:space-between;min-height:43px;padding:0 11px}
    .article-font-control input{width:min(42vw,150px)}
    .article-rich-content{font-size:var(--article-font-size);line-height:1.68}
    .article-rich-content .alignleft,
    .article-rich-content .alignright{float:none;margin:18px auto}
    .article-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
    .detail-sidebar-videos{grid-template-columns:1fr}
    .detail-sidebar-image{aspect-ratio:16/9}
    .detail-gallery-modal{padding:15px}
}