/*
Theme Name: neyapilmaliN
Description: Ne Yapılmalı deneme çalışmaları 2.
Author: Hakkı Gurkan Tucel
Author URI: www.hgtucel.com
Version: 1.0

*/
body {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

textarea:focus {outline: 0;}

a {color: #222;  transition: all .2s ease-in-out;}

  #header {font-family: 'Source Sans Pro', sans-serif; width: 100%; margin-bottom: 30px;}

  #uheader {
    background: #333;
    height: 35px;
    border-bottom: 2px solid #F5D133;
  }
  .hmenu {float: left; margin-top: 8px;}
  .hmenu ul li {float: left; margin-right: 10px;}
  .hmenu ul li a {color: #fff; font-size: 12px;}
  .giris {float: right; margin-top: 10px;}
  .giris ul li {float: left; margin-left: 20px;}
  .giris ul li a {color: #fff;}
  .arama {float: left; margin-left: 25px; margin-top: -2px;}
  .menu-menu-container {float: left;}
  .giris label {
    cursor: pointer;
    margin-left: -.175em;
    transition: .25s;
    display: inline-block;
    color: #fff;
  }
  .giris input {
    width: 0;
    border: 0;
    outline: 0;
    display: inline-block;
    background: #333;
    color: #fff;
    transition: .55s;
  }
  .giris input:hover {
    width: 250px;
    height: 15px;
  }
  .genislik {
    width: 1150px;
    margin: auto;
  }

  #altheader {
    height: 65px;
    box-shadow: 0px 2px 20px -10px rgba(0,0,0,0.75);
  }
  .logo {float: left; margin-top: 7px;}
  .logo img {height: 50px;}
  .althmenu {float: right; margin-top: 20px;}
  .althmenu ul li {
    float: left;
    margin-left: 15px;
    padding-bottom: 5px;
  }
  .althmenu ul li a {color: #555;}
  .althmenu ul li:nth-child(1) {border-bottom: 1px solid #F06E5A}
  .althmenu ul li:nth-child(2) {border-bottom: 1px solid #0099E3}
  .althmenu ul li:nth-child(3) {border-bottom: 1px solid #7EBF00}
  .althmenu ul li:nth-child(4) {border-bottom: 1px solid #F06E5A}
  .althmenu ul li:nth-child(5) {border-bottom: 1px solid #1CC3B7}
  .althmenu ul li:nth-child(6) {border-bottom: 1px solid #DE57A1}
  .althmenu ul li:nth-child(7) {border-bottom: 1px solid #FF9F3C;}
  .althmenu ul li:nth-child(8) {border-bottom: 1px solid #5e2750;}
  .althmenu ul li:nth-child(9) {border-bottom: 1px solid #00363d;}

  .althmenu select {
    display: none;
    margin-right: 10px;
    background: transparent;
    border: 1px solid #3b8ec2;
    color: #333;
    font-weight: 400;
    height: 33px;
    font-size: 16px;
    padding: 7px;
    border-radius: 5px;
  }
  #genel {
    width: 1150px;
    margin: auto;
    font-family: 'Source Sans Pro', sans-serif;
  }
  #ilk4 {margin-bottom: 15px; overflow: hidden;}
  .karart {
    display: block;
    box-shadow: inset -1px -70px 120px 0 rgba(0,0,0,0.10);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .ilk4 {
    float: left;
    width: 25%;
    position: relative;
  }
  img.asilresim {
    display: block;
    min-width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
  }
  .ilk4:hover .karart {
    box-shadow: inset -1px -70px 120px 0 rgba(0,0,0,0.40);
  }
  .ilk4:nth-child(n+3) {margin-right: 0;}
  .ilk4:nth-child(5) {display: none;}
  .ilk4icerik {
    position: absolute;
    bottom: 15px;
    left: 5px;
    margin: 15px;
  }
  .ilk4icerik h1 a {color: #fff; font-size: 25px;}

  #yazilar {
    float: left;
    width: 600px;
    margin-right: 25px;
    border-right: 1px solid #ddd;
  }

  h3.yazibaslik {
    border-bottom: 1px solid #ddd;
    font-size: 25px;
    font-weight: 700;
    color: #222;
    padding-bottom: 5px;
    margin-bottom: 20px;
  }
  h3.yazibaslik span {
    border-bottom: 1px solid red;
    padding-bottom: 5px;
  }

  .yazi {
    width: 100%;
    height: 146px;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
  }
  .yazi:nth-child(odd) img {float: right;}

  .yazi img {
    float: left;
    width: 190px;
    height: 146px;
    margin-right: 10px;
  }
  .yazisag {
    float: left;
    width: 390px;
  }
  .yazi h2 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: -6px;
  }
  .yazi h2 a:hover {font-weight: 400; color: #2aa6c1;}
  .yazi p {
    color: #424242;
    font-size: 15px;
    line-height: 1.4;
  }
  .yazi label {line-height: 2.2; margin-bottom: 10px; font-size: 13px; color: #9b9b9b;}
  .yazi label a {color: #2aa6c1; font-weight: 700;}


  /* TEKNOLOJİ */
  #teknoloji {
    float: left;
    width: 275px;
    margin-right: 25px;
  }
  .teknoloji {margin-bottom: 10px;}
  .teknoloji img {
    width: 300px;
    height: 160px;
  }
  .teknoloji h3 {
    font-weight: 700;
    margin-top: 8px;
  }

  /* POPULERLER */
  #populer {
    float: left;
    width: 224px;
  }
  .populer {overflow: hidden; margin-bottom: 20px;}
  .populer img {
    width: 105px;
    height: 80px;
    float: left;
    margin-right: 13px;
  }
  .populer h3 {
    font-size: 15px;
    font-family: 'Noto Sans', sans-serif;
  }
  .popcizgi {
    border-bottom: 1px solid #ddd;
    width: 30px;
  }
  /* SAG */
  #sag {
    float: left;
    width: 340px;
    margin-top: 30px;
  }
  h3.sagbaslik {
    border-bottom: 1px solid #ddd;
    font-size: 25px;
    font-weight: 700;
    color: #222;
    padding-bottom: 5px;
    margin-bottom: 20px;
  }
  h3.sagbaslik span {
    border-bottom: 1px solid red;
    padding-bottom: 5px;
  }


  .aylik {
    overflow: hidden;
    position: relative;
    width: 340px;
    height: 250px;
    margin-bottom: 25px;
  }
  .aylik img {
    width: 340px;
    height: 250px;
  }
  .aylik label {
    position: absolute;
    width: 340px;
    text-align: center;
    bottom: 15px;
  }
  .aylik label a {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
  }
  .aylik label span {font-weight: 300; font-size: 13px; text-transform: uppercase;}
  .aylik label h5 {margin-top: 15px; font-size: 22px;}


  #teknoloji {}
  .teknoloji {
    overflow: hidden;
    margin-bottom: 25px;
  }
  .teknolojiresim {
    float: left;
    width: 270px;
    margin-right: 20px;
  }
  .teknolojiresim img {
    width: 270px;
  }
  .teknolojiicerik {
    float: left;
    width: 430px;
  }
  .teknolojiicerik h3 {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 6px;
  }
  .teknolojiicerik label {font-size: 12px; font-style: italic; color: #545454;}
  .teknolojiyazi {color: #545454; margin-top: 10px; font-size: 15px; line-height: 1.6;}
  .teknolojialt {
    margin-top: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid #e8e8e8;
  }
  .teknolojisag {float: right;}
  .teknolojisag i {float: left; margin-left: 12px;}

  #soniki {
    margin-top: 20px;
  }

  .soniki {
    float: left;
    width: 550px;
    position: relative;
  }
  .soniki:last-child .sonikiicerik {border-left: 0;}
  .sonikiresim {
    position: relative;
  }
  .sonikiresim img {
    width: 550px;
    height: auto;
  }
  .sonikikategori {
    position: absolute;
    bottom: 0;
    left: 50px;
    background: #fc3d39;
    padding: 10px;
    text-transform: uppercase;
  }
  .sonikikategori a {color: #fff;}
  .sonikiicerik {
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 15px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 90px;
  }
  .sonikiicerik h1 {
    font-size: 23px;
    margin-bottom: 20px;
  }
  .sonikiicerik h1 a {color: #444;}
  .sonikiyazar {float: left; margin-right: 25px;}
  .sonikiyazar img {
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .sonikiyazar a {
    color: #bababa;
    font-size: 14px;
    line-height: 22px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .sonikiicerik label {
    float: left;
    margin-right: 20px;
    font-weight: 300;
    color: #bababa;
    font-size: 14px;
    margin-top: 3px;
    text-transform: uppercase;
  }
  .sonikiicerik label i {margin-right: 3px;}
  .solalt {
    position: absolute;
    left: 0;
    bottom: -1px;
  }
  .sonikidoku {
    float: left;
    border: 1px solid #eee;
    border-bottom: 0;
    padding: 10px;
    font-size: 14px;
  }
  .soniki:last-child .sonikidoku {border-left: 0;}
  .sonikidoku a {
    color: #444;
  }
  .sonikipaylas {
    float: left;
  }
  .sonikipaylas a {
    color: #444;
  }


  .sonikidiger {
    margin-top: 15px;
    float: left;
    position: relative;
    width: 270px;
    height: 200px;
    margin-right: 20px;
  }
  .sonikidiger:last-child {margin-right: 0;}
  .sonikidigerresim img {
    width: 270px;
    height: 200px;
  }
  .sonikidigerresim label {
    position: absolute;
    top: 0;
    left: 10px;
    background: #fc3d39;
    padding: 10px;
  }
  .sonikidigerresim label a {color: #fff;}
  .sonikidigericerik {
    content: "";
    display: block;
    bottom: 0;
    height: 50%;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    display: none;
  }
  .sonikidiger:hover {

  }
  .sonikidiger:hover .sonikidigericerik {
    display: block;
    transition: opacity .6s;
  }
  .sonikidigericerik h4 {margin-bottom: 15px;}
  .sonikidigericerik h4 a {color: #fff;}
  .sonikidigericerik label {color: #fff; font-weight: 300; font-size: 13px;}

  /* SOL */
  #iceriksol {
    width: 800px;
    float: left;
    margin-right: 50px;
  }

  #makale {
    margin-top: 25px;
  }
  .makalebaslik {margin-bottom: 20px; overflow: hidden;}
  .makalebaslik h2 {
    font-size: 30px;
    line-height: 1.8;
    margin-bottom: 15px;
    font-weight: 600;
  }
  .makalebaslik h2 a {color: #212020;}
  .makalebaslik label {
    float: left;
    margin-right: 15px;
    text-transform: uppercase;
    font-weight: 400;
    background: #f0f0f0;
    border: 1px solid #fff;
    padding: 10px;
  }
  label.fb {
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 22px;
    background: #3b5998;
  }
  label.tw {
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 22px;
    background: #1da1f2;
  }
  label.fb i { color: #fff;}
  label.tw {background: #1da1f2;}
  label.tw i { color: #fff;}
  .makalebaslik label a {color: #212020;}

  .makaleicerik {color: #212020; font-weight: 300;}
  .makaleicerik p {font-size: 18px; line-height: 1.8;}
  .makaleicerik h2 {
    min-height: 45px;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 700;
    color: #424242;
  }
  .makaleicerik p {line-height: 1.8; margin: 0 0 1.75em;}
  .makaleicerik iframe {width: 100%;}
  .makaleicerik a {color: #2aa6c1;}
  .makaleicerik ul li {
    margin: 0 0 0 21px;
    line-height: 32px;
    list-style-type: disc;
  }
  .makaleicerik blockquote {}
  .makaleicerik blockquote{
      display:block;
      background: #fff;
      padding: 15px 20px 5px 45px;
      margin: 0 0 20px;
      position: relative;
      font-size: 16px;
      line-height: 1.2;
      color: #666;
      text-align: justify;
      border-left: 15px solid #c76c0c;
      border-right: 2px solid #c76c0c;
      -moz-box-shadow: 2px 2px 15px #ccc;
      -webkit-box-shadow: 2px 2px 15px #ccc;
      box-shadow: 2px 2px 15px #ccc;
    }

  .makaleicerik blockquote::before{
      content: "\201C";
      font-family: Georgia, serif;
      font-size: 60px;
      font-weight: bold;
      color: #999;
      position: absolute;
      left: 10px;
      top:5px;
    }

  .makaleicerik blockquote::after{content: "";}

  .makaleicerik blockquote a{
      text-decoration: none;
      background: #eee;
      cursor: pointer;
      padding: 0 3px;
      color: #c76c0c;
    }

  .makaleicerik blockquote a:hover{
     color: #666;
    }

  .makaleicerik blockquote em{
      font-style: italic;
    }

    .aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

  #yazar {
    overflow: hidden;
    border: 1px solid #eee;
    padding: 10px;
    margin-top: 10px; margin-bottom: 10px;
  }
  #yazar img {
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 30px;
  }
  #yazar label span {color: #e71111;}
  #yazar p {margin-top: 10px; font-weight: 300;}
  #kategoriden {overflow: hidden; margin-top: 50px;}
  .kategoriden {width: 245px; float: left; margin-right: 20px; margin-bottom: 20px;}
  .kategoriden img {
    width: 245px;
    height: 165px;
  }
  .kategoriden h4 {margin-top: 14px; line-height: 1.5;}
  .kategoriden h4 a {color: #444;}

  /* SAG */
  #iceriksag {
    width: 300px;
    float: left;
  }
  .rastgele {
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
    margin-bottom: 30px;
  }
  .rastgelekonular {
    margin-top: 25px;
  }
  .rastgeleresim {margin-bottom: 15px; position: relative;}
  .rastkat {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    text-transform: uppercase;
    padding: 10px;
    font-size: 13px;
  }
  .rastkat a {color: #e71111;}
  .rastgeleresim img {
    width: 300px;
    height: 200px;
  }
  .rastgele h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 5px;
  }
  .rastgele h3 a {color: #444;}
  .rastgele label {font-weight: 300; color: #bababa; font-size: 15px;}
  .rastgele label i {color: #e71111;}

  ul.yorumlistele {
    overflow: hidden;
    margin-bottom: 30px;
  }
  p#yorumgiris {
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 10px;
  }
  p#yorumgiris a {color: #e71111;}
  .yorum {
    width: 100%;
  }
  .yorumsol {
    float: left;
    width: 60px;
  }
  .yorumavatar img {
    width: 50px;
    height: 50px;
  }
  .yorumsag {
    float: left;
    width: 690px;
  }
  span.yazar {font-weight: 700;}
  span.yazar a {color: #444;}
  span.tarih a {font-weight: 300; color: #444;}
  .yorum-yazi {
    line-height: 1.6;
    font-weight: 300;
    color: #444;
    margin-top: 13px;
    margin-bottom: 13px;
    font-size: 14px;
  }
  span.cevap {
    font-size: 14px;
    color: #444;
    font-size: 12px;
    font-weight: 300;
    color: #e71111;
  }
  span.cevap a {color: #e71111;}

  /* YORUM EKLE */
  #yorumekle h3 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 19px;
  }
  #yorumekle textarea {
    color: #444;
    border: 1px solid #e1e1e1;
    width: 100%;
    height: 150px;
    padding: 6px 9px 6px 9px;
    font-size: 13px;
    margin-bottom: 15px;
  }
  #yorumekle input[type=text]{
    width: 100%;
    border: 1px solid #e1e1e1;
    height: 35px;
    padding: 3px 9px;
    font-size: 13px;
    margin-bottom: 15px;
  }
  #yorumekle input[type=submit] {
    background: #222222;
    border: 0;
    padding: 8px 15px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-top: 12px;
  }

  /* SAYFA */
  #sayfabaslik h4 {
    font-size: 27px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #58585a;
  }
  #sayfaicerik {line-height: 1.8;}
  /* UYE GİRİS */
  p.message {display: none;}
  #theme-my-login {}
  #theme-my-login label {
    display: block;
    margin-bottom: 10px;
    color: #545454;
  }
  #theme-my-login input {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 30px;
    width: 50%;
    padding: 10px;
    font-size: 20px;
  }
  #theme-my-login input[type="submit"] {
    border-radius: 5px;
    background: 0;
    border: 0;
    border-bottom: 2px solid #01836c;
    width: 25%;
    height: 45px;
    font-size: 20px;
  }
  #theme-my-login input[type="submit"]:hover {
    text-transform: uppercase;
  }
  ul.tml-action-links {margin-top: 20px; margin-bottom: 15px;}
  ul.tml-action-links li {
    float: left;
    font-size: 18px;
    margin-right: 10px;
  }
  ul.tml-action-links li a:hover {border-bottom: 1px solid #FF9F3C; padding-bottom: 5px;}

@media (max-width: 480px) and (min-width: 280px) {

.genislik {width: auto; margin: 0;}
.hmenu {display: none;}
.giris {float: left;}
.logo {margin-left: 10px;}
.althmenu ul {display: none;}
.althmenu select {display: block; float: right;}
#genel {width: auto;}
.ilk4 {margin-bottom: 0;}
.ilk4:nth-child(1) {float: none; width: 100%; margin-right: 0;}
.ilk4:nth-child(n+2) {width: 50%; margin-right: 0;}
.ilk4:nth-child(n+2) .ilk4resim img {width: 100%; height: 50%; margin-right: 0;}
.ilk4icerik h1 a {font-size: 20px;}
.ilk4:nth-child(n+2) .ilk4icerik h1 a {font-size: 16px;}
.ilk4:nth-child(5) {display: block;}
#yazilar {width: 100%; float: none;}
.yazisag {width: 49%;}
.yazi img {width: 48%;}
.yazi label {display: none;}
.yazi:nth-child(odd) img {float: left;}
#teknoloji {width: 100%; float: none;}
.teknoloji img {width: 100%; height: auto;}
#populer {width: 100%; float: none;}
#singleiki {display: none;}
#iceriksol {float: none; width: 100%; margin-right: 0;}
#makale {margin-left: 10px;}
.makaleicerik img {width: 100%;}
#iceriksag {float: none; width: 100%;}
.rastgele {float: left; width: 50%; border: 0; padding-bottom: 0;}
.rastgeleresim img {width: 100%; height: auto;}
.kategoriden {
  width: 50%;
  float: left;
  margin-right: 0;
}
.kategoriden img {width: 100%; height: auto;}
#yorumekle span {display: block;}
#yorumekle textarea {width: 80%;}
#yorumekle input[type="text"] {
  float: none;
  width: 80%;
  margin-bottom: 15px;
}

}