/*
Theme Name: Bereketli Metal
Theme URI: https://klashurda.com
Author: Serhat öcal
Author URI: https://klashurda.com/hurdaci
Description: Bu tema bereketli metal için özel olarak oluşturulmuştur
Requires PHP: 5.2.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: klashurda
Tags: hurdacı

*/

:root {
    --primary-1: #2E7D32;
    --primary-2: #4CAF50;
    --secondary-1: #81C784;
    --secondary-2: #A5D6A7;
    --accent-1: #C5E1A5;
    --accent-2: #DCE775;
    --light-0: #F1F8E9;
    --light-1: #C8E6C9;
    --light-2: #A5D6A7;
    --dark-1: #1B1F1D;
    --dark-2: #2C3531;
}


  
  body { background-color: var(--light-0);}
  
  h1 { color: var(--primary-1);}
  
  a { color: var(--accent-1);}
  
  .button { background-color: var(--primary-color); color: var(--secondary-color); }

html {
    font: 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    line-height: 24px; color: var(--dark-1);
    width: 100%; height: 100%; background-color: var(--light-1);
    display: flex;
    overflow: auto;
}


body { display: flex; flex: 1; flex-flow: column; overflow: auto; margin: 0; }
#section { flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: space-around;  background-color: var(--light-0); }
#section h1 { font-size: 1.5em; margin-block-start: 0.5em; margin-block-end: 0.5em; line-height: 1.5; }
#footer, #header, #top-nav { background-color: var(--primary-1); }
#footer a, #header a { color: var(--light-1); }

a { text-decoration: none; }
p { line-height: 1.5; }
img { display: block; width: 100%; height: auto; }


.shadow { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }
.block { display: block; }
.flex { display: flex; }
.hide { display: none; }

/* for Mobile */

@media screen and (max-width: 650px) {
    
    #header { display: flex; width: 100%; position: fixed; z-index: 1000; top: 0; width: 100%; }
    #navigation { display: flex; width: 100%; flex-flow: column; }
    #top-nav { display: flex; flex-flow: row; justify-content: space-between; width: 100%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.8); }
	
	#logo { height: 48px; width: auto; margin: 4px }
	
    #menu-icon { display: flex; align-items: center; justify-content: center; }
    #menu-icon > span { padding: 10px; }
    
    #bottom-nav {display: flex; position: fixed; top: 56px; width: 100%; background-color: var(--primary-2); }
    
    #bottom-nav > div { display: flex; flex: 1; }
    #bottom-nav ul { display: flex; flex: 1; margin: 0; padding: 0; flex-flow: column; }
    #bottom-nav li { display: flex; flex: 1; }
    #bottom-nav a { display: flex; flex: 1; justify-content: center; align-items: center; font-size: 1.5em;  margin: 16px;  }
    
    #section { display: flex; margin: 56px 0; background-color: var(--light-0);  background-color: var(--light-0); }
    
    #footer { display: flex; height: 56px; width: 100%; position: fixed; bottom: 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.8); }
    #footer > #footer-nav { display: flex; flex: 1; justify-content: space-evenly; flex-flow: row; }
    #footer > #footer-nav > a { display: flex; flex: 1; align-items: center; justify-content: space-evenly; flex-flow: column; }
    #footer > #footer-nav > a > span:last-child { font-size: 12px; line-height: 1; }

}

/* for desktop */

@media screen and (min-width: 650px) {
    
    body { margin: 0 auto; }
    #header { display: flex; width: 100%; background-color: var(--primary-1): }
    #header > #navigation { display: flex; flex: auto; flex-flow: column; }
    #header > #navigation > #top-nav { display: flex; flex: auto; flex-flow: row; justify-content: space-between; }
    
    #section { margin: 1em auto; display:flex; background-color: var(--light-0); }
    
    #logo { display: flex; flex-flow: column; padding-left: 24px; justify-content: space-evenly; height: 150px; width: auto; }
    
    #header-contact-nav { display: flex; flex-flow: row; width: 360px; height: 100px; }
    #header-contact-nav > a { display: flex; flex: 1; flex-flow: column; align-items: center; justify-content: center; }
    #header-contact-nav > a > span:last-child { font-size: 16px; }
    
    #bottom-nav { display: flex; width: 100%; background-color: var(--primary-2); }
    #bottom-nav > div { display: flex; flex: auto; flex-flow: row; }
    #bottom-nav ul { display: flex; flex: auto; flex-flow: row; margin: 0; padding: 0; }
    #bottom-nav li { display: flex; flex: auto; height: 56px; align-items: center; justify-content: space-around;  }
    #bottom-nav a { display: flex; flex: 1; align-items: center; justify-content: center;}
}




.table { width: 100%;  border-width: 0 1px 0 1px;}
.table figcaption, table thead tr { background-color: var(--primary-1); color: var(--light-1); font-weight: bold;  }
.table figcaption { padding: 12px 15px; }
.table thead tr { text-align: left;}
.table th, .table td { border: none; padding: 12px 15px; }
.table tbody tr { border-bottom: 1px solid var(--light-2); }
.table tbody tr:nth-of-type(even) { background-color: var(--light-2);}
.table { border: none; border-top: 2px solid var(--light-2); border-left: 2px solid var(--light-2); border-right: 2px solid var(--light-2);  }
.table tbody tr.active-row { font-weight: bold; color: var(--primary-1);}


.content { display: flex; flex-flow: column; padding: 0 1em; background-color: var(--light-1); box-sizing: border-box; }
.content a { color: var(--primary-1); }
.content a:hover { text-decoration: underline; }
.content-header { display: flex; width: 100%; }
.content-section { display: flex; flex: auto; flex-flow: column; }
.content-footer { display: flex; align-self: flex-end; height: 56px; width: 100%; }
.content-details { display: flex; flex-flow: column; margin: 8px 0; }
.content-author,.content-date { font-size: 12px; line-height: 20px; color: var(--primary-1); }

.preview { display: flex; flex-flow: column; border-radius: 0.25em; margin: 1em; box-sizing: border-box; padding: 0 1em; max-width: 360px; width: calc(100% - 2em); background-color: var(--light-1); }
.preview-header { display: flex; width: 100%; }
.preview-header a { color: inherit; }
.preview-header a:hover { text-decoration: underline; }
.preview-section { display: flex; flex: auto; }
.preview-footer { display: flex; align-items: center; justify-content: space-between; }
.preview-details { display: flex; flex-flow: column; margin: 8px 0; align-self: flex-end; }
.preview-author, .preview-date { font-size: 12px; line-height: 20px; color: var(--primary-1); }

/* for Mobile */
@media screen and (max-width: 650px) {
    
    .table { width: 100%; margin: 8px auto; }

    .content { width: 100%; }
    
    .hide-on-mobile { display: none!important; }

}


/* for desktop */

@media screen and (min-width: 650px) {
    
    .table { width: 21cm; }
    
    .hide-on-desktop { display: none!important; }
    
    .content { width: 210mm; min-height: max-content; }

}