body{ width: 100%; height: 100%; padding: 0; margin: 0; color: #fff; background: #000; font-family: 'Core Sans G'; font-size: 16px; font-weight: 200; overflow: auto; overflow-x: hidden;}
::selection{ background: #89060d; color: #fff;}
.loading{ position: fixed; width: 100%; height: 100vh; background: #000; top: 0; left: 0; z-index: 9999999999999999;}
.container{ max-width: 1300px !important; }

/* Logo */

.logo { width: auto; }
.logo a { text-decoration: none; color: currentColor; display: block; }
.logo img { max-width: 100%; }

/* Smoke Effect */

.effect { position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 0.8; }

/* Top Menu */

.top-menu{ width: auto; padding-top: 10px; }
.top-menu ul{ list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;}
.top-menu ul li{ position: relative; width: auto;}
.top-menu ul li a{ text-decoration: none; color: #fff; opacity: 1; display: inline-block; padding: 10px 20px; font-size: 13px; position: relative; letter-spacing: 0px; }
.top-menu ul li a i{ color: #fff; font-size: 18px; position: relative; top: 3px;}
.top-menu ul li:hover a{ opacity: 0.5; }
.top-menu > ul{ list-style: none; padding: 0; margin: 0; display: flex;}
.top-menu > ul ul{ list-style: none; padding: 10px 0; margin: 0; position: absolute; width: 180px; background: #fff; display: none; z-index: 2;}
.top-menu > ul ul li a{ padding: 5px 25px; color: #111 !important; opacity: 1 !important; font-size: 15px; font-weight: 400; letter-spacing: 0; }
.top-menu > ul ul li a:hover{ opacity: 0.5 !important;}
.top-menu > ul ul.opened{ display: block;}
.top-menu > ul ul ul{ left: 100%; top: 0; display: none;}
.top-menu > ul ul ul.opened{ display: block;}

.mobile-menu{ width: 100%; height: 100%; position: fixed; left: -100%; top: 0; z-index: 9; transition: 0.3s; background: #111; overflow: auto;}
.mobile-menu.opened{ left: 0;}
.mobile-menu ul{ width: 100%; height: 100%; top: 0; z-index: 3; padding: 30px 0; padding-top: 80px; margin: 0; list-style: none;}
.mobile-menu ul li{ position: relative; border-top: 1px solid #222;}
.mobile-menu ul li:last-child{ border-bottom: 1px solid #222;}
.mobile-menu ul li a{ text-decoration: none; color: #fff; font-size: 14px; font-weight: 500; display: block; letter-spacing: 1px; padding: 10px 15px; text-align: center;}
.mobile-menu > ul{ display: block; left: 0;}
.mobile-menu > ul ul{ position: fixed; background: #111; left: -100%; opacity: 0; visibility: hidden; transition: 0.3s;}
.mobile-menu > ul ul.opened{ left: 0; opacity: 1; visibility: visible;}
.mobile-menu > ul ul ul{ position: fixed; left: 0; top: 0; left: -100%; opacity: 0; visibility: hidden; transition: 0.3s;}
.mobile-menu > ul ul ul.opened{ left: 0; opacity: 1; visibility: visible;}
.mobile-menu .back-icon{ color: #fff; width: 40px; height: 40px; position: absolute; left: 15px; top: 20px; display: flex; align-items: center; justify-content: center; z-index: 2; border: 1px solid #222;}
.mobile-menu .sub-icon{ color: #fff; width: 40px; height: 40px; position: absolute; right: 0; top: 0; display: flex; align-items: center; justify-content: center; z-index: 2;}

/* Right Links */

.right-links { display: flex; align-items: center; }

.right-menu { position: relative; }
.right-menu > a { width: 32px; height: 27px; position: relative; text-decoration: none; display: flex; justify-content: flex-end; align-content: space-between; flex-wrap: wrap; }
.right-menu > a span { display: block; width: 32px; height: 5px; background: #fff; border-radius: 10px; }
.right-menu > a span:nth-child(2) { width: 20px; }

.right-menu > ul { list-style: none; padding: 10px 0; margin: 0; position: absolute; min-width: 150px; background: #fff; z-index: 3; right: -25px; margin-top: 30px; text-align: right; display: none; }
.right-menu > ul.active { display: block; }
.right-menu > ul li a { text-decoration: none; color: #111; font-size: 15px; font-weight: 400; padding: 5px 25px; display: block; }
.right-menu > ul li a:hover { opacity: 0.5; }



.wrap { /*max-width: 980px;*/ margin: auto }

/* details kartı */
.accordion details { background: var(--card); border: 1px solid var(--stroke); border-radius: 14px; margin: 12px 0; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease; }
    .accordion details:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(124,58,237,.15); }
    /* açık olanın solunda mor şerit efekti */
    .accordion details[open] { border-color: rgba(124,58,237,.45); background: linear-gradient(90deg, var(--brand) 4px, transparent 4px) padding-box, var(--card); }

/* başlık */
.accordion summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 700; font-size: 18px; outline: none; }
    .accordion summary::-webkit-details-marker { display: none }

/* sağdaki ok simgesi (JS ile ekleniyor ama görünümü burada) */
.accordion .chev { margin-left: auto; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.25); transition: transform .25s ease; flex: 0 0 36px; }
.accordion details[open] .chev { transform: rotate(180deg) }

/* içerik */
.accordion .content { padding: 0 20px; /* kapalıyken sadece yatay iç boşluk */ margin-top: 12px; /* başlık ile açıklama arası boşluk */ color: var(--muted); font-size: 15.5px; line-height: 1.65; /*border-top: 1px dashed rgba(124,58,237,.25);*/ max-height: 0; overflow: hidden; transition: max-height .35s ease, padding-bottom .35s ease; }
.accordion details[open] .content { padding-bottom: 18px; /* açıldığında alt boşluk gelsin */ }

@media (max-width:560px) {
    .accordion summary { font-size: 16.5px; padding: 16px 16px }
    .accordion .content { padding: 0 16px }
    .accordion .chev { width: 32px; height: 32px; flex-basis: 32px }
}

@media (prefers-reduced-motion:reduce) {
    .accordion .chev,
    .accordion .content,
    .accordion details { transition: none }
}


/* Breadcrumb */

.breadcrumb { background: transparent; display: flex; border-top: 1px solid #333; border-bottom: 1px solid #333; }
.breadcrumb a { text-decoration: none; color: #aaa; display: block; margin-right: 15px; }

/* Referans List */

.referans-list { width: 100%; margin-top: 30px; margin-bottom: 45px; }
.referans-list ul { width: 100%; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.referans-list ul li { width: 25%; padding: 10px; transition: 0.3s; }
.referans-list ul li:hover { opacity: 0.5; }
.referans-list ul li a { text-decoration: none; width: 100%; padding-bottom: 100%; color: currentColor; display: block; position: relative; overflow: hidden; border-radius: 5px; }
.referans-list ul li img { transition: 1s; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; border-radius: 5px; will-change: transform; }

.referans-list.style-2 ul li { width: 25%; }
.referans-list.style-2 ul li:hover { opacity: 1; }
.referans-list.style-2 ul li:hover img { transform: scale(1.1); }
.referans-list.style-2 ul li h1 { position: absolute; width: 100%; left: 0; bottom: -10px; font-size: 22px; text-align: center; background: #666; padding: 15px; }

/* Özel Grup 8 Form */

#ozlgrp-8 input { background: transparent; }
#ozlgrp-8 textarea { background: transparent; }
.form-gonder-button { background: #333 !important; color: #fff !important; }

/* Slider */

.slider{ width: 100%;}
.slider a{ text-decoration: none; color: currentColor; display: block;}
.slider img{ width: 100%;}

.slider .content { position: absolute; max-width: 500px; width: 100%; left: 25%; z-index: 1; bottom: 15%; }
.slider .content h2 { font-size: 54px; }
.slider .content h3 { font-size: 20px; font-weight: 200; letter-spacing: 5px; margin-bottom: 45px; }
.slider .content small { font-size: 24px; font-weight: 500; border-bottom: 1px solid #fff; margin-bottom: 15px; display: inline-block; }
.slider .content p { font-size: 14px; }

.slider .slider-controller { position: relative; max-width: 500px; width: 100%; left: 25%; bottom: 45px; }
.slider .slider-controller::before { content: ""; width: 1px; height: 25px; background: rgba(255,255,255,0.5); position: absolute; left: 30px; top: 50%; transform: translateY(-50%); z-index: 2; }
.slider .swiper-button-prev { left: 0; }
.slider .swiper-button-next { right: unset; left: 50px; }
.slider .swiper-button-prev::after { font-size: 24px; color: #fff; }
.slider .swiper-button-next::after { font-size: 24px; color: #fff; }
.slider .swiper-button-prev, .slider .swiper-button-next { width: auto !important; }

/* PROJE LİSTE */

.proje-list { }
    .proje-list a { text-decoration: none; color: currentColor; display: block; display: flex; align-items: flex-end; }

    .proje-list .img { width: 50%; position: relative; }
        .proje-list .img img { width: 100%; position: relative; z-index: 2; }

    .proje-list .icerik { width: 50%; padding-left: 4%; }
        .proje-list .icerik h1 { font-size: 24px; font-weight: 600; margin-bottom: 15px; color: #ffffff; display: inline-block; padding-right: 10px; }
        .proje-list .icerik .tarih { font-size: 20px; font-weight: 400; color: #888; }
        .proje-list .icerik p { color: #c4cbd3; border-top: 1px #ccc solid; padding-top: 20px; }

    .proje-list ul { list-style: none; padding: 0; margin: 0; max-width: 1110px; width: 100%; margin: auto; }
        .proje-list ul li { margin-bottom: 75px; }
            .proje-list ul li:last-child { margin-bottom: 0; }

            /* çift satırlar */
            .proje-list ul li:nth-child(even) .img { order: 2; padding-right: unset; }
                .proje-list ul li:nth-child(even) .img::after { right: auto; left: 0px; }

            .proje-list ul li:nth-child(even) .icerik { order: 1; padding-left: unset; padding-right: 4%; text-align: left; }

/* Detail Gallery */

.detail-gallery { width: 100%;}
.detail-gallery a{ text-decoration: none; color: currentColor; display: block; width: 100%; height: calc(100vh - 130px); position: relative;}
.detail-gallery img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}

.detail-gallery .swiper-button-prev::after, .detail-gallery .swiper-button-next::after { color: #fff; }
.detail-gallery .swiper-button-prev { left: 30px; }
.detail-gallery .swiper-button-next { right: 30px; }

/* Banner */

.banner{ width: 100%; position: relative; }
.banner a{ text-decoration: none; color: currentColor; display: block;}
.banner img{ width: 100%; }

.banner .title { max-width: 1300px; width: 100%; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; padding: 15px; }
.banner .title h2 { font-size: 52px; }
.banner .title h3 { font-size: 20px; letter-spacing: 5px; font-weight: 200; }

/* Tab Filter */

.tab-title { width: 100%; }
.tab-title ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; }
.tab-title ul li { width: auto; margin-right: 30px; }
.tab-title ul li a { text-decoration: none; color: currentColor; display: block; font-size: 16px; letter-spacing: 3px; padding: 5px 10px; }
.tab-title ul li.active a { border: 1px solid #fff; font-weight: 500; }

.tab-content { width: 100%; display: flex; flex-wrap: wrap; }
.tab-content .item { transition: 0.5s; opacity: 0; visibility: hidden; transform: scale(0); display: block; width: 33.333%; padding: 15px; }
.tab-content .item.show { opacity: 1; visibility: visible; transform: scale(1); }
.tab-content .item.none { display: none; }
.tab-content .item a { text-decoration: none; color: currentColor; display: block; position: relative; width: 100%; padding-bottom: 100%; }
.tab-content .item .image { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.tab-content .item .image::after { transition: 0.3s; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; left: 0; top: 0; opacity: 0; }
.tab-content .item .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; left: 0; top: 0; }
.tab-content .item .title { transition: 0.3s; position: absolute; left: 60px; bottom: 0; z-index: 2; transform: rotate(-90deg); transform-origin: left; opacity: 0; }

.tab-content .item:hover .image::after { opacity: 1; }
.tab-content .item:hover .title { opacity: 1; }


/* Detail Content */

.detail-content table tr { border-bottom: 1px solid rgba(255,255,255,0.15); }
.detail-content table tr:last-child { border: 0; }
.detail-content table tr td { padding: 10px 15px 10px 0; }

/* About */

.about img { max-width: 100%; }
.about strong { display: inline-block; /*margin-bottom: 30px;*/ }
.about p { /*margin-bottom: 30px;*/ }
.about a { float: right; text-decoration: none; color: currentColor; font-size: 14px; }

/* Mid Banner */

.mid-banner { width: 100%; position: relative; padding: 90px 0; }
.mid-banner .image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.mid-banner .image::after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.8); }
.mid-banner .image img { width: 100%; height: 100%; position: absolute; object-fit: cover; left: 0; top: 0; }
.mid-banner .content { position: relative; max-width: 950px; margin: auto; z-index: 2; }
.mid-banner .content h2 { font-size: 42px; }
.mid-banner .content h3 { font-size: 20px; font-weight: 200; letter-spacing: 5px; margin-bottom: 45px; }

/* Icons */

.icons .image { max-width: 100px; width: 100%; }
.icons .image img { max-width: 100%; }
.icons .content { width: auto; padding: 0 30px; }
.icons .content h2 { font-size: 16px; font-weight: 200; letter-spacing: 4px; }
.icons .content p { font-size: 13px; font-weight: 400; color: #999; margin: 0; }

/* Infos */

.infos a { text-decoration: none; color: #fff; display: block; position: relative; }
.infos .image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.infos .image::after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.85); }
.infos .image img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; }
.infos .content { position: relative; z-index: 2; padding: 90px 45px; }
.infos .content h2 { margin-bottom: 45px; }
.infos .content p { font-size: 14px; }

/* Project List */

.project-list { width: 100%; }
.project-list { width: 100%; padding: 15px; }
.project-list a { text-decoration: none; color: currentColor; display: block; position: relative; width: 100%; padding-bottom: 100%; }
.project-list .image { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.project-list .image::after { transition: 0.3s; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; left: 0; top: 0; opacity: 0; }
.project-list .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; left: 0; top: 0; }
.project-list .title { transition: 0.3s; position: absolute; left: 40px; bottom: 0; z-index: 2; transform: rotate(-90deg); transform-origin: left; opacity: 0; }

.project-list a:hover .image::after { opacity: 1; }
.project-list a:hover .title { opacity: 1; }

/* Carou */

.carou .swiper-slide { height: unset; }
@media(min-width: 992px) {
    .carou .swiper-slide.swiper-slide-active { width: 45% !important; }
}
.carou .swiper-slide.swiper-slide-active a .image::after { opacity: 1; }
.carou .swiper-slide.swiper-slide-active a .title { opacity: 1; }

.carou a { text-decoration: none; color: currentColor; display: block; position: relative; width: 100%; min-height: 500px; }
.carou .image { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.carou .image::after { transition: 0.3s; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: absolute; left: 0; top: 0; opacity: 0; }
.carou .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; left: 0; top: 0; }
.carou .title { transition: 0.3s; position: absolute; left: 40px; bottom: 0; z-index: 2; transform: rotate(-90deg); transform-origin: left; opacity: 0; }

.carou a:hover .image::after { opacity: 1; }
.carou a:hover .title { opacity: 1; }

.carou .swiper-wrapper { padding-bottom: 60px; }
.carou .carou-controller { position: relative; max-width: 500px; width: 100%; left: 10%; bottom: 20px; }
.carou .carou-controller::before { content: ""; width: 1px; height: 25px; background: rgba(255,255,255,0.5); position: absolute; left: 33px; top: 50%; transform: translateY(-50%); z-index: 2; }
.carou .swiper-button-prev { left: 0; }
.carou .swiper-button-next { right: unset; left: 50px; }
.carou .swiper-button-prev::after { font-size: 24px; color: #fff; }
.carou .swiper-button-next::after { font-size: 24px; color: #fff; }
.carou .swiper-button-prev, .slider .swiper-button-next { width: auto !important; }

/* Contact */

.contact-map{ width: 100%; height: 400px; position: relative;}
.contact-map iframe{ position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

.contact-info{ width: 100%; margin-bottom: 30px;}
.contact-info h2{ font-size: 20px; font-weight: 500; margin-bottom: 20px;}
.contact-info ul{ list-style: none; padding: 0; margin: 0;}
.contact-info ul li{ color: #fff; margin-bottom: 5px;}
.contact-info ul li:last-child{ margin-bottom: 0;}
.contact-info ul li a{ text-decoration: none; color: currentColor; display: inline; font-size: 14px;}
.contact-info ul li b{ font-weight: 600;}

.contact-form{}
.contact-form h2{ font-size: 20px; font-weight: 500; margin-bottom: 20px;}
.contact-form ul{ list-style: none; padding: 0; margin: 0;}
.contact-form ul li{ margin-bottom: 10px;}
.contact-form ul li label{ font-size: 14px;}
.contact-form ul li input[type=text]{ width: 100%; outline: none; border: 1px solid #ddd; background: transparent; padding: 7px;}
.contact-form ul li textarea{ width: 100%; height: 120px; outline: none; border: 1px solid #ddd; background: transparent; padding: 7px;}
.contact-form input[type=submit]{ min-width: 220px; font-weight: 600; letter-spacing: 1px; height: 76px; background: #252525; outline: none; border: 0; color: #fff;}

/* Footer Section */

.footer-section{ width: 100%; }
.footer-section .f-item{ width: 100%; color: #fff;}
.footer-section .f-item h2{ font-size: 18px; width: 100%; margin-bottom: 15px; letter-spacing: 1px; }
.footer-section .f-item ul{ list-style: none; padding: 0; margin: 0;}
.footer-section .f-item ul li{ color: #999; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.25); }
.footer-section .f-item ul li:last-child { border: 0; }
.footer-section .f-item ul li a{ text-decoration: none; color: #fff; font-size: 13px; font-weight: 200; position: relative; letter-spacing: 2px; }
.footer-section .f-item ul li.wp a { display: flex; align-items: center; }
.footer-section .f-item ul li.wp a::before { content: ""; width: 32px; height: 32px; margin-right: 10px; background: url(../images/wp.png) no-repeat center; background-size: 32px; }

.footer-section .copyright { font-size: 14px; letter-spacing: 2px; }
.footer-section .copyright a { text-decoration: none; color: currentColor; }

/* Footer Logo */

.f-logo { width: auto; }
.f-logo a { text-decoration: none; color: currentColor; display: block; }
.f-logo img { max-width: 100%; }

/* Social Media */

.social-media { position: fixed; left: 0; top: 25%; width: auto; padding: 5px 15px; background: #fff; z-index: 999; }
.social-media a { width: 32px; height: 32px; text-decoration: none; color: currentColor; display: block; margin: 15px 0; }
.social-media a.facebook { background: url(../images/social/facebook.png) no-repeat center; background-size: 32px; }
.social-media a.instagram { background: url(../images/social/instagram.png) no-repeat center; background-size: 32px; }
.social-media a.twitter { background: url(../images/social/twitter.png) no-repeat center; background-size: 32px; }
.social-media a.youtube { background: url(../images/social/youtube.png) no-repeat center; background-size: 32px; }
.social-media a.linkedin { background: url(../images/social/linkedin.png) no-repeat center; background-size: 32px; }

/* Other CSS */

.border-top, .border-bottom { border-color: rgba(255,255,255,0.15) !important; }
.h1 { font-size: 42px; padding-bottom: 25px; margin-bottom: 30px; position: relative; }
.h1::after { content: ""; width: 50px; height: 1px; background: rgba(255,255,255,0.4); position: absolute; left: 0; bottom: 0; }
.h2 { font-size: 42px; }
.h3 { font-size: 20px; font-weight: 200; margin-bottom: 45px; }

.menu-btn{ position: relative; z-index: 10; width: 40px; height: 40px; background: #111; color: #fff; border: 1px solid rgba(255,255,255,0.1); font-size: 24px; margin-left: 15px; display: none; align-items: center; justify-content: center;}

@media(max-width: 991px)
{
    .logo img { max-width: 180px; }
    .banner img { height: 190px; object-fit: cover; }
    .banner .title h2 { font-size: 30px; }
    .banner .title h3 { font-size: 16px; }
    .menu-btn{ display: flex;}
    .top-menu{ display: none;}
    .footer-section .f-item{ margin-bottom: 30px;}
    .contact-map{ margin-bottom: 30px; height: auto;}
    .contact-map iframe{ position: relative; height: 300px;}
    .mobile-menu ul{ padding-top: 80px;}
    .mobile-menu .back-icon{ top: 20px;}
    .footer-section{ text-align: center;}
    .footer-section .f-social ul{ justify-content: center;}
    .slider img { height: 350px; object-fit: cover; }
    .slider .content { left: 15px; }
    .slider .content h2 { font-size: 25px; }
    .slider .content h3 { font-size: 16px; margin-bottom: 20px; }
    .tab-content .item { width: 50%; }
    .f-logo { margin-bottom: 30px; }
    .about img { margin-bottom: 30px; }
    .mid-banner .content { padding: 0 15px; }
    .infos .content { padding: 60px 30px; }
    .slider .slider-controller { display: none; }
    .carou .carou-controller { display: none; }
    .social-media { display: none; }
}

@media(max-width: 768px)
{
    .carou a { min-height: 350px; }
    .referans-list ul li { width: 33.333%; }
}

@media(max-width: 640px)
{
    .tab-content .item { width: 100%; }
    .tab-title ul li { width: 100%; }
    .referans-list ul li { width: 50%; padding: 5px; }
}

@media(max-width: 576px)
{
    .slider .content { padding-right: 30px; }
}

@media(max-width: 480px)
{

}

@media(max-width: 400px)
{

}












