body {
    cursor: url('../images/cursor32.png?23') 12 12, auto;
}

#home-blog {
    background: #000;
    padding-bottom: 80px;
    overflow: hidden;
    padding-top: 80px;
}

#home-blog .blog h2 {
    color: #fff;
}

#home-blog .blog h2 a {
    color: #fff;
}

.home-blog-meta .date {
    float: right;
    color: rgba(255, 255, 255, .5)
}

#home-blog .inner-title h2 {
    color: #fff;
}

#home-blog .inner-title p {
    color: #fff;
}

#about-wrapper .row .two-col .info p strong {
    font-weight: 700;
}

.project-detail {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}

.project-detail h3 {
    font-size: 28px;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 20px;
}

.project-detail-title {
    font-weight: bold;
    font-size: 80px;
    color: #fff;
    margin-bottom: 60px;
}

.link-project {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    padding-left: 30px;
    padding-right: 30px;
    border: 2px solid #E84B2C;
}

#home-projects h2 {
    position: absolute;
    top: 20px;
    left: 5%;
    color: #fff;
    font-size: 14px;
    z-index: 1;
    font-family: "Sarabun", sans-serif;
    font-style: normal;
}

#home-projects .link-all-projects {
    position: absolute;
    bottom: 20px;
    right: 5%;
    color: #fff;
    font-size: 14px;
    z-index: 1;
    font-family: "Sarabun", sans-serif;
    font-style: normal;
    text-decoration: underline;
}

#home-patika {
    padding: 100px 5%;
}

#home-patika img {
    width: 100%;
}

#home-sectors {
    padding-top: 100px;
    padding-bottom: 100px;
}

#home-sectors .row {
    display: flex;
    gap: 20px
}

#home-sectors .row .col {
    flex: 1;
    cursor: pointer;
}

#home-sectors .row .col img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.home-sector-title {
    height: 88px;
    line-height: 88px;
    font-size: 30px;
    color: rgba(0, 0, 0, .5);
    font-weight: 400;
    border-top: 1px solid rgba(0, 0, 0, .5);
    transition: .3s all linear;
}

.home-sector-title span {
    height: 14px;
    width: 14px;
    background: url('../images/arrow-black.png') top right no-repeat;
    background-size: cover;
    display: inline-block;
    margin-left: 30px;
    top: -4px;
    position: relative;
}

#home-sectors .row .col:hover .home-sector-title {
    color: #E84B2C;
    border-color: #E84B2C;
}

#home-sectors .row .col:hover .home-sector-title span {
    background: url('../images/arrow-red.png') top right no-repeat;
    background-size: cover;
}

.home-sector-content {
    height: 120px;
}

.home-sector-content p {
    font-family: "Sarabun", sans-serif;
    font-style: normal;
    color: rgba(0, 0, 0, .5);
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 16px;
}

#home-promo {
    width: 100%;
    height: 100vh;
    background: url('../images/home-promo.png') center center no-repeat;
    background-size: cover;
}

#red-patika {
    border: 2px solid #E84B2C;
    padding: 40px;
}

#red-patika h2 {
    color: #000;
    font-family: "Atyp Text";
    font-size: 88px;
    font-style: normal;
    font-weight: 400;
    line-height: 78px;
    /* 72.222% */
    letter-spacing: -2px;
    margin-bottom: 32px;
}

#red-patika p {
    color: #000;
    font-family: "Atyp Text";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

#red-patika .link-project {
    border-color: #000;
    color: #000;
}

.pt60 {
    padding-top: 60px;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 1);
    /* Fallback for video transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


/* Video styles */

#loading video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}


/* Hide loading screen when faded out */

#loading.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

#video-promo {
    width: 100%;
    height: calc(100vh - 100px);
    background: black;
    position: relative;
    overflow: hidden;
}


/* Video styles */

#video-promo video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

#video-promo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 2;
}

#red-square-1 {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    margin-top: -250px;
    right: 0;
    border: 2px solid #E84B2C;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    right: 5%;
}

#red-square-2 {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: 2px;
    border: 2px solid #E84B2C;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    right: 5%;
}

#red-square-3 {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    margin-top: -250px;
    right: 0;
    border: 2px solid #E84B2C;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-around;
    right: calc(5% + 252px);
}

#video-promo .container {
    height: calc(100vh - 100px);
    position: relative;
    z-index: 2;
}

#proje-promo-left {
    height: calc(100vh - 100px);
}

#video-promo .row {
    display: flex;
}

#video-promo .row .col {
    flex: 1;
}

#video-promo .motto {
    font-size: 72px;
    line-height: 1.2;
}

#red-square-3 p {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 14px;
    color: White;
    line-height: 1.3;
}

#red-square-2,
#red-square-3 {
    cursor: pointer;
}

#red-square-2 p {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-size: 14px;
    color: White;
    line-height: 1.3;
}


/* HOME PROJECTS – ARKA PLAN & LAYOUT */

#home-projects {
    width: 100%;
    height: 100vh;
    position: relative;
}

#ss1 {
    overflow: hidden;
    background: url('../images/img-home-projects.jpg') center center no-repeat;
    background-size: cover;
}

#ss2 {
    overflow: hidden;
    background: url('../images/home-2-slider.jpg') center center no-repeat;
    background-size: cover;
}


/* Sağdan gelen siyah gradient */

#home-projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(108deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
}


