html { height: 100%; }
body {margin:0px; width:100%; color:rgba(255,255,255,0.8); background:rgb(255,255,255); position:relative; -webkit-tap-highlight-color:transparent; cursor:default; font-family: 'Roboto', sans-serif; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh;}
a{cursor:pointer; text-decoration:none; color:#FF0000;}
a:focus {outline:none}
a:link {color:rgba(50,60,70,0.8)}
a:hover {color:rgba(50,60,70,1)}
a:visited {color:rgba(50,60,70,0.8)}
a:active {color:rgba(50,60,70,0.8)}
*:focus {outline: none}
a.glow2, a.glow2:hover, a.glow2:focus { text-shadow: none; -webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; color:rgba(255,255,255,0.8) }
a.glow2:hover, a.glow2:focus {color:rgba(255,255,255,1); text-shadow: -4px 4px 12px rgba(255,255,255,1), 4px -4px 12px rgba(255,255,255,1)}
p {font-family: 'Roboto', sans-serif; font-weight:400; font-size:11pt}
h6 {font-family: 'Roboto', sans-serif; font-weight:400; font-size:11pt; color:rgb(255,255,255); text-align:center; line-height:160%; margin:0px; white-space:nowrap;}
h5 {font-family: 'Roboto', sans-serif; font-weight:700; font-size:13pt; color:rgb(255,255,255); text-align:center; margin:0px; white-space:nowrap;}
h4 {font-family: 'Roboto', sans-serif; font-weight:400; font-size:15px; margin-top:10px; margin-bottom:10px; margin-left:50px; text-align:left; color:rgb(80,85,90)}
h3 {font-family: 'Roboto', sans-serif; font-weight:500; font-size:18px; margin-top:10px; margin-bottom:10px; margin-left:0; text-align:left; color:rgb(80,85,90)}
h2 {font-family: 'Roboto', sans-serif; font-weight:600; font-size:20px; margin-top:10px; margin-bottom:10px; margin-left:0; text-align:left; color:rgb(80,85,90)}

header.desktop1header {display:block}
header.mobile1header {display:none}
footer.desktop3footer {display:block}
footer.mobile3footer {display:none}
main.desktop2main {display:block}
main.mobile2main {display:none}


.lightbox {display:none; position:fixed; z-index:999; width:100%; height:100%; text-align:center; top:0; left:0; background:rgba(0,0,0,0.8)}
.lightbox img {max-width:90%; max-height:80%; margin-top:5%}
.lightbox:target {outline:none; display:block}

input {width:160px; height:28px}
select {width:160px; height:28px}
button {width:100px; height:34px}

h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: rgb(80, 85, 90);
    text-align: center;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

main {
    color: rgb(80, 85, 90);
    padding: 15px 0;
    flex-grow: 1;
}

.menu-link {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 11pt;
    text-align: center;
    line-height: 160%;
    white-space: nowrap;
    display: block;
    margin: 0;
}

.lang-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(59, 130, 185);
    border-radius: 8px;
    color: white !important;
    text-decoration: none;
    box-sizing: border-box;
}

.lang-button:hover {
    color: white !important;
}

.lang-button-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
}

.main-content-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0px 16px;
}

.content-col {
    flex-basis: 400px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0px 16px;
}

.col-left {
    padding: 0;
}

.col-left p, .col-right p {
    margin: 0;
}

.col-left p:not(:last-child), .col-right p:not(:last-child) {
    margin-bottom: 30px;
}

.col-left img, .col-right img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.col-center {
    background-color: rgba(173, 216, 230, 0.2);
}

.col-right {
    padding-top: 0;
}

.col-center .calculator-box {
    width: 100%;
}

.col-center .calculator-box h2 {
    text-align: left;
    margin-left: 0;
}

.col-center table {
    margin-left: 0;
    width: 100%;
    border-collapse: collapse;
}

.col-center table tr {
    height: 40px;
}

.col-center input,
.col-center select,
.col-center button {
    width: 100%;
    box-sizing: border-box;
}

