/* Aydınlık/Karanlık Mod Stilleri */


/* Renk Değişkenleri */
:root {
    --bg-color: #fff;
    --text-color: #565656;
    --header-bg-color: #fff;
    --footer-bg-color: #f3f3f3;
    --box-bg-color: #f8f8f8;
    --border-color: rgba(0, 0, 0, 0.125);
    --strong-color: #3d3d3d;
    --link-color: #ed786a;
    --icon-bg-color: #ed786a;
    --button-bg-color: #ed786a;
    --button-text-color: #fff;
}

[data-theme="dark"] {
    --bg-color: #1e1e1e;
    --text-color: #ccc;
    --header-bg-color: var(--bg-color); /* Uniform background */
    --footer-bg-color: var(--bg-color); /* Uniform background */
    --box-bg-color: var(--bg-color);    /* Uniform background */
    --border-color: rgba(255,255,255,0.15);
    --strong-color: #fff;
    --link-color: #ed786a;
    --icon-color: #ccc;
    --icon-bg-color: #555;
    --button-bg-color: #ed786a;
    --button-text-color: #fff;
}

/* Genel Stil Uygulamaları */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

a {
    color: var(--link-color);
}

strong {
    color: var(--strong-color);
}

#page-wrapper {
    background-color: var(--bg-color);
}

#header {
    background: var(--header-bg-color);
}

#footer {
    background-color: var(--footer-bg-color);
    border-top-color: var(--border-color);
}

.box {
    background: var(--box-bg-color);
    border-color: var(--border-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--strong-color);
}

/* İkon Stilleri */
.icon.solid {
    color: var(--icon-color);
}
.icon.brands {
    color: var(--text-color);
}

/* Mobil Logo Boyutu */
@media screen and (max-width: 736px) {
	#logo img {
		max-height: none !important; /* Yükseklik limitini kaldır */
		width: 80% !important; /* Genişliği ayarla */
		height: auto !important; /* Oranı koru */
	}
}

/* Resim Boyutlarını Standartlaştırma */
.regular-size img {
    height: 350px; /* Resim yüksekliğini sabitle */
    object-fit: cover; /* Resmin orantısını koruyarak kutuya sığdır */
}

#banner {
    background-position: center;
    background-color: var(--bg-color);
}

/* Features ve Main bölümlerinin arkaplanı */
#features, #main {
    background-color: var(--bg-color);
}

/* Tema Değiştirme Butonu */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 10003;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 50px;
    background-color: #ccc;
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.theme-switch::before {
    content: '☀️'; /* Güneş ikonu */
    position: absolute;
    top: 50%;
    left: 12px; /* İkonu yatayda ortalamak için ayarlandı */
    font-size: 18px;
    transform: translate(-50%, -50%); /* İkonu tam merkeze konumlandır */
    transition: transform 0.3s;
}

[data-theme="dark"] .theme-switch {
    background-color: #555;
}

[data-theme="dark"] .theme-switch::before {
    content: '🌙'; /* Ay ikonu */
    transform: translate(calc(40px - 100% - 4px), -50%); /* Karanlık modda sağa yasla ve ortala */
}

/* Buton Stilleri */
.button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color) !important;
}

/* Navigasyon Menüsünü Ortalama */
@media screen and (min-width: 737px) {
    #nav {
        text-align: center;
    }
    #nav > ul {
        display: inline-block;
    }
}

/* Alt menülerin arkaplan rengi */
.dropotron {
    background-color: var(--header-bg-color);
    border-color: var(--border-color);
}

.dropotron li a {
    color: var(--text-color) !important;
}

/* Form Elemanları */
input[type="text"],
input[type="email"],
textarea {
	background-color: var(--bg-color);
	border: solid 1px var(--border-color);
	color: var(--text-color);
}

/* Copyright Alanı */
#copyright { border-top: solid 1px var(--border-color); }

/* Footer İkon Listesi Hizalama */
#footer .icons {
    display: flex; /* Make the ul a flex container */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items horizontally */
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#footer .icons li {
    flex: 0 0 50%; /* On large screens, each item takes 50% width */
    max-width: 50%; /* Ensure it doesn't grow beyond 50% */
    padding: 1em 1em 1em 1em; /* Adjust padding for spacing */
    margin: 0; /* Remove default margin */
    box-sizing: border-box;
    display: flex; /* Make li content also flex to center icon and text */
    align-items: center; /* Vertically align icon and text */
    justify-content: center; /* Horizontally center content within li */
    text-align: center; /* Center text */
}