/* Swiper wrapper ve slide'lar full alanı kaplasın */

.myProjectsSwiper .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.myProjectsSwiper .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    /* içindeki absolute elemanlar buna göre hizalansın */
}


/* Görsel ve metin senin eski layout'unla aynı kalsın */

.home-project-secondary {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translate(0, -50%);
    height: 60vh;
    z-index: 2;
}

.project-detail {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 2;
}

.project-detail h3 {
    font-size: 28px;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 20px;
}

.project-detail-title {
    font-weight: bold;
    font-size: 80px;
    color: #fff;
    margin-bottom: 60px;
}

.link-project {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    display: inline-block;
    padding: 0 30px;
    border: 2px solid #E84B2C;
    transition: .3s all linear;
}

.link-project:hover {
    background-color: #E84B2C;
    color: #fff;
}


/* Swiper ok ve pagination'lar görünür olsun */

#home-projects .swiper-button-next,
#home-projects .swiper-button-prev {
    color: #fff;
    z-index: 3;
}

#home-projects .swiper-pagination-bullet {
    background: #fff;
    opacity: .5;
}

#home-projects .swiper-pagination-bullet-active {
    opacity: 1;
}

.myProjectsSwiper .swiper-slide::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Soldan sağa siyah → şeffaf gradient */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

.homeAbout {
    padding-top: 40px;
    padding-bottom: 60px;
}

.myButton {
    padding: 12px 20px;
    border: 2px solid #E84B2C;
    font-size: 18px;
    color: #000;
    transition: .3s all linear;
}

.myButton:hover {
    background-color: #000;
    color: #fff;
}


/* ===========================================================
   1) FLOATING BUTTONS (Bilgi Talep + Randevu)
   =========================================================== */

.floating-buttons {
    position: fixed;
    right: 40px;
    bottom: 40px;
    display: flex;
    flex-direction: row;
    /* yan yana */
    gap: 12px;
    z-index: 99999;
}

.floating-btn {
    background: #b0351d;
    color: #fff;
    padding: 12px 20px;
    border-radius: 40px;
    cursor: pointer;
    border: none;
    font-size: 14px;
    white-space: nowrap;
    transition: .25s ease;
}

.floating-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

.floating-btn.sec {
    background: #E84B2C;
}


/* ===========================================================
   2) INFO PANEL (sağdan açılan, auto-height)
   =========================================================== */

.side-panel {
    position: fixed;
    right: -430px;
    /* gizli başlangıç */
    top: 50%;
    /* yukarıdan boşluk */
    width: 430px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 12px 0 0 12px;
    transition: right .35s ease;
    z-index: 99999;
    transform: translate3d(0, -50%, 0);
    /* yüksekliği içeriğe göre otomatik */
    height: auto;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}


/* Açıkken */

.side-panel.active {
    right: 0;
}


/* Tüm elemanların width hesaplaması düzgün olsun */

.side-panel,
.side-panel * {
    box-sizing: border-box;
}


/* Başlık */

.side-panel h2 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 24px;
}


/* Input */

.side-panel form input {
    width: 100%;
    padding: 14px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 15px;
}
.side-panel form .error{
    border-color: #FF0000;
}

.side-panel form textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 15px;
}

.side-panel form input[type="checkbox"] {
    width: auto;
}

.side-panel form textarea::placeholder {
    color: rgba(255, 255, 255, .45);
}

.side-panel form input::placeholder {
    color: rgba(255, 255, 255, .45);
}


/* opsiyonel legacy */

.side-panel form textarea::-webkit-input-placeholder,
.side-panel form input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, .45);
}


/* KVKK */

.kvkk {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 20px;
    width: 100%;
}

.kvkk input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}


/* Submit */

.submit-btn {
    width: 100%;
    background: #2956cc;
    color: #fff;
    padding: 14px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: .25s ease;
}

.submit-btn:hover {
    background: #1f47a8;
}


/* Close button */

.panel-close {
    position: absolute;
    right: 12px;
    top: 12px;
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    color: #fff;
}


/* ===========================================================
   3) APPOINTMENT POPUP (Tarih + Saat)
   =========================================================== */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    opacity: 0;
    transition: opacity .25s ease;
}

.popup-overlay.active {
    display: flex;
    opacity: 1;
}

.popup-box {
    width: 420px;
    background: #fff;
    padding: 32px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    transform: translateY(20px);
    transition: transform .3s ease;
}


/* Açılınca yukarı kayar */

.popup-overlay.active .popup-box {
    transform: translateY(0);
}

.popup-box h2 {
    margin-bottom: 22px;
    font-size: 22px;
    font-weight: 600;
    color: #111;
}

.popup-box form label {
    font-size: 14px;
    margin-bottom: 6px;
    color: #444;
    display: block;
}

.popup-box form input,
.popup-box form select {
    width: 100%;
    padding: 14px;
    box-sizing: border-box;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    color: #222;
    background: #fafafa;
    transition: border-color .2s ease;
}

.popup-box form input:focus,
.popup-box form select:focus {
    border-color: #2956cc;
    outline: none;
}

.popup-box .submit-btn {
    width: 100%;
    background: #2956cc;
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background .25s ease;
}

.popup-box .submit-btn:hover {
    background: #1f47a8;
}

.popup-close {
    position: absolute;
    right: 14px;
    top: 14px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
}

.popup-close:hover {
    opacity: .6;
}