.col-right h2 {
    text-align: left;
    margin-left: 0;
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

.article-content img {
    width: 100%;
    height: auto;
}

.col-image-natural img {
    width: auto;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.col-image-natural p:not(:last-child) {
    margin-bottom: 40px;
}

.no-background {
    background-color: transparent;
}



.h2-18px {
    font-size: 18px;
}

.h2-16px {
    font-size: 16px;
}


input[type="number"][disabled] {
    font-weight: bold;
}

.mobile3footer p {
    text-align: center;
    white-space: pre;
}

.desktop3footer p {
    text-align: center;
    white-space: pre;
}

.desktop1header .lang-button {
    height: 40px;
    width: 40px;
    margin-top: 16px;
    margin-left: 44px;
    box-shadow: 0px 4px 6px 0px rgb(0,0,0);
}

.mobile1header .lang-button {
    height: 30px;
    width: 34px;
    margin-top: 2px;
    margin-left: 9px;
}

.mobile1header .lang-button-text {
    display: block;
    text-align: center;
    color: white;
    font-weight: 700;
    padding-top: 4px;
    font-size: 15px !important;
}

.home-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.slideshow-container {
    display: block;
}

.mobile-image {
    display: none;
}


/* YENİ ESNEK FORM SİSTEMİ */
.flex-form .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.flex-form .form-label-flex {
    font-size: 15px;
    font-weight: 500;
    padding-right: 10px;
    box-sizing: border-box;
    text-align: left;
    flex-shrink: 0;
}

.flex-form .form-input-flex {
    flex-shrink: 0;
}

.flex-form .form-input-flex input,
.flex-form .form-input-flex button {
    width: 100%;
    box-sizing: border-box; /* Padding'in genişliği etkilememesi için */
}

/* Farklı Oranlar İçin Sınıflar */
.form-split-80-20 .form-label-flex { width: 80%; }
.form-split-80-20 .form-input-flex { width: 20%; }

.form-split-70-30 .form-label-flex { width: 70%; }
.form-split-70-30 .form-input-flex { width: 30%; }

.form-split-50-50 .form-label-flex { width: 50%; }
.form-split-50-50 .form-input-flex { width: 50%; }

/* Yeni Eklenen Tablo Form Oranları */
.table-form-split-50-50 .form-label {
    width: 50%;
}
.table-form-split-50-50 .form-input-box {
    width: 50%;
}

.table-form-split-80-20 .form-label {
    width: 80%;
}
.table-form-split-80-20 .form-input-box {
    width: 20%;
}





@media (max-width: 1239px) {
    .thermal-calculator-page .main-content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .thermal-calculator-page .col-left {
        order: 2;
    }
    .thermal-calculator-page .col-center {
        order: 1;
    }

    html, body {margin:0px; color:rgba(255,255,255,0.8); background:rgb(255,255,255); position:relative; min-width:240px; overflow-x: hidden;}
    header.desktop1header {display:none}
    header.mobile1header {display:block}
    main.desktop2main {display:none}
    main.mobile2main {display:block}
    footer.desktop3footer {display:none}
    footer.mobile3footer {display:block}
    

    h6 {font-family: 'Roboto', sans-serif; font-weight:400; font-size:11pt; color:rgb(255,255,255); text-align:left; line-height:240%; margin-left:10px; white-space:nowrap;}
    div.line {width:100%; height:1px; background-color:rgba(255,255,255,0.5)}
    

    p {font-family:Roboto; font-weight:400; font-size:12pt; color:rgb(80,85,90)}
    article { margin-top: 0; text-align: justify; }
    article h3 { font-size:14pt; color:rgb(80,85,90); text-align:left; }
    article p { text-align:justify; }


    .col-center table {
        width: auto; 
    }
    table.t1 {
        border:none; 
        font-family:Roboto; 
        color:rgb(80,85,90); 
        font-size:11pt; 
        margin:0 auto; 
        width:100%; 
        max-width: 400px;
        border-collapse: collapse;
    }
    table.t1 td {
        padding: 8px 4px;
        vertical-align: middle;
    }
    
    table.t1 .form-label {
        text-align: left !important;
        vertical-align: middle !important;
        padding-right: 8px !important;
    }
    table.t1 .form-input-box {
        text-align: right !important;
        vertical-align: middle !important;
    }
    table.t1 .form-input-box input,
    table.t1 .form-input-box select {
        display: block;
        margin-left: auto;
    }
    table.t1 .form-unit {
        text-align: left !important;
        padding-left: 8px !important;
        width: auto;
    }
    
    table.t1 tr:last-child td {
        padding-top: 12px;
    }

    .main-content-wrapper {
        flex-wrap: wrap;
        max-width: 820px;
    }

    .menu-link {
        text-align: left;
        line-height: 240%;
        margin-left: 10px;
    }

    .col-left {
        order: 3;
        flex-basis: 100%;
        text-align: center;
    }

    .col-center {
        order: 1;
    }

    .col-right {
        order: 2;
    }
}

@media (max-width: 799px) {
    .main-content-wrapper {
        flex-direction: column;
        align-items: center;
        padding: 0;
        gap: 30px;
    }

    .content-col {
        width: 100%;
        flex-basis: auto;
    }

    .col-center {
        order: 1;
    }

    .col-right {
        order: 2;
    }

    .col-left {
        order: 3;
    }
    .home-content {
        padding: 0;
    }

    .slideshow-container {
        display: none;
    }

    .mobile-image {
        display: block;
        width: 100%;
        height: auto;
    }
  


    .col-center table[cellpadding="8"] tr {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
}
    .col-center table[cellpadding="8"] td {
        width: auto;
        text-align: center !important;
    }
    .col-center .utility-links-table {
        border-collapse: separate;
        border-spacing: 0 20px; 
    }
    
    .col-center .utility-links-table tr { 
        display: flex;
        flex-direction: column; 
        align-items: center;   
        height: auto !important; 
    }

    .col-center .utility-links-table td {
        width: auto !important; 
        text-align: center !important;
        padding: 4px !important;
    }
    
    .col-center .utility-links-table tr td:first-child {
        padding-bottom: 10px !important; 
    }


img.ref {width:90%; margin:0px; border-left: solid 1px rgb(0,0,0); border-right: solid 1px rgb(0,0,0)}
div.name {width:90%; padding-top:10px; padding-bottom:10px; background-color:#E6EBF0; border: solid 1px rgb(0,0,0); font-family: 'Roboto', sans-serif; font-weight:700; font-size:12pt; text-align:center; color:#506478}
div.desc {width:90%; padding-top:10px; padding-bottom:8px; background-color:#E6EBF0; border: solid 1px rgb(0,0,0); font-family: 'Roboto', sans-serif; font-weight:700; font-size:10pt; text-align:center; color:#506478;}



}

/* Thermal Calculator Styles */
.thermal-calculator-page .main-content-wrapper {
    justify-content: center;
}

.thermal-calculator-page .col-center {
    flex-basis: 800px !important;
    flex-shrink: 0;
    flex-grow: 0;
    background-color: transparent; /* Override the light blue background */
}

.thermal-calculator-page .col-left {
    flex-basis: 400px;
    flex-shrink: 0;
}

.thermal-calculator {
    width: 100%;
}

.calc-header-desktop {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
}

.calc-header-desktop .header-item {
    flex: 0 0 auto;
    text-align: center;
    font-size: 10pt;
}

.calc-header-desktop .header-item:nth-child(2) {
    flex-basis: 30%;
}

.calc-header-desktop .header-item:not(:nth-child(2)) {
    flex-basis: 14%;
}

.calc-layer {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.layer-label {
    flex-basis: 14%;
    flex-shrink: 0;
    font-weight: bold;
    padding-right: 10px;
}

.layer-inputs {
    display: flex;
    flex-basis: 86%;
    gap: 10px;
}

.form-field {
    flex-shrink: 1;
    flex-basis: 0;
}

.layer-inputs .form-field:nth-child(1) {
    flex-grow: 30;
}

.layer-inputs .form-field:nth-child(n+2) {
    flex-grow: 14;
}

.form-field select,
.form-field input {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
}

.field-label-mobile {
    display: none;
}

.calc-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20px;
    gap: 20px;
}

.result-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.result-label {
    white-space: nowrap;
}

@media (max-width: 799px) {

header.desktop1header {display:none}
header.mobile1header {display:block}
footer.desktop3footer {display:none}
footer.mobile3footer {display:block}
main.desktop2main {display:none}
main.mobile2main {display:block}


    .thermal-calculator-page .col-center {
        padding: 0 16px;
    }

    .calc-header-desktop {
        display: none;
    }

    .calc-layer {
        flex-direction: column;
        align-items: flex-start;
        border-bottom: 2px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .layer-label {
        margin-bottom: 5px;
        font-size: 18px;
    }

    .layer-inputs {
        display: block;
        width: 100%;
    }

    .form-field {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .field-label-mobile {
        display: block;
        flex-basis: 50%;
    }

    .form-field select,
    .form-field input {
        flex-basis: 50%;
    }

    .calc-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .calc-footer button {
        width: 100%;
        margin-bottom: 15px;
    }

    .result-row {
        justify-content: space-between;
    }
}