/* What the legacy blog did with inline style attributes and script, which the site's
   Content-Security-Policy does not allow, as classes. Loaded after the legacy stylesheets.
   The legacy pages chose a desktop or a mobile layout by the browser's user agent; these pages
   switch at 1025px, where res.css already hides the desktop menu and search. */

/* Pictures: an <img> filling its box, where the legacy pages set a background image. */
#sliderWrapper .sliderContentWrapper { position: relative; overflow: hidden; }
#sliderWrapper .sliderImage {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
#sliderWrapper .sliderContentWrapper .sliderInfo { position: relative; z-index: 1; }
.blogMainItem .blogItemImgLink { position: relative; overflow: hidden; }
.blogMainItem .blogItemImg,
#blogFooterWrapper .blogMainItem .blogItemImg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
}

/* The legacy inline styles. */
@media screen and (min-width: 1026px) {
  #blogContentID.contentPadded { padding: 40px !important; padding-top: 60px !important; }
}
#otherContentsID { padding-top: 30px !important; }
.blogMainItem .blogTitleMain.longTitle { height: 225px !important; }
.blogMainItem .blogSummaryMain.longTitle { min-height: 0 !important; }
.writerBio { color: #000; text-shadow: 0 0 #000; }
.writerWrapper.tagWrapper { margin-bottom: 0 !important; padding-bottom: 5px !important; }
.writerWrapper.tagWrapper .blogWriterTitle { margin-bottom: 0 !important; }
.halfCard { padding: 15px; }
.blogContentHeaderInfoWrapper { margin-bottom: 20px; }
.pageTitle::before { content: "//"; }
.sosoSiteLink { font-family: "Baskervville", serif; }
.blogWriterTitle.writerpage { font-size: 21px; }
.blogHeaderTitle a { color: inherit; font: inherit; text-decoration: none; }

/* The search box opens as the legacy script opened it, when it has the focus. */
.blog-header .top-search-wrapper { transition: max-width .4s; }
.blog-header .top-search-wrapper:focus-within { max-width: 600px; }
.blog-header .top-search-wrapper:focus-within input { text-align: left; padding-left: 0; padding-right: 50px; }
.blog-header .top-search-wrapper:focus-within #topSearchImg { display: none; }
.blog-header .top-search-wrapper:focus-within #topSearchBtn { display: block; }
.mobile-search-wrapper #mobileSearchBtn {
  height: 33px; background: #fff; border: none; color: #000; font-weight: bold;
  font-family: "Montserrat", sans-serif; margin-left: -35px; margin-top: -10px;
  text-decoration: underline; text-underline-offset: 3px; display: none;
}
.mobile-search-wrapper:focus-within #mobileSearchBtn { display: block; }

/* The social icons, drawn where the legacy pages used an icon font. */
.socialIcon { display: inline-block; height: 1em; width: auto; vertical-align: -0.125em; }
#footerID .footerSocialLayer .socialWrapper a .socialIcon { height: 20px; }
#aboutUsBottomLayer .bottomAbout .socialWrapper a .socialIcon { height: 17px; }
.followUsIcons a { color: #fd0202; margin-left: 5px; margin-right: 5px; }
.followUsIcons .socialIcon { height: 30px; }

/* The page links, in the place and look of the legacy "DAHA FAZLA GÖSTER" button. */
.blogPager { display: flex; justify-content: center; align-items: center; gap: 30px; width: 100%; }
.blogPager .btnShowMore { display: flex; align-items: center; justify-content: center; text-align: center; }
.blogPager .btnShowMore:hover { color: #fff; }

/* Wide and narrow layouts, and the menu that the menu button opens without a script. */
.mobileMenuToggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#mobileMenu { display: none; }
.headerMobile, .narrowOnly { display: none !important; }
#menu-button-link, #close-button-link { cursor: pointer; }
@media screen and (max-width: 1025px) {
  .headerDesktop, .wideOnly { display: none !important; }
  .headerMobile { display: flex !important; }
  .narrowOnly { display: block !important; }
  .mobileMenuToggle:checked ~ #mobileMenu { display: block; overflow-y: auto; }
  #mobileMenu #mobileMenuLeft { width: 100%; padding-bottom: 40px; }
  #mobileMenu #mobileMenuLeft .p-4 { padding: 1.7rem !important; }
  .postWrapper { flex-direction: column; }
  .postWrapper .postSide { order: 2; }
  .postWrapper .postMain { order: 1; }
}
@media screen and (max-width: 1025px) {
  .postWrapper .postMain, .postWrapper .postSide { padding-left: 10px; padding-right: 10px; }
  .writerSide { margin-top: 60px; }
  .tagSide { margin-top: 50px; }
  #mainContent #newContentWrapper.about { width: 100% !important; }
  #blogContentID.aboutPage { padding-top: 105px !important; }
}
@media screen and (max-width: 1025px) {
  .aboutPage .contentTypeWrapper { justify-content: flex-start; text-align: left; }
}