/* =========================================================
   Focus Mode Plugin Styles (focus-mode.css)
   ========================================================= */

/* Top bar */
.focus-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f9f9f9;
    padding: 10px 20px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    font-size: 16px;
    z-index: 1000;
}

.focus-mode-bar button {
    background: #3a5795;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 500;
}

.focus-mode-bar button:hover {
    background: #2a4175;
}

.focus-mode-bar .focus-mode-readtime {
    margin-left: auto;
    color: #555;
    font-size: 15px;
    font-weight: 500;
}

/* =========================================================
   Focus Mode - Base
   ========================================================= */

html.focus-mode-active body {
    background: #fff !important;
    overflow-x: hidden !important;
    /* taşmayı kesin kes */
}

/* Hide distractions */
html.focus-mode-active .site-header,
html.focus-mode-active header,
html.focus-mode-active .site-footer,
html.focus-mode-active footer,
html.focus-mode-active nav,
html.focus-mode-active aside,
html.focus-mode-active .sidebar,
html.focus-mode-active .widget,
html.focus-mode-active .widget-area,
html.focus-mode-active .comments-area {
    display: none !important;
}

/* =========================================================
   Theme span-* grid: Your structure
   <div class="span-24" id="contentwrap">
      <div class="span-14">
         <div id="content">...</div>
      </div>
   </div>
   Sidebars: .span-5 and .span-5 last
   ========================================================= */

/* Sidebars close */
html.focus-mode-active #contentwrap .span-5,
html.focus-mode-active #contentwrap .span-5.last {
    display: none !important;
}

/* Make outer frame full width */
html.focus-mode-active #contentwrap {
    width: 100% !important;
    max-width: none !important;
}

/* IMPORTANT: Expand the main column container (span-14) */
html.focus-mode-active #contentwrap>.span-14 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    clear: both !important;
}

/* Boxed reading area: center + 80% width + max width */
html.focus-mode-active #contentwrap>.span-14>#content {
    width: 80% !important;
    /* %80 boxed */
    max-width: 1200px !important;
    /* büyük ekranda limit */
    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;

    overflow-x: hidden !important;
}

/* Safety: inside content should not re-cap width */
html.focus-mode-active #contentwrap #content .entry-content,
html.focus-mode-active #contentwrap #content .site-main,
html.focus-mode-active #contentwrap #content #primary,
html.focus-mode-active #contentwrap #content .content-area,
html.focus-mode-active #contentwrap #content article,
html.focus-mode-active #contentwrap #content main {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
}

/* Ensure box-sizing to reduce unexpected overflow */
html.focus-mode-active #contentwrap #content * {
    box-sizing: border-box;
}