#footer .icons li:before {
    margin-right: 0.5em; /* Space between icon and text */
    font-size: 1.5em; /* Icon size */
    line-height: 1; /* Line height for icon */
    position: static; /* Remove absolute positioning from main.css */
    transform: none; /* Remove transform from main.css */
}

@media screen and (max-width: 736px) {
    #footer .icons li {
        flex: 0 0 100%; /* On small screens, each item takes 100% width */
        max-width: 100%;
        padding: 0.5em 0; /* Adjust padding for mobile */
        justify-content: center; /* Align content to center on mobile */
        text-align: center; /* Align text to center on mobile */
    }

    #footer .icons li:before {
        margin-right: 0.5em; /* Margin for mobile icons */
        position: static; /* Ensure positioning is correct */
        transform: none; /* Ensure transform is correct */
    }
}

/* For screens smaller than 980px (medium and small) */
@media screen and (max-width: 980px) {
    .contact-row .icons.contact-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Align items to center */
        padding-left: 0;
        margin: 0;
    }

    .contact-row .icons.contact-icons li {
        flex: 0 0 50%; /* Two items per row */
        max-width: 50%;
        box-sizing: border-box;
        padding: 0.5em; /* Adjust padding as needed */
        text-align: center; /* Center text */
        display: flex;
        align-items: center;
        justify-content: center; /* Center content */
    }

    .contact-row .icons.contact-icons li:before {
        margin-right: 0.5em;
        position: static;
        transform: none;
    }
}

/* For screens smaller than 736px (small only) */
@media screen and (max-width: 736px) {
    .contact-row .icons.contact-icons li {
        flex: 0 0 100%; /* One item per row */
        max-width: 100%;
        box-sizing: border-box; /* Added for consistency */
        padding: 0.5em 0; /* Adjust padding */
        justify-content: center; /* Center content */
        text-align: center; /* Center text */
    }
}

@media screen and (max-width: 980px) { /* Target both medium and small mobile */
    #content article.box.post .product-details-flex {
        flex-direction: column;
        align-items: center; /* Center items when stacked */
        gap: 1em; /* Adjust gap for mobile stacking */
    }
    #content article.box.post .product-details-flex .image { /* The image element */
        flex: none; /* Remove fixed flex basis */
        width: 80%; /* Adjust image width for mobile */
        max-width: 300px; /* Max width for image to avoid too big */
        display: block; /* Ensure it's a block element for margin auto to work */
        margin: 0 auto; /* Center the image horizontally */
    }
    #content article.box.post .product-details-flex > div { /* The div containing text and button */
        flex: none; /* Remove fixed flex basis */
        width: 100%; /* Take full width on mobile */
        text-align: center; /* Center text content */
    }
    #content article.box.post .product-details-flex .actions {
        justify-content: center; /* Center the button within its parent */
        display: flex; /* Ensure actions is a flex container for justify-content to work */
        padding-left: 0; /* Remove default ul padding */
    }
    #content article.box.post .product-details-flex .actions li {
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
    }
}

/* Adjust WhatsApp icon alignment in buttons */
.button.icon.brands:before {
    padding-left: 0.25em; /* Add a small left padding to shift the icon right */
}

/* Dark mode adjustments for header container */
[data-theme="dark"] #header > .container {
    border-bottom-color: var(--border-color); /* Use dark mode border color */
    box-shadow: inset 0px -8px 0px 0px var(--header-bg-color), inset 0px -10px 0px 0px var(--border-color); /* Adjust shadow colors */
}

/* Dark mode adjustments for banner */
[data-theme="dark"] #banner {
    border-top-color: var(--border-color);
    border-bottom-color: var(--border-color);
    box-shadow: inset 0px -8px 0px 0px var(--header-bg-color), inset 0px 8px 0px 0px var(--header-bg-color); /* Adjusted shadow colors */
    /* Add a dark overlay over the background image */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../../images/banner.jpg");
    background-size: cover;
    background-position: center; /* Ensure position is maintained */
}