@import url('jquery.fancybox.min.css');
 ::-webkit-scrollbar{
     background-color: #ccc;
     width: 10px;
}
 ::-webkit-scrollbar-thumb{
     background-color: #18aaa6;
}
 ::selection{
     color: #464848;
     background-color: #18aaa6;
}
/* 2026-07 duzeltme: navbar #header-fixed'e gecerken (ve #header-spacer ayni anda yukseklik alirken)
   tarayicinin otomatik "scroll anchoring" ozelligi bu degisikligi kendince telafi etmeye calisip
   sayfayi kendiliginden ekstra ~header yuksekligi kadar (ör. 96px) asagi kaydiriyordu - kullanicinin
   "navbar gidince sayfa tekrar sekiyor" olarak fark ettigi asil sorun buydu (spacer/jump mantigi
   dogruydu ama tarayicinin kendi telafi mekanizmasi ekstra bir sicramaya sebep oluyordu). Bu ozellik
   kapatilarak sorun kokten cozuluyor. */
html{
     overflow-anchor: none;
}
 *{
     margin: 0px;
     padding: 0px;
     border: none;
     outline: none;
     font-size: 14px;
}
 body{
     margin: 0px;
     padding: 0px;
     color: #464848;
     font-size: 14px;
     font-family: 'Inter', sans-serif;
     font-weight: 400;
     overflow-x: hidden;
}
/**========================= END BODY =========================**/
/**========================= START COMMON =========================**/
 a, a:hover{
     color: #464848;
     text-decoration: none;
     outline: none;
     transition:all 0.4s;
     -webkit-transition:all 0.4s;
     -moz-transition:all 0.4s;
     -o-transition:all 0.4s;
}
 h1, h2, h3, h4, h5, h6{
     color: #464848;
     margin-bottom: 16px;
     /* 2026-07 guncelleme: site 2026 tasarim analizi kapsaminda tespit edilen ilk sorun -
        tum basliklar govde metniyle AYNI font agirligini (500) kullaniyordu, bu da
        basliklar ile normal metin arasinda gercek bir hiyerarsi/kontrast birakmiyordu.
        Basliklara kendi agirligini (700) ve biraz daha sik/toparlanmis bir gorunum icin
        hafif negatif harf araligi verildi - boylece ayni renk paleti korunurken sayfa
        daha "tasarlanmis", daha az "sablon" hissi veriyor.
        2026-07-30: font-family artik "Sora" (referans tasarimla ayni "display" fontu). */
     font-family: 'Sora', 'Inter', sans-serif;
     font-weight: 700;
     letter-spacing: -0.3px;
}
 p{
     line-height: 26px;
     font-family: 'Inter', sans-serif;
}
 li{
     color: #464848;
     list-style: none;
}
 span, b, strong{
     font-size: 100%;
}
 b, strong{
     font-weight: 900;
}
/* Iframe */
 iframe{
     width: 100%;
     height: 400px;
     border: 0;
     outline: 0;
     overflow: hidden;
}
 img{
     max-width:100%;
}
/* 2026-07-30 (round51): kullanicinin istegiyle "yukleniyor" (loader) animasyonu tamamen
   kaldirildi - buradaki ".loader"/".loader img" kurallari, index.php'deki HTML blogu ve
   common-script.js'teki otomatik gizleme kodu birlikte silindi. */
/* Padding */
 .p-30{
     padding: 30px !important;
}
 .ptb-20{
     padding: 20px 0px;
}
 .ptb-40{
     padding: 40px 0px;
}
 .ptb-60{
     padding: 60px 0px;
}
 .ptb-80{
     padding: 80px 0px;
}
 .ptb-100{
     padding: 100px 0px;
}
 .ptb-120{
     padding: 120px 0px;
}
 .ptb-140{
     padding: 140px 0px;
}
 .ptb-80-40{
     padding: 80px 0px 40px;
}
 .ptb-80-60{
     padding: 80px 0px 60px;
}
 .ptb-60-60{
     padding: 60px 0px 60px;
}
 .pt-30px{
     padding-top: 30px;
}
 .pb-30px{
     padding-bottom: 30px;
}
/* Margin */
 .ml-10{
     margin-left: 10px;
}
 .mr-10{
     margin-right: 10px;
}
/* Btn */
 button, button:focus, button:active, button:hover{
     box-shadow: 0 0 0 0;
     outline: 0;
}
 .input-btn, .input-btn:hover, .input-btn:active, .input-btn.active, .input-btn.active:hover, .input-btn.active:focus{
     outline: 0;
     box-shadow: 0 0 0 0;
     background-color: transparent;
}
 .btn, .page-link{
     padding: 12px 28px;
     border-radius: 50px;
     box-shadow: 0 0 0 0;
     outline: 0;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 .btn-primary:hover{
     transform: translateY(-2px);
     box-shadow: 0 10px 20px -8px rgba(0, 160, 193, 0.5) !important;
}
 .btn-xl{
     padding: 15px 40px;
}
 .btn-sm{
     padding: .25rem .5rem;
     box-shadow: 0 0 0 0;
     outline: 0;
}
 .page-item.active .page-link{
     background-color: #18aaa6;
     border-color: #18aaa6;
     color: #2c464f;
}
 .btn-primary, .badge-primary, .dropdown-item.active, .dropdown-item:active, .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
     color: #fff;
     background-color: #18aaa6;
     box-shadow: 0 0 0 0;
     outline: 0;
     border-color: #18aaa6;
}
 .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary.focus, .btn-primary.disabled, .btn-primary:disabled, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-light.focus, .btn-light:focus{
     color: #18aaa6;
     border-color: #464848;
     outline: 0 !important;
     box-shadow: 0 0 0 0 !important;
     background-color: #464848;
}
 .select-scroll .dropdown-item.active:hover, .select-scroll .dropdown-item:active:hover{
     background-color: #18aaa6;
     color: #fff;
}
 .btn-active{
     background-color: #464848;
     color: #18aaa6;
}
 .btn-border{
     color: #464848;
     border: 1px solid #464848;
}
 .btn-border:hover{
     color: #fff;
     background-color:#464848;
}
 .btn-white{
     color: #464848;
     background-color: #fff;
}
 .btn-white:hover{
     color: #18aaa6;
     background-color: #464848;
}
 .btn-secondary{
     background-color: #464848;
     border-color: #464848;
}
 .btn-secondary:hover{
     background-color: #335763;
     border-color: #335763;
}
 .badge{
     border-radius: 0;
}
/* Pagination */
 .pagination {
     display: block;
}
 .pagination .page-link{
     color: #2c464f;
     outline: 0;
     box-shadow: 0 0 0 0;
}
 .pagination .page-item{
     margin-right: 7px;
     display: inline-block;
}
 .pagination-btn nav{
     display: inline-block;
}
/* Colors */
 .color-white{
     color: #fff;
}
 .color-secondary{
     color: #464848;
}
 .color-black{
     color: #222222;
}
 .color-primary{
     color: #18aaa6;
}
 .color-success{
     color: #6ac059;
}
 .color-info{
     color: #10aad6;
}
 .color-warning{
     color: #ebde4b;
}
 .color-danger{
     color: #eb5454;
}
/* Heading Border Bottom */
 .head-after{
     position: relative;
     display: inline-block;
}
 .head-after:before{
     content: "";
     position: absolute;
     background-color: #18aaa6;
     width: 25%;
     height: 2px;
     left: 0px;
     bottom: -10px;
}
/* Images */
 .img-bg{
     position: relative;
     margin-bottom: 1rem;
}
 .img-bg-1 img{
     width: auto;
     border-radius: 5px;
     border-bottom: 10px solid #2c464f;
}
 .img-bg-2 img{
     width: 320px;
     height: auto;
     position: absolute;
     left: 0;
     bottom: 0;
     border: 20px solid rgba(255, 255, 255, 1);
}
/* Icons */
 .social-icons a{
     background: #18aaa6;
     border-radius: 50%;
     margin: 0px auto;
     width: 38px;
     height: 38px;
     line-height: 36px;
     display: inline-block;
     text-align: center;
     color: #fff;
     display: inline-block;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     border: 1px solid transparent;
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 .social-icons a:hover{
     background-color: #464848;
     transform: translateY(-4px);
     box-shadow: 0 8px 16px -4px rgba(44, 70, 79, 0.4);
}
 .social-icons a:hover i{
     color: #fff;
}
/* Bg */
 .white-bg{
     background-color: #ffffff;
}
 .light-bg{
     background-color: #eeeeee;
}
 .primary-bg{
     background-color: #18aaa6;
}
 .secondary-bg{
     background-color: #464848;
}
/* Blockquote */
 blockquote{
     font-style: italic;
     border-left: 5px solid #18aaa6;
     padding: 10px 20px;
}
/* Card */
 .card{
     width: 100%;
     border-radius: 18px;
     padding: 30px;
     margin-bottom: 2rem;
     border: 10px solid transparent;
     display: inline-block;
     box-shadow: 0px 10px 30px 0px rgba(44, 70, 79, 0.08);
     transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
     -webkit-transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
     -moz-transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
     -o-transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 .card:hover, .card-active{
     border-bottom: 10px solid #18aaa6;
     box-shadow: 0px 20px 40px -5px rgba(44, 70, 79, 0.18);
     transform: translateY(-8px);
}
/* Form Control */
 ::placeholder{
     color: #666 !important;
}
 :-ms-input-placeholder{
     color: #666 !important;
}
 ::-ms-input-placeholder{
     color: #666 !important;
}
 .form-control, select, select.form-control:not([size]):not([multiple]){
     border-radius: 5px;
     padding: 12px 25px;
     height: auto;
     font-size: 14px;
     outline: 0 !important;
     box-shadow: 0 0 0 0 !important;
     border: 2px solid rgba(44, 70, 79, 0.2);
     color: #464848;
}
 .form-control:focus, .form-control:active{
     outline: 0;
     box-shadow: 0 0 0 0;
     border: 2px solid rgba(44, 70, 79, 0.2);
     border-bottom: 2px solid #18aaa6;
}
 .center-form{
     width: 50%;
     text-align: center;
     margin: 0px auto;
}
 .input-group-prepend{
     width: 100%;
}
 .input-group .input-group-prepend .btn{
     padding: 0px 25px;
     border-radius: 5px;
}
/* Theme Row */
 .t-row{
     margin-left: -15px;
     margin-right: -15px;
}
/* Border */
 .border-bottom-light{
     border-bottom: 1px solid #ddd;
}
/* Icons */
 .mdi-bg{
     font-size: 40px;
     background: #18aaa6;
     color: #fff;
     width: 60px;
     height: 60px;
     display: inline-block;
     line-height: 60px;
     text-align: center;
     transition:all 0.4s;
     -webkit-transition:all 0.4s;
     -moz-transition:all 0.4s;
     -o-transition:all 0.4s;
}
 .mdi-30px{
     font-size: 30px;
}
 .mdi-40px{
     font-size: 40px;
}
 .mdi-60px{
     font-size: 60px;
}
 .mdi-80px{
     font-size: 80px;
}
 .mdi-100px{
     font-size: 100px;
}
/* Collapse */
 .collapse-btn i{
     line-height: 22px;
     margin-right: 5px;
     color: #18aaa6;
}
 button[aria-expanded="true"] i:before{
     content: "\f374";
}
 .collapse-head{
     box-shadow: 0px 0px 20px 10px rgba(62, 62, 101, 0.1);
     margin-bottom: 1rem;
}
 .collapse-head p{
     margin-bottom: 0;
     padding: 15px 20px;
}
 .collapse-head button{
     color: #464848;
     background-color: #fff;
     width: 100%;
     display: inline-flex;
     padding: 16px 20px;
}
 .collapse-head button:hover{
     cursor: pointer;
}
 button[aria-expanded="true"]{
     background-color: #464848;
     color: #fff;
}
/**========================= END COMMON =========================**/
/**========================= START PAGES =========================**/
 .page-not-found h1{
     font-size: 200px;
     margin-bottom: 40px;
}
 .page-not-found i{
     font-size: 60px;
     line-height: 0;
     position: relative;
     top: 11px;
}
/* coming soon */
 .coming-soon-bg{
     background-image: url(../images/img-1.jpg);
     background-attachment: fixed;
     background-size: cover;
}
 .coming-soon-content{
     position: absolute;
     margin: 0px auto;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
}
 .time-bg{
     font-size: 60px;
     text-align: center;
     margin: 0px auto;
     width: 100%;
     position: relative;
}
 #time span{
     text-transform: uppercase;
     text-align: center;
     padding: 10px 20px;
     margin: 7px;
     font-family: 'Roboto', sans-serif;
     font-weight: 900;
     border: 5px solid #18aaa6;
}
 .coming-soon-content .btn:hover{
     color: #fff;
}
/**========================= END PAGES =========================**/
/**========================= START TOP HEADER =========================**/
 #top-header{
     padding: 10px 0px;
     position: relative;
}
 #top-header:after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 2px;
     background: linear-gradient(90deg, #18aaa6, rgba(0,160,193,0));
}
 .t-left-side{
     float: left;
}
 .t-right-side{
     float: right;
}
 #top-header ul{
     margin: 0px;
     padding: 0px;
     display: inline-block;
}
 #top-header li{
     display: inline-block;
     margin: 0px;
     padding: 0px;
}
 #top-header .t-left-side li{
     margin-right: 25px;
     position: relative;
}
 #top-header .t-left-side li a{
     color:#fff;
}
 #top-header.secondary-bg .t-left-side li{
     color: #fff;
}
 #top-header .t-left-side li:after{
     content: "";
     position: absolute;
     top: 0px;
     left: -14px;
     background-color: #464848;
     width: 1px;
     height: 20px;
}
 #top-header.secondary-bg .t-left-side li:after{
     background-color: #18aaa6;
}
 #top-header .t-left-side li:first-child:after{
     display: none;
}
 #top-header .t-left-side i{
     color: #18aaa6;
     line-height: 0;
     position: relative;
     top: 3px;
}
/**========================= END TOP HEADER =========================**/
/**========================= START HEADER =========================**/
 #header{
     margin: 0px;
     padding: 0px 0px;
     background: #fff;
     box-shadow: 0 8px 30px -10px rgba(44, 70, 79, 0.15);
     height: 96px;
     transition: box-shadow 0.3s ease;
}
 .header-fixed{
     position: fixed;
     top: 0;
     z-index: 999;
     background-color: #fff;
     width: 100%;
     /* 2026-07 guncelleme #2: navbar artik sadece slider bittikten sonra tek seferlik belirdigi icin
        (once oldugu gibi kucuk bir esikte tekrar tekrar degil) suresi biraz uzatildi (0.35s -> 0.45s),
        boylece "cok hizli olmadan" yumusak bir sekilde beliriyor. */
     animation: 0.45s menuFix;
     -webkit-animation: 0.45s menuFix;
     -o-animation: 0.45s menuFix;
     -moz-animation: 0.45s menuFix;
}
/* Navbar sabitlenince altta bosluk kalan yer tutucu (2026-07 duzeltme) - JS ile yuksekligi ayarlanir.
   Not: burada bilerek "transition" kullanilmiyor; yukseklik JS tarafindan navbar ile TAM AYNI ANDA
   (animasyonsuz) veriliyor, yoksa bosluk yavas yavas acilirken icerik yine kayiyormus gibi gorunuyordu.
   Navbar'in kendi 0.45s'lik giris animasyonu (menuFix) zaten sadece navbar'in kendi gorunumunu
   etkiliyor, sayfanin geri kalanini hic kaydirmiyor. */
 #header-spacer{
     height: 0;
}
 .logo{
     text-align: left;
}
 #header .navbar{
     padding: 0px;
}
 #header .navbar-brand{
     font-size: 30px;
}
 #header .navbar-brand span{
     color: #18aaa6;
}
 #header .nav-item{
     position: relative;
}
 #header .nav-item i.navhome-icon{
     line-height: 0px;
     position: relative;
     top: 3px;
}
 #header .nav-item .btn:hover{
     color: #fff;
}
 #header .nav-link{
     margin: 29px 2px;
     letter-spacing: 0.2px;
     font-weight: 600;
     /* 2026-07-30 duzeltme (round38): kullanici navbar metinlerinin biraz kucuk/sik olmasini
        istedi (16px -> 14px), boylece sol/sag menu + telefon butonu ortadaki logoyla daha
        rahat bir arada duruyor. */
     font-size: 14px;
     position: relative;
}
 /* Not: alt cizgi animasyonu ::before'a tasindi. Onceden buradaki ::after kuralı, Bootstrap'in dropdown ok isaretini (.dropdown-toggle::after) aynı <a> elemani uzerinde ezip ok isaretini kayboluyordu; bu yuzden ::after'e artik hic dokunmuyoruz, sadece ::before kullaniyoruz (2026-07 duzeltme) */
 #header .nav-link:before{
     content: "";
     position: absolute;
     left: 0;
     bottom: -6px;
     width: 0%;
     height: 2px;
     background-color: #18aaa6;
     transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 #header .nav-link:hover:before{
     width: 100%;
}
 #header .dropdown-menu{
     margin: 0px;
     padding: 8px;
     border-radius: 14px;
     border: none;
     background-color: #fff;
     font-size: 14px;
     min-width: 14rem;
     box-shadow: 0 20px 45px -12px rgba(44, 70, 79, 0.25);
}
 #header .dropdown-menu .dropdown-item{
     padding: 11px 18px;
     color: #464848;
     border-radius: 8px;
     transition: all 0.25s ease;
}
 #header .dropdown.active .dropdown-menu .dropdown-item{
     border-bottom: 0;
}
 #header .dropdown-menu .dropdown-item:hover, #header .dropdown.active .dropdown-menu .dropdown-item:hover{
     background-color: rgba(0, 160, 193, 0.12);
     color: #18aaa6;
     border-bottom: 0px;
     padding-left: 24px;
}
 #header .dropdown.active .dropdown-menu a{
     color: #464848;
}
 #header .dropdown.active .dropdown-menu .dropdown-item.active{
     background-color: #18aaa6;
     color: #464848;
}
 .menu-btn{
     margin: 22px 0px 22px 20px;
}
 .dropdown-toggle::after {
     border-top: .2em solid;
     border-right: .2em solid transparent;
     border-bottom: 0;
     border-left: .2em solid transparent;
}
 #header .navbar-toggler{
     border-radius: 10px;
     background-color: #18aaa6;
     outline: 0;
     border: 0;
     padding: 12px;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
}
 #header .navbar-toggler:hover{
     transform: scale(1.06);
     box-shadow: 0 6px 16px -4px rgba(0, 160, 193, 0.5);
}
 #header .navbar-toggler i{
     color: #464848;
}
 #header .navbar-toggler[aria-expanded="true"] i:before{
     content: "\f156";
}
/* Multilevel Dropdown */
 .dropdown-submenu{
     position: relative;
}
 .dropdown-submenu>.dropdown-menu{
     top: 0;
     left: auto;
     right: 100%;
}
 .dropdown-submenu:hover>.dropdown-menu{
     display: block;
}
 .dropdown-submenu>a:after{
     display: block;
     content: "";
     float: right;
     width: 0;
     height: 0;
     border-color: transparent;
     border-style: solid;
     border-width: 5px 0 5px 5px;
     border-left-color: #464848;
     margin-top: 5px;
     margin-right: -10px;
}
 #header .multi-level .dropdown-menu .dropdown-item{
     padding-left: 30px;
}
/**========================= END HEADER =========================**/
/**========================= START SLIDER =========================**/
 #main-slider{
     background-color: #eee;
     position: relative;
}
 /* 2026-07-30 (round52): kullanicinin istegiyle nokta gostergeleri kaldirilip sayili (01/02/...)
    dikey bir gosterge ile degistirildi, sag/sol oklar (asagida kaldirildi, bkz. bu blogun sonu)
    tamamen silindi. Bootstrap'in varsayilan ".carousel-indicators li" stili (kalin/kisa yatay
    bar + "text-indent:-999px" ile metni ekran disina gizleme) burada tamamen ezildi ki "01"/"02"
    gibi GERCEK metin gorunebilsin. */
 #main-slider .carousel-indicators{
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     position: absolute;
     left: auto;
     right: 40px;
     top: 50%;
     bottom: auto;
     transform: translateY(-50%);
     width: auto;
     margin: 0;
     z-index: 5;
}
 /* round89 DUZELTME: kullanici, slider (hero) uzerindeki metin/sayi renklerinin acik
   (light) temaya gecince DEGISMEMESI gerektigini belirtti - bu icerik bir FOTOGRAFIN
   UZERINDE durdugu icin sayfa temasindan BAGIMSIZ olmali. Kok neden: asagidaki renk(ler)
   'var(--nh-muted)'/'var(--nh-fg)'/'var(--nh-border)' gibi TEMAYA GORE DEGISEN degiskenler
   kullaniyordu (bkz. 'DARK/LIGHT TEMA SWITCH' bolumu) - light modda bu degiskenler ACIK
   renklere donuyor, foto uzerindeki yazi/sayi neredeyse gorunmez hale gelebiliyordu. Cozum:
   bu deger(ler) koyu (dark) temadaki MEVCUT/DOGRU gorunumune SABIT (hardcoded) hex renk
   olarak kilitlendi - artik data-theme="light" olsa da hic degismiyor. */
#main-slider .carousel-indicators li{
     width: auto;
     height: auto;
     margin: 0;
     padding-top: 14px;
     border: none;
     background-color: transparent;
     text-indent: 0;
     opacity: 1;
     position: relative;
     font-family: 'Sora', sans-serif;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1px;
     color: #9aa1a1; /* round89: sabit - artik temaya gore degismiyor */
     cursor: pointer;
     transition: color 0.3s ease;
}
 #main-slider .carousel-indicators li:before{
     content: "";
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 14px;
     height: 2px;
     background-color: #333737; /* round89: sabit - artik temaya gore degismiyor */
     transition: all 0.3s ease;
}
 #main-slider .carousel-indicators li.active{
     color: #fff;
}
 #main-slider .carousel-indicators li.active:before{
     width: 22px;
     background-color: #18aaa6;
}
 @media (max-width: 767.98px){
	 #main-slider .carousel-indicators{
		 right: 16px;
		 gap: 12px;
	 }
	 #main-slider .carousel-indicators li{
		 font-size: 11px;
	 }
 }
 #main-slider .carousel-item{
     background: no-repeat center center scroll;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
}
 /* 2026-07-30 (round53): kullanicinin istegiyle slaytlar arasi gecis "sagdan sola kayma"
    yerine yumusak bir "crossfade" (capraz solma) yapiyor. Kok neden bulundu: HTML'de
    (anasayfa.php) carousel'in kendisinde zaten Bootstrap'in ".carousel-fade" sinifi VARDI,
    ama CANLI SITEDEKI "bootstrap.min.css" dosyasinda bu sinifin CSS karsiligi hic yoktu
    (muhtemelen bir "kullanilmayan CSS'i temizleme" araci, bu sinif markup'a eklenmeden
    ONCE calisip yanlislikla silmis) - yani sinif isim olarak vardi ama hicbir etkisi
    olmuyordu, carousel Bootstrap'in varsayilan "kaydirma" (transform/slide) davranisina
    geri duesuyordu. "bootstrap.min.css" duzenleme alanimizin disinda oldugu icin, ayni
    ".carousel-fade" davranisi burada (style.php) manuel olarak yeniden tanimlandi.
    2026-07-30 DUZELTME (round54, ARTIK GECERLI DEGIL): round53'teki "hafif kararma"
    begenilmeyince gecici olarak bir "blackout" (tam siyaha kesme) denenmisti.
    2026-07-30 DUZELTME (round55, SON HALI): kullanici referans site olarak kendi
    hazirlattigi Next.js/Tailwind tasarimin canli (Vercel) adresini verdi ve "orada slider
    gecisi nasilsa aynisini yap" dedi. O sitenin DOM'u/CSS'i Chrome ile dogrudan incelendi
    - gercek mekanizma cok basit cikti: iki gorsel ust uste (absolute) duruyor, sadece
    "transition-opacity duration-1000 ease-out" ile (yani opacity 0 <-> 1, 1 saniye, "ease-
    out" zamanlama) capraz solunuyor - HICBIR karartma/blackout katmani YOK. Bu yuzden
    round54'teki blackout katmani (asagida gorulen ".nh-slide-dim"/"#main-slider:after")
    TAMAMEN kaldirildi, gecis referanstaki gibi duz/sade bir 1 saniyelik crossfade'e
    cevrildi (asagida). JS tarafindaki ilgili event-baglama kodu da (bkz.
    assets/js/common-script.js) ayni sekilde kaldirildi. */
 /* 2026-07-30 DUZELTME (round56): kullanici round55'i "hic animasyon yok gibi, resim aniden
    degisiyor" diye bildirdi - kok neden bulundu. Asagidaki temel (".carousel-item") kuralinda
    "opacity" hic tanimlanmamisti; tarayici varsayilani (1, tam gorunur) gecerli kaliyordu.
    Gelen slayt zaten (bootstrap.js'in ekledigi ".carousel-item-next"/"-prev" sinifiyla)
    baştan beri opacity:1 oldugu icin, ".active"/"-left"/"-right" kombinasyon sinifi eklendiginde
    opacity DEGERI HIC DEGISMIYORDU (1'den 1'e) - CSS transition sadece bir DEGER degisince
    calisir, bu yuzden hicbir yumusak gecis olmuyor, resim oldugu gibi ANINDA ustte beliriyordu.
    Simdi taban kural acikca "opacity:0" ile basliyor (gercek Bootstrap ".carousel-fade"
    davranisiyla ve referans siteninkiyle birebir ayni) - artik 0'dan 1'e gercek bir yumusak
    solma (fade-in) oluyor. */
 #main-slider .carousel-item{
     opacity: 0;
     transition: opacity 1s ease-out;
     transform: none !important;
}
 #main-slider .carousel-item.active,
 #main-slider .carousel-item-next.carousel-item-left,
 #main-slider .carousel-item-prev.carousel-item-right{
     z-index: 1;
     opacity: 1;
}
 /* 2026-07-30 DUZELTME (round59): kullanici "gecisin bitimine dogru ufak bir koyu olup tekrar
    aciliyor" dedi - kok neden bulundu: "#main-slider" kutusunun kendi arka plan rengi KOYU
    (--nh-dark: #141616, !important). Eskiden cikan (outgoing) slayt, kendi "opacity:0" degerine
    "0sn sure + 1sn gecikme" ile ANI bir sekilde geciyordu - bu, giren (incoming) slaytin KENDI
    AYRI 1sn'lik "ease-out" solmasindan BAGIMSIZ, ayri bir transition'di. Tarayici bu iki BAGIMSIZ
    ve farkli turden (biri ani/gecikmeli "snap", digeri yumusak "ease-out") gecisi frame-frame
    birebir senkronize garantilemez - cikan slaytin ani "kaybolma" karesi, giren slaytin tam
    opaklige (opacity:1) ulasmasindan bir-iki kare ONCE gerceklesebiliyordu; o kisacik anda HICBIR
    slayt tam kapatmadigi icin altta #main-slider'in koyu arka plan rengi bir-iki kare gorunup
    hemen ardindan giren slayt tam opaklasinca tekrar kapaniyordu - kullanicinin gordugu "ufak
    koyulasip tekrar acilma" tam olarak buydu. COZUM: cikan slaytin kendi opacity'sini artik HIC
    ayri bir transition ile degistirmiyoruz - sadece "z-index:0" ile girenin (z-index:1) ARKASINA
    aliniyor ve gecis boyunca opacity:1 (yani ".active" kuralindan miras) olarak SABIT kalıyor,
    boylece hicbir senkronizasyon riski kalmiyor. Cikan slaytin gercek opaklik-sifirlanma/temizligi,
    bootstrap.js gecis bittikten SONRA ("transitionend") ilgili siniflari kaldirdiginda, taban
    kurala (satir ~858, kendi 1sn'lik yumusak solmasiyla) donerek kendiliginden olur - bu asama
    zaten giren slayt tamamen opak/kapatici oldugu icin HER ZAMAN tamamen gizli kalir, gorunur bir
    etkisi olmaz. */
 #main-slider .active.carousel-item-left,
 #main-slider .active.carousel-item-right{
     z-index: 0;
}
 /* 2026-07-30 DUZELTME (round58): round57'deki "sirali gecikmeli fade" yaklasimi kullanici
    tarafindan reddedildi - referans site (vercel mockup) tekrar canli incelendi ve GERCEK
    mekanizmasi ORAYA BIREBIR UYGUN sekilde yeniden yazildi. Referans sitede yazi bir
    React bilesenidir; slayt degisince ESKI yazi DOM'dan aninda SOKULUYOR (hic solma/exit
    animasyonu YOK, aninda kayboluyor) ve YENI yazi SIFIRDAN, kendi bagimsiz "animate-in
    fade-in slide-in-from-bottom-4 duration-700 ease" girisini oynatiyor (opacity 0->1 +
    translateY 16px->0, 0.7sn, ease). Bu giris, resmin kendi 1sn'lik capraz solmasiyla (yukarida)
    AYNI ANDA (t=0'da, gecikmesiz) baslar - referansta da resim ve yazi gecisleri es zamanli.
    Asagida bootstrap'in iki-fazli class-degisim mekanizmasi kullaniliyor:
    1) once ".carousel-item-next"/".carousel-item-prev" TEK BASINA eklenir (henuz "-left"/"-right"
       yok) - bu "baslangic" karesidir, transition:none ile ani/hazir hale getirilir.
    2) sonraki frame'de "-left"/"-right" eklenince gercek 0.7sn'lik giris animasyonu tetiklenir.
    Eski (cikan) yazi ise ".active.carousel-item-left/-right" oldugu anda transition:none ile
    ANINDA (0sn) gorunmez olur - referanstaki "DOM'dan aninda sokulma" davranisinin CSS karsiligi. */
 #main-slider .carousel-caption{
     opacity: 0;
     transform: translateY(16px);
     transition: none;
}
 #main-slider .carousel-item.active .carousel-caption{
     opacity: 1;
     transform: translateY(0);
}
 /* Cikan (eski) yazi: gecis baslar baslamaz, hicbir solma/kayma olmadan ANINDA kaybolur. */
 #main-slider .carousel-item.active.carousel-item-left .carousel-caption,
 #main-slider .carousel-item.active.carousel-item-right .carousel-caption{
     opacity: 0;
     transform: translateY(0);
     transition: none;
}
 /* Giren (yeni) yazinin "baslangic karesi" - henuz animasyon tetiklenmeden once hazir bekler. */
 #main-slider .carousel-item-next .carousel-caption,
 #main-slider .carousel-item-prev .carousel-caption{
     opacity: 0;
     transform: translateY(16px);
     transition: none;
}
 /* Giren (yeni) yazi: resimle AYNI ANDA baslayan, bagimsiz 0.7sn'lik "ease" giris animasyonu
    (opacity 0->1 + translateY 16px->0) - referans siteyle birebir ayni sure/egri/mesafe. */
 #main-slider .carousel-item-next.carousel-item-left .carousel-caption,
 #main-slider .carousel-item-prev.carousel-item-right .carousel-caption{
     opacity: 1;
     transform: translateY(0);
     transition: opacity 0.7s ease, transform 0.7s ease;
}
 #main-slider .carousel-item:before{
     content: "";
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     position: absolute;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(180deg, rgba(15, 30, 34, 0.55) 0%, rgba(15, 30, 34, 0.35) 45%, rgba(15, 30, 34, 0.75) 100%);
     opacity: 1;
}
 #carouselExampleIndicators h5, #carouselExampleIndicators h3, #carouselExampleIndicators p{
     color: #fff;
}
 #carouselExampleIndicators p{
     font-size: 20px;
     font-weight:300;
}
 #carouselExampleIndicators h3{
     font-size: 62px;
     font-weight: 800;
     letter-spacing: -0.5px;
     text-shadow: 0 4px 25px rgba(0,0,0,0.35);
     color: #fff;
}
 #carouselExampleIndicators h5{
     margin-bottom: 1.5rem;
}
 #carouselExampleIndicators .carousel-item{
     height: 700px;
     background-position: top;
}
 #carouselExampleIndicators .carousel-caption{
     width: 40%;
     position: absolute;
     left: 50%;
     top: 46%;
     transform: translate(-50%, -50%);
     margin: 0px auto;
}
 #carouselExampleIndicators .carousel-caption .container{
     animation: 1s bcktop;
     -webkit-animation: 1s bcktop;
     -o-animation: 1s bcktop;
     -moz-animation: 1s bcktop;
}
 #carouselExampleIndicators .carousel-caption .btn{
     margin: 3px;
}
/* 2026-07-30 (round52): eskiden burada sag/sol ok butonlarinin (.carousel-control-prev/next)
   ve eski yatay nokta gostergesinin (.carousel-indicators, ikinci/eski tanim) stilleri vardi -
   oklar HTML'den (anasayfa.php) tamamen kaldirildigi ve gostergeler artik yukarida ("START
   SLIDER" bolumunun basinda) yeni dikey sayili tasarimla tanimlandigi icin hepsi silindi. */
/**========================= END SLIDER =========================**/
/**========================= START BREADCRUMB =========================**/
 #breadcrumb{
     /* 2026-07-30 DUZELTME (round71): "margin-top:20px" navbarin ALTINDA, bu kutunun DISINDA
        kalan bir bosluk yaratiyordu - sayfanin (<body>) kendi arka plani hala varsayilan BEYAZ
        oldugu icin bu 20px'lik bosluk, koyu navbar ile koyu breadcrumb arasinda ince BEYAZ bir
        cizgi/serit olarak goruluyordu. Ayni gorsel araligi KORUMAK icin bu deger ust padding'e
        (5px -> 25px, yani +20px) TASINDI ve margin-top KALDIRILDI - artik bu bosluk, breadcrumb
        kutusunun KENDI koyu zemininin icinde, disariya beyaz sizdirmadan olusuyor. */
     padding: 25px 0px 25px 0px;
     position: relative;
     z-index: 1;
     text-align: center;
     /* kullanicinin "ic sayfalari da anasayfa gibi koyu temaya gecirelim" talebi uzerine - eskiden
        beyaz-agirlikli bir gradyan (linear-gradient(white, renk3)) kullaniliyordu, bu da bu bolumu
        (ve dolayisiyla ustune acilan navbar dropdown menulerini) sitenin geri kalanindan kopuk/
        beyaz gosteriyordu. Artik diger butun koyu bolumlerle tutarli, duz koyu zemin
        (var(--nh-bg)) kullaniyor. */
     background-color: var(--nh-bg);
}
 #breadcrumb h1{
     color: var(--nh-fg);
     font-weight: 600;
}
 #breadcrumb ol{
     margin-bottom: 0;
}
 #breadcrumb li{
     display: inline-block;
     font-size: 15px;
}
 #breadcrumb li a{
     color: #18aaa6;
     font-size: 100%;
}
 #breadcrumb li a:hover{
     color: var(--nh-fg);
}
 #breadcrumb li.active a, #breadcrumb li.active{
     color: var(--nh-muted);
}
/**========================= END BREADCRUMB =========================**/
/**========================= START WHAT WE DO =========================**/
 #packages{
     padding: 80px 0px 60px;
}
 #packages .card ul{
     min-height: 400px;
}
 #packages .card:hover, #packages .card.active{
     margin-top: -10px;
     border-bottom: 10px solid #18aaa6;
     box-shadow: 0px 0px 20px 10px rgba(62, 62, 101, 0.1);
}
 #packages li{
     line-height: 30px;
}
 #packages ul li i{
     position: relative;
     top: 1px;
     color: #2e9a13;
}
 #packages .card-price-1 h2 i{
     position: relative;
     left: 5px;
     font-size: 26px;
}
 #packages .btn.card-price-1{
     margin-bottom: 1rem;
}
 #packages .btn.card-price-1 h2{
     margin-bottom: 0;
	 color:#fff;
}
 #packages .btn.card-price-1:hover h2{
     color: #18aaa6;
}
 #packages .card-price-1 h2 span{
     font-size: 14px;
}
/**========================= END WHAT WE DO =========================**/
/**========================= START WHAT WE DO =========================**/
 #what-we-do{
     /* 2026-07 guncelleme: bu kutular -80px negatif ust bosluk ile bir onceki hero/slider
        fotografinin ALT KISMININ UZERINE tasip biniyordu - kartlarin kenarlari fotografin
        koyu/degisken renkleriyle karisip "kesik" ve dusuk kontrastli bir gorunum
        yaratiyordu (2026 tasarim analizinde tespit edilen bir sorun). Negatif bosluk
        kaldirilarak kartlar artik hero'nun hemen altinda, duz beyaz zeminde, temiz bir
        sekilde basliyor. */
     margin-top: 0px;
     padding: 80px 0px 0px;
}
 #what-we-do .card{
     text-align: center;
     margin-bottom: 0;
}
 #what-we-do .card:hover, #what-we-do .card.active{
     margin-top: -10px;
     border-bottom: 10px solid #18aaa6;
     box-shadow: 0px 0px 20px 10px rgba(62, 62, 101, 0.1);
}
 #what-we-do .card i{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 90px;
     height: 90px;
     border-radius: 50%;
     background-color: rgba(0, 160, 193, 0.1);
     color: #18aaa6 !important;
     font-size: 34px !important;
     transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 #what-we-do .card:hover i{
     background-color: #18aaa6;
     color: #fff !important;
     transform: rotate(-8deg) scale(1.08);
}
/**========================= END WHAT WE DO =========================**/
/**========================= START WHO WE ARE =========================**/
 #who-we-are{
     padding: 80px 0px 75px;
}
 #who-we-are .video-btn{
     position: relative;
}
 #who-we-are small{
     font-size: 100%;
}
 /* 2026-07-30 (round41): eski kural "left:50%; right:0px;" ile butonu yatayda ortalamaya
    CALISIYORDU ama bu aslinda butonu yatay-ortadan sag-kenara kadar GERIYORDU (buton
    Bootstrap'in "btn btn-lg" sinifiyla dikdortgen/hap seklindeydi, metin "text-align:center"
    ile bu gerilmis alan icinde ortalaniyordu) - hem tam ortada durmuyordu hem de daire
    degil, yuvarlatilmis dikdortgendi. Kullanici "resmin tam ortasina al, daire yap" istedi:
    simdi gercek "position:absolute + transform:translate(-50%,-50%)" ile hem yatay hem
    dikey olarak resmin (video-btn kutusunun) tam merkezine sabitleniyor, sabit
    genislik/yukseklik + border-radius:50% ile gercek bir daire oluyor, ikon flex ile
    kutunun icinde ortalaniyor. */
 /* 2026-07-30 (round46): kullanici butonu "biraz daha buyut, asiri degil" istedi - 74px'ten
    88px'e cikarildi (asiri buyumesin diye olculu bir artis). */
 #who-we-are .pulse button{
     position: absolute;
     left: 50%;
     top: 50%;
     right: auto;
     transform: translate(-50%, -50%);
     margin: 0;
     z-index: 9;
     width: 88px;
     height: 88px;
     padding: 0;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
}
 /* 2026-07-30 (round46): "play" ikonunun ucgen sekli, Font Awesome'in kendi glif kutusu
    icinde tam ortada degil - sol tarafta bosluk, sag tarafta daha az bosluk birakiyor
    (bu yuzden flex ile kutuyu tam ortalasak bile ucgen goze gorunur sekilde sola kaymis
    duruyordu). Ikona kucuk bir sag kaydirma uygulanarak GORSEL olarak tam merkeze
    getirildi. */
 #who-we-are .pulse button i{
     transform: translateX(2px);
     font-size: 30px;
}
 #who-we-are .pulse button:before{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     /* 2026-07-30 (round41): pulse halkasi (box-shadow ripple, bkz. animation.css
        "pulse_animation") artik butonun kendisiyle AYNI sekilde (daire) - eskiden 5px
        (kose yuvarlatilmis dikdortgen) oldugu icin daire butonun etrafinda kose gorunumlu
        garip bir dalga olusturuyordu. */
     border-radius: 50%;
     animation: pulse_animation 2s infinite;
     -webkit-animation: pulse_animation 2s infinite;
     -moz-animation: pulse_animation 2s infinite;
     z-index: -1;
}
 #who-we-are .card-active h4{
     font-size: 17px;
     font-weight: 700;
     color: #464848;
}
 #who-we-are .card-active p{
     font-size: 15px;
     font-weight: 500;
     color: #4a4a4a;
}
 #who-we-are .card-active i{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background-color: rgba(0, 160, 193, 0.1);
     color: #18aaa6 !important;
     font-size: 22px !important;
}
 #who-we-are .modal-content{
     border-radius: 5px;
}
/* 2026-07 guncelleme: "Adres / Telefon / E-Posta" kart siRasi (anasayfada "Hakkimizda"
   bolumunun hemen ustunde) footer'daki "ILETISIM BILGILERI" bolumuyle BIREBIR ayni
   bilgiyi tekrar ediyordu - 2026 tasarim analizinde gereksiz tekrar olarak tespit edildi.
   anasayfa.php dosyasina dokunmadan (admin panelindeki "alan6" ayari boylece korunuyor,
   istenirse ileride tekrar acilabilir), sadece anasayfada gorunmesini engelliyoruz -
   ":has(.fa-map-marker-alt)" ile SADECE bu ozel kart sirasini hedefliyoruz. */
 #who-we-are > .container > .row > .col-lg-12.mb-4:has(.fa-map-marker-alt){
     display: none;
}
/**========================= END WHO WE ARE =========================**/
/**========================= START COUNTER =========================**/
 #counter{
     padding: 80px 0px 90px;
     text-align: center;
}
 .counter-bg{
     position: relative;
     background-image: url(../../uploads/arkaplan/arkaplan2/slider3.jpg);
     background-repeat: no-repeat;
     background-size: cover;
	 background-position:center;
     z-index: 9;
}
 .counter-bg:after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: rgba(44, 70, 79, 0.5);
     z-index: -1;
}
 #counter .counter-col{
     position: relative;
}
 #counter .counter-col:after{
     content: "";
     position: absolute;
     right: 0px;
     bottom: 0px;
     top: 0px;
     width: 1px;
     height: 100%;
     background-color: rgba(255, 255, 255, 1);
}
 #counter .counter-col:last-child:after{
     display: none;
}
 #counter .counter-col i{
     transition: transform 0.3s ease;
}
 #counter .counter-col:hover i{
     transform: scale(1.15);
}
 #counter .timer{
     font-weight: 900;
     font-size: 2.5rem;
     color: #fff;
     margin-left: 10px;
     display: inline-block;
}
 #counter h4{
     margin-bottom: 0;
     color: #fff;
}
 #counter .counter-img{
     text-align: left;
}
 #counter .counter-img img{
     position: absolute;
     left: 70px;
     /* 2026-07-30 duzeltme (round41): "-90px" fotografi bolumun kendi alt kenarinin 90px
        ALTINA itiyordu (kismen kesilmis/kopuk gorunuyordu) - kullanici "tam alt kısma
        sabitle" dedi, yani fotograf #counter'in kendi alt kenariyla hizali olmali. */
     bottom: 0px;
     width: 160px;
}
/**========================= END COUNTER =========================**/
/**========================= START PROVIDING =========================**/
 #providing{
     padding: 80px 0px 60px;
     text-align: center;
}
/* Hizmet Alanlarimiz kutularini esit boyuta zorla + ikonlara "teslimat kutusu" (#what-we-do) ile ayni hover animasyonunu ver (2026-07 guncelleme) */
/* 2026-07 duzeltme #2: .row Bootstrap 4'te display:flex + flex-wrap:wrap; bu durumda alt
   satira gecen kartlarin kendi margin-bottom degeri (2rem) ust kutunun (.col-lg-4) kendi
   kutusunu genisletmiyor (flex item + child margin, parent'a yansimiyor) - bu yuzden 1.
   satirla 2. satir arasinda hic bosluk kalmiyordu. row-gap ile bosluk artik .row'un
   kendisinden (flex satirlari arasi bosluk olarak) veriliyor, cocuk margin'ine bagli degil. */
 #providing .row{
     align-items: stretch;
     row-gap: 2rem;
}
 #providing .card{
     height: 100%;
     display: flex;
}
 #providing .card > a{
     display: flex;
     flex-direction: column;
     width: 100%;
     color: inherit;
}
 #providing .card > a > div{
     display: flex;
     flex-direction: column;
     flex: 1;
     width: 100%;
}
 #providing .card i{
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 130px;
     height: 130px;
     border-radius: 50%;
     background-color: rgba(0, 160, 193, 0.1);
     color: #18aaa6 !important;
     transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 #providing .card:hover i{
     background-color: #18aaa6;
     color: #fff !important;
     transform: rotate(-8deg) scale(1.08);
}
/**========================= END PROVIDING =========================**/
/**========================= START PROJECTS =========================**/
 #projects{
     padding: 80px 0px 85px;
}
 #projects.projects-bg{
     position: relative;
     background-image: url(../../uploads/arkaplan/arkaplan4/slider2.jpg);
     background-repeat: no-repeat;
     background-size: cover;
	 background-position: center;
     z-index: 9;
}
 #projects.projects-bg:after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: rgba(44, 70, 79, 0.7);
     z-index: -1;
}
 #projects.projects-bg h1{
     color: #fff;
}
 #projects .slick-prev, #projects .slick-next{
     right: 12px;
}
 .project-grid{
     padding: 60px 0px 60px;
}
 .project-single{
     position: absolute;
     bottom: 0;
     right: 0;
     left: 0;
     width: 50%;
}
 .project-single li{
     line-height: 36px;
}
 .project-single i{
     position: relative;
     top: 2px;
     right: 6px;
     font-size: 20px;
     line-height: 0;
}
 .project-single i:before{
     width: 10px;
     height: 0px;
}
/* Filter */
 .filters-group{
     text-align: center;
}
 .filters-group li{
     display: inline-block;
     background: #18aaa6;
     color: #fff;
     margin-bottom: 5px;
}
 .filters-group .btn-active{
     background-color: #464848;
     color: #fff;
}
 .filter-content a{
     font-size: 100%;
}
 .isotope-item{
     z-index: 2;
}
 .isotope-hidden.isotope-item{
     pointer-events: none;
     z-index: 1;
}
 .isotope, .isotope .isotope-item{
     -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
     transition-duration: 0.8s;
}
 .isotope{
     -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
     transition-property: height, width;
}
 .isotope .isotope-item{
     -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property: -moz-transform, opacity;
     transition-property: transform, opacity;
}
/* Grid */
 /* Son Projelerimiz - modern hover (2026-07 guncelleme) */
 .grid{
     position: relative;
     margin: 0 auto;
     list-style: none;
     width: 100%;
     box-sizing: border-box;
}
 .grid .grid-effect{
     position: relative;
     float: left;
     /* width:100% + box-sizing:border-box: float:left + width tanimsizken tarayici "shrink-to-fit" genislik hesabına giriyor, bu da icindeki img'in width:100% kuralıyla dairesel bir bagimlilik olusturup kart genisliklerinin resme gore farkli cikmasina (ör. 334px/263px/197px) sebep oluyordu. Sabit width:100% ile kartlar artik Slick'in ayirdigi slot genisligini birebir dolduruyor ve hepsi esit boyutta (2026-07 duzeltme) */
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     text-align: left;
     border-radius: 16px;
     background: #464848;
     box-shadow: 0 10px 25px -8px rgba(44, 70, 79, 0.25);
     transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 .grid .grid-effect:hover{
     transform: translateY(-6px);
     box-shadow: 0 22px 40px -10px rgba(44, 70, 79, 0.4);
}
 .grid .grid-effect img{
     position: relative;
     display: block;
     object-fit: cover;
     height: 350px;
     width: 100%;
     transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}
 .grid .grid-effect:hover img{
     transform: scale(1.09);
}
 .grid .grid-effect .p-grid-content{
     padding: 1.75em;
     color: #fff;
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: auto;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     background-image: linear-gradient(180deg, rgba(15, 30, 34, 0) 0%, rgba(15, 30, 34, 0.15) 40%, rgba(15, 30, 34, 0.88) 100%);
     opacity: 0;
     transform: translateY(14px);
     transition: opacity 0.4s ease, transform 0.4s ease;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
}
 .grid .grid-effect:hover .p-grid-content{
     opacity: 1;
     transform: translateY(0);
}
 .grid .grid-effect h2{
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 6px;
}
 .grid .grid-effect p{
     padding: 0;
     font-size: 14px;
     text-transform: none;
     opacity: 0.9;
     margin-bottom: 0;
}
/* Ana sayfa projeleri:
   masaüstü max 6, mobilde ilk 3 proje */
@media (max-width: 767.98px){

    #projects .project-card-grid .project-card:nth-child(n+4){
        display: none;
    }

}
/**========================= END PROJECTS =========================**/
/**========================= START NEW PROJECT =========================**/
 #new-project{
     padding: 60px 0px;
}
 #new-project.new-project-bg{
     position: relative;
     background-image: url(../../uploads/arkaplan/arkaplan6/critical-alerting-background.jpg);
     background-repeat: no-repeat;
     background-size: cover;
	 background-position: center;
     z-index: 9;
}
 #new-project.new-project-bg:after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: rgba(44, 70, 79, 0.5);
     z-index: -1;
}
 #new-project.new-project-bg h1, #new-project.new-project-bg h2, #new-project.new-project-bg p{
     color: #fff;
}
/**========================= END NEW PROJECT =========================**/
/**========================= START WORKERS =========================**/
 #workers{
     padding: 60px 0px 60px;
}
 #workers .workers-img{
     position: relative;
     border-radius: 5px;
}
 #workers .social-icons{
     position: absolute;
     bottom: 40px;
     left: 0;
     right: 0;
     margin: 0px auto;
     text-align: center;
     display: none;
}
 #workers .workers-col:hover .social-icons{
     display: block;
     animation: bcktop 1s forwards;
     -webkit-animation: bcktop 1s forwards;
     -moz-animation: bcktop 1s forwards;
     -o-animation: bcktop 1s forwards;
}
 #workers .workers-active .social-icons{
     display: block;
     animation: bcktop 0s forwards;
     -webkit-animation: bcktop 0s forwards;
     -moz-animation: bcktop 0s forwards;
     -o-animation: bcktop 0s forwards;
}
 #workers .workers-col:hover .workers-img:before, #workers .workers-active .workers-img:before{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: #464848;
     opacity: 0.5;
}
 #workers .social-icons li{
     display: inline-block;
}
 #workers .card{
     padding: 0px;
     text-align: center;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
/**========================= END WORKERS =========================**/
/**========================= START HAPPY CLIENTS =========================**/
 #happy-clients{
     padding: 80px 0px 90px;
     text-align: center;
}
 .happy-clients-bg{
     position: relative;
     background-image: url(../../uploads/arkaplan/arkaplan5/slider1.jpg);
     background-repeat: no-repeat;
     background-size: cover;
	 background-position:center;
     z-index: 9;
}
 .happy-clients-bg:after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: rgba(44, 70, 79, 0.7);
     z-index: -1;
}
 #happy-clients .head-after{
     color: #fff;
}
 #happy-clients .card{
     padding-right: 60px;
     padding-left: 60px;
     margin-bottom: 0;
     min-height: 320px;
}
 #happy-clients .card:before{
     content: "\f756";
     font-family: "Material Design Icons";
     font-size: 150px;
     position: absolute;
     left: 0px;
     right: 0px;
     top: 0;
     margin: 0px auto;
     text-align: center;
     opacity: 0.15;
     color: #464848;
}
 #happy-clients .hclients-img img{
     width: auto;
     position: absolute;
     top: -10px;
     left: -10px;
     right: 0;
     max-width: 80px;
     background: #fff;
     box-shadow: 0px 0px 20px 0px rgba(62, 62, 101, 0.13);
}
 .star-rating{
     margin-bottom: 0;
}
 .star-rating li{
     display: inline-block;
}
/**========================= END HAPPY CLIENTS =========================**/
/**========================= START BLOG =========================**/
 #blog{
     padding: 60px 0px 60px;
}
 #blog img{
     border-radius: 5px;
     object-fit: cover;
     height: 220px;
     background-color: #000000;
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease;
     max-width:100%;
}
 #blog .card{
     padding: 0;
}
 #blog .blog-img{
     position: relative;
}
 #blog .blog-date{
     position: absolute;
     bottom: -10px;
     left: 10px;
}
 #blog .blog-content .blog-title{
     font-weight: 100;
     line-height: 26px;
     text-transform: unset;
}
 #blog .blog-content .blog-title a{
     font-size: 100%;
     font-weight:bold;
     min-height: 52px;
     display: block;
}
 #blog .blog-content p{
     min-height:104px;
}
 #blog .card li{
     display: inline-block;
     position: relative;
     margin-right: 20px;
}
 #blog .card li+li:before{
     content: "/";
     position: absolute;
     left: -15px;
     color: rgba(0, 0, 0, 0.5);
}
 #blog .blog-body{
     padding: 30px 2px;
}
 #blog a:hover{
     color: #888;
}
 #blog a.btn:hover{
     color: #18aaa6;
}
 .blog-share li{
     display: inline-block;
}
 .side-nav-bar li{
     line-height: 40px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
 .side-nav-bar li:last-child{
     border-bottom: 0;
}
 .tags li{
     margin-bottom: 4px;
     display: inline-block;
}
 #blog .pagination{
     margin-bottom: 0;
}
 #blog .pagination .page-item.active, #blog .pagination .page-item.active:hover .page-link{
     background-color: #18aaa6;
     color: #464848;
}
 #blog .pagination .page-item .page-link:hover{
     background-color: #464848;
     color: #18aaa6 ;
}
 .helpline i{
     position: relative;
     top: 4px;
}
/**========================= END BLOG =========================**/
/**========================= START FOTO GALERİ =========================**/
 #foto_galeri{
     padding: 60px 0px 60px;
}
 #foto_galeri img{
     border-radius: 5px;
     object-fit: cover;
     height: 220px;
     background-color: #000000;
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease;
}
 #foto_galeri .card{
     padding: 0;
     overflow:hidden;
}
 #foto_galeri .blog-img{
     position: relative;
     /* 2026-07 duzeltme: bazi galeri kayitlarinda "kapak" olarak resim yerine yanlislikla video
        dosyasi (.mp4 vb.) secilmis olabiliyor; boyle durumlarda <img> yuklenemedigi icin kutu
        beklenenden çok daha kisa görünüyordu (digerleri ~220px iken bu ~20px kaliyordu). Yukseklik
        artik resmin kendisine degil bu sarmalayici kutuya sabitlendi, boylece resim yuklenemese
        bile kutu boyutu digerleriyle ayni kaliyor. */
     height: 220px;
     overflow: hidden;
}
 #foto_galeri .blog-date{
     position: absolute;
     bottom: -10px;
     left: 10px;
}
 #foto_galeri .blog-content .blog-title{
     font-weight: 100;
     line-height: 26px;
     text-transform: unset;
     /* 2026-07 duzeltme: baslik olmayan/kisa/uzun (2 satira kadar) kayitlar arasinda kutu
        yuksekligi farkli oluyordu (baslik olmayan kutu daha kisa, 2 satira saran baslik daha
        uzun kaliyordu). En uzun ihtimale (2 satir) gore sabit bir alan ayrilarak hepsi esitlendi. */
     min-height: 52px;
}
 #foto_galeri .blog-content .blog-title a{
     font-size: 100%;
     font-weight:bold;
     display: block;
}
 #foto_galeri .blog-content p{
     min-height:104px;
}
 #foto_galeri .card li{
     display: inline-block;
     position: relative;
     margin-right: 20px;
}
 #foto_galeri .card li+li:before{
     content: "/";
     position: absolute;
     left: -15px;
     color: rgba(0, 0, 0, 0.5);
}
 #foto_galeri .blog-body{
     padding: 15px 2px;
}
 #foto_galeri a:hover{
     color: #888;
}
 #foto_galeri a.btn:hover{
     color: #18aaa6;
}
 #foto_galeri a:hover img {
     opacity: 0.5;
}
 #foto_galeri .pagination{
     margin-bottom: 0;
}
 #foto_galeri .pagination .page-item.active, #foto_galeri .pagination .page-item.active:hover .page-link{
     background-color: #18aaa6;
     color: #464848;
}
 #foto_galeri .pagination .page-item .page-link:hover{
     background-color: #464848;
     color: #18aaa6 ;
}
/* =========================
   MODERN VIDEO GALERI KARTI
   ========================= */

#foto_galeri .nh-video-card{
    display: block;
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--nh-card);
    border: 1px solid var(--nh-border);
    box-shadow: 0 16px 40px -20px rgba(0,0,0,.55);
    transition:
        transform .35s cubic-bezier(.25,.8,.25,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

#foto_galeri .nh-video-card:hover{
    transform: translateY(-8px);
    border-color: rgba(24,170,166,.55);
    box-shadow:
        0 26px 55px -22px rgba(0,0,0,.75),
        0 0 0 1px rgba(24,170,166,.08);
}

#foto_galeri .nh-video-card-media{
    position: relative;
    width: 100%;
    height: 290px;
    overflow: hidden;
    background-color: #111;
}

#foto_galeri .nh-video-card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    transition:
        transform .65s cubic-bezier(.25,.8,.25,1),
        filter .4s ease;
}

#foto_galeri .nh-video-card:hover .nh-video-card-media img{
    transform: scale(1.07);
    filter: brightness(.82);
}

#foto_galeri .nh-video-overlay{
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(10,15,16,.05) 15%,
            rgba(10,15,16,.18) 45%,
            rgba(10,15,16,.92) 100%
        );
    transition: background .35s ease;
}

#foto_galeri .nh-video-card:hover .nh-video-overlay{
    background:
        linear-gradient(
            180deg,
            rgba(10,15,16,.12) 10%,
            rgba(10,15,16,.30) 45%,
            rgba(10,15,16,.96) 100%
        );
}

#foto_galeri .nh-video-play{
    position: absolute;
    top: 20px;
    left: 20px;

    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: #18aaa6;
    color: var(--nh-primary-fg);

    box-shadow: 0 12px 30px -10px rgba(24,170,166,.75);

    transition:
        transform .35s cubic-bezier(.25,.8,.25,1),
        box-shadow .35s ease;
}

#foto_galeri .nh-video-play i{
    font-size: 17px;
    transform: translateX(2px);
}

#foto_galeri .nh-video-card:hover .nh-video-play{
    transform: scale(1.12) rotate(-6deg);
    box-shadow:
        0 14px 35px -8px rgba(24,170,166,.9),
        0 0 0 8px rgba(24,170,166,.10);
}

#foto_galeri .nh-video-title{
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;

    transform: translateY(4px);
    transition: transform .35s ease;
}

#foto_galeri .nh-video-card:hover .nh-video-title{
    transform: translateY(0);
}

#foto_galeri .nh-video-title span{
    display: inline-block;
    margin-bottom: 7px;

    color: #18aaa6;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

#foto_galeri .nh-video-title h3{
    margin: 0;
    color: #fff;

    font-family: 'Sora', sans-serif;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;

    text-shadow: 0 3px 15px rgba(0,0,0,.35);
}

/* eski video galeri kart stillerinin
   yeni karta karismasini engeller */
#foto_galeri .nh-video-card img{
    height: 100%;
}

@media (max-width: 991.98px){

    #foto_galeri .nh-video-card-media{
        height: 260px;
    }

}

@media (max-width: 575.98px){

    #foto_galeri .nh-video-card-media{
        height: 230px;
    }

    #foto_galeri .nh-video-title{
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    #foto_galeri .nh-video-title h3{
        font-size: 17px;
    }

    #foto_galeri .nh-video-play{
        width: 46px;
        height: 46px;
        top: 16px;
        left: 16px;
    }

}
/* =========================
   MODERN FOTO GALERI KARTI
   ========================= */

#foto_galeri .nh-photo-card{
    display:block;
    width:100%;
    position:relative;
    border-radius:20px;
    overflow:hidden;
    background:var(--nh-card);
    border:1px solid var(--nh-border);
    box-shadow:0 16px 40px -20px rgba(0,0,0,.55);
    transition:
        transform .35s cubic-bezier(.25,.8,.25,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

#foto_galeri .nh-photo-card:hover{
    transform:translateY(-8px);
    border-color:rgba(24,170,166,.55);
    box-shadow:
        0 26px 55px -22px rgba(0,0,0,.75),
        0 0 0 1px rgba(24,170,166,.08);
}

#foto_galeri .nh-photo-card-media{
    position:relative;
    width:100%;
    height:290px;
    overflow:hidden;
    background:#111;
}

#foto_galeri .nh-photo-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:
        transform .65s cubic-bezier(.25,.8,.25,1),
        filter .4s ease;
}

#foto_galeri .nh-photo-card:hover .nh-photo-card-media img{
    transform:scale(1.07);
    filter:brightness(.82);
}

#foto_galeri .nh-photo-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(10,15,16,.05) 15%,
            rgba(10,15,16,.18) 45%,
            rgba(10,15,16,.92) 100%
        );
}

#foto_galeri .nh-photo-icon{
    position:absolute;
    top:20px;
    left:20px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:#18aaa6;
    color:var(--nh-primary-fg);
    box-shadow:0 12px 30px -10px rgba(24,170,166,.75);
    transition:
        transform .35s cubic-bezier(.25,.8,.25,1),
        box-shadow .35s ease;
}

#foto_galeri .nh-photo-card:hover .nh-photo-icon{
    transform:scale(1.12) rotate(-6deg);
    box-shadow:
        0 14px 35px -8px rgba(24,170,166,.9),
        0 0 0 8px rgba(24,170,166,.10);
}

#foto_galeri .nh-photo-title{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    transform:translateY(4px);
    transition:transform .35s ease;
}

#foto_galeri .nh-photo-card:hover .nh-photo-title{
    transform:translateY(0);
}

#foto_galeri .nh-photo-title span{
    display:inline-block;
    margin-bottom:7px;
    color:#18aaa6;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

#foto_galeri .nh-photo-title h3{
    margin:0;
    color:#fff;
    font-family:'Sora',sans-serif;
    font-size:19px;
    line-height:1.35;
    font-weight:700;
    text-shadow:0 3px 15px rgba(0,0,0,.35);
}

@media (max-width:991.98px){
    #foto_galeri .nh-photo-card-media{
        height:260px;
    }
}

@media (max-width:575.98px){
    #foto_galeri .nh-photo-card-media{
        height:230px;
    }

    #foto_galeri .nh-photo-title{
        left:18px;
        right:18px;
        bottom:18px;
    }

    #foto_galeri .nh-photo-title h3{
        font-size:17px;
    }

    #foto_galeri .nh-photo-icon{
        width:46px;
        height:46px;
        top:16px;
        left:16px;
    }
}
/* =========================
   MODERN PROJE KATEGORI KARTI
   ========================= */

#foto_galeri .nh-project-category-card{
    display:block;
    width:100%;
    position:relative;
    border-radius:20px;
    overflow:hidden;
    background:var(--nh-card);
    border:1px solid var(--nh-border);
    box-shadow:0 16px 40px -20px rgba(0,0,0,.55);
    transition:
        transform .35s cubic-bezier(.25,.8,.25,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

#foto_galeri .nh-project-category-card:hover{
    transform:translateY(-8px);
    border-color:rgba(24,170,166,.60);
    box-shadow:
        0 26px 55px -22px rgba(0,0,0,.75),
        0 0 0 1px rgba(24,170,166,.10);
}

#foto_galeri .nh-project-category-media{
    position:relative;
    width:100%;
    height:310px;
    overflow:hidden;
    background:#111;
}

#foto_galeri .nh-project-category-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:
        transform .65s cubic-bezier(.25,.8,.25,1),
        filter .4s ease;
}

#foto_galeri .nh-project-category-card:hover .nh-project-category-media img{
    transform:scale(1.07);
    filter:brightness(.80);
}

#foto_galeri .nh-project-category-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(8,12,13,.03) 10%,
            rgba(8,12,13,.15) 42%,
            rgba(8,12,13,.94) 100%
        );
}

#foto_galeri .nh-project-category-icon{
    position:absolute;
    top:20px;
    left:20px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background-color:#18aaa6;
    color:var(--nh-primary-fg);
    box-shadow:0 12px 30px -10px rgba(24,170,166,.75);
    transition:
        transform .35s cubic-bezier(.25,.8,.25,1),
        box-shadow .35s ease;
}

#foto_galeri .nh-project-category-card:hover .nh-project-category-icon{
    transform:scale(1.12) rotate(-6deg);
    box-shadow:
        0 14px 35px -8px rgba(24,170,166,.9),
        0 0 0 8px rgba(24,170,166,.10);
}

#foto_galeri .nh-project-category-title{
    position:absolute;
    left:24px;
    right:70px;
    bottom:24px;
    transform:translateY(4px);
    transition:transform .35s ease;
}

#foto_galeri .nh-project-category-card:hover .nh-project-category-title{
    transform:translateY(0);
}

#foto_galeri .nh-project-category-title span{
    display:inline-block;
    margin-bottom:7px;
    color:#18aaa6;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

#foto_galeri .nh-project-category-title h3{
    margin:0;
    color:#fff;
    font-family:'Sora',sans-serif;
    font-size:21px;
    line-height:1.3;
    font-weight:700;
    text-shadow:0 3px 15px rgba(0,0,0,.4);
}

#foto_galeri .nh-project-category-arrow{
    position:absolute;
    right:22px;
    bottom:22px;
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    backdrop-filter:blur(8px);
    transition:
        transform .35s ease,
        background .35s ease;
}

#foto_galeri .nh-project-category-card:hover .nh-project-category-arrow{
    transform:translateX(4px);
    background:#18aaa6;
    color:var(--nh-primary-fg);
}

@media (max-width:991.98px){
    #foto_galeri .nh-project-category-media{
        height:280px;
    }
}

@media (max-width:575.98px){
    #foto_galeri .nh-project-category-media{
        height:240px;
    }

    #foto_galeri .nh-project-category-title{
        left:18px;
        bottom:18px;
        right:62px;
    }

    #foto_galeri .nh-project-category-title h3{
        font-size:18px;
    }

    #foto_galeri .nh-project-category-icon{
        width:46px;
        height:46px;
        top:16px;
        left:16px;
    }

    #foto_galeri .nh-project-category-arrow{
        width:38px;
        height:38px;
        right:16px;
        bottom:16px;
    }
}
/* FOTO / VIDEO / PROJE GALERI:
   kartlar ile kayıt sayısı-paginasyon arasına nefes alanı */
#foto_galeri .blog-col{
    margin-bottom: 48px;
}

#foto_galeri .col-lg-12.text-center > p.text-center{
    margin-top: 8px;
    margin-bottom: 18px;
}
/**========================= END FOTO GALERİ =========================**/
/**========================= START FOTO =========================**/
 #foto{
     padding: 60px 0px 60px;
}
 #foto img{
     border-radius: 5px;
     object-fit: cover;
     height: 170px;
     background-color: #000000;
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease;
}
 #foto .card{
     padding: 0;
     overflow:hidden;
}
 #foto .blog-img{
     position: relative;
}
 #foto .blog-date{
     position: absolute;
     bottom: -10px;
     left: 10px;
}
 #foto .blog-content .blog-title{
     font-weight: 100;
     line-height: 26px;
     text-transform: unset;
}
 #foto .blog-content .blog-title a{
     font-size: 100%;
     font-weight:bold;
     display: block;
}
 #foto .blog-content p{
     min-height:104px;
}
 #foto .card li{
     display: inline-block;
     position: relative;
     margin-right: 20px;
}
 #foto .card li+li:before{
     content: "/";
     position: absolute;
     left: -15px;
     color: rgba(0, 0, 0, 0.5);
}
 #foto .blog-body{
     padding: 15px 2px;
}
 #foto a:hover{
     color: #888;
}
 #foto a.btn:hover{
     color: #18aaa6;
}
 #foto a:hover img {
     opacity: 0.5;
}
 #foto .pagination{
     margin-bottom: 0;
}
 #foto .pagination .page-item.active, #foto .pagination .page-item.active:hover .page-link{
     background-color: #18aaa6;
     color: #464848;
}
 #foto .pagination .page-item .page-link:hover{
     background-color: #464848;
     color: #18aaa6 ;
}
/**========================= END FOTO GALERİ =========================**/
/**========================= START CLIENTS =========================**/
 #clients{
     padding: 50px 0px;
}
 #clients .slick-prev, #clients .slick-next{
     display: none !important;
}
/**========================= END CLIENTS =========================**/
/**========================= START FOOTER =========================**/
 #footer{
     padding: 80px 0px 50px;
}
 .footer-bg{
     position: relative;
     background-image: url(../../uploads/arkaplan/arkaplan1/img-1.jpg);
     background-repeat: no-repeat;
     background-size: cover;
	 background-position:center;
     z-index: 9;
}
 .footer-bg:after{
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: rgba(44, 70, 79, 0.9);
     /* 2026-07 duzeltme: bu koyu katman -1 idi, gezinen favicon ikonu da -1 yapilinca
        (asagida "FOOTER FAVICON BOUNCE" bolumu) ikisi ayni seviyede kalip ikon bu koyu
        katmanin ARKASINDA kalarak neredeyse görünmez (soluk bir "hayalet" gibi) oluyordu.
        Katman -2 yapilarak ikonun (-1) SIRTINDA/onunde, ama yine de normal metin/baslik
        icerigin (bunlar negatif z-index'e sahip degil, dolayisiyla her zaman daha onde)
        ARKASINDA kalmasi saglandi. */
     z-index: -2;
}
 #footer li{
     line-height: 40px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
 #footer .social-icons li{
     display: inline-block;
     border-bottom: none;
}
 #footer ul li a, #footer p a{
     color: #fff;
}
 #footer .social-icons li a{
     color: #fff;
}
 #footer h3, #footer h5, #footer p, #footer li{
     color: #fff;
}
 #footer a:hover{
     color: #18aaa6;
}
/**========================= END FOOTER =========================**/
/**========================= START SUB FOOTER =========================**/
 #sub-footer{
     padding: 30px 0px;
}
 .sub-foot-left{
     text-align: left;
}
 .sub-foot-right{
     text-align: right;
}
 #sub-footer ul{
     margin-bottom: 0 
}
 #sub-footer li{
     display: inline-block;
     position: relative;
     color:#fff;
}
 #sub-footer li+li::before{
     display: inline-block;
     padding: 0px 5px;
     content: "/";
}
 #sub-footer a{
     color: #464848;
}
 #sub-footer a:hover{
     color: #335763;
}
 .backto-top-btn{
     display: none;
     position: fixed;
     z-index: 9;
     right: 2%;
     bottom: 3%;
     animation: bcktop 1s forwards;
     -webkit-animation: bcktop 1s forwards;
     -moz-animation: bcktop 1s forwards;
     -o-animation: bcktop 1s forwards;
     z-index: 99;
     width: 46px;
     height: 46px;
     line-height: 46px;
     padding: 0;
     text-align: center;
     border-radius: 50%;
     box-shadow: 0 10px 25px -5px rgba(44, 70, 79, 0.4);
     transition: transform 0.25s ease, box-shadow 0.25s ease;
}
 .backto-top-btn:hover{
     transform: translateY(-4px);
     box-shadow: 0 15px 30px -5px rgba(44, 70, 79, 0.5);
}
 .satir{
     min-height:78px;
}
 .belgeler, .referanslar{
     display:flex;
     justify-content:center;
     align-items: center;
     overflow: hidden;
}
 .belgeler a:hover img , .referanslar a:hover img {
     -webkit-transform: scale3d(1.15, 1.15, 1.15);
     transform: scale3d(1.15, 1.15, 1.15);
}
 .belgeler img{
     object-fit: cover;
     height: 335px;
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease;
}
 .referanslar img{
     object-fit: contain;
     height: 130px;
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease;
}
 .d-ortala-kapsa{
     display:flex;
     justify-content:left;
     align-items: center;
}
 .d-ortala{
     text-align:center;
}
 .custom-file {
     position: relative;
     display: inline-block;
     width: 100%;
     height: calc(3.25rem + 2px);
     margin-bottom: 0;
}
 .custom-file-input {
     position: relative;
     z-index: 2;
     width: 100%;
     height: calc(2.25rem + 2px);
     margin: 0;
     opacity: 0;
}
 .custom-file-label {
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     z-index: 1;
     height: calc(2.65rem + 10px);
     padding: 10px 25px;
     line-height: 1.5;
     color: #495057;
     background-color: #fff;
     box-shadow: 0 0 0 0 !important;
     border: 2px solid rgba(44, 70, 79, 0.2);
     border-radius: .25rem;
}
 .custom-file-label::after {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 3;
     display: block;
     height: calc(calc(3.04rem + 2px) - 1px * 2);
     padding: .375rem .75rem;
     line-height: 2.4;
     color: #495057;
     content: "Seçiniz";
     background-color: #e9ecef;
     border-left: 1px solid #ced4da;
     border-radius: 0 .25rem .25rem 0;
}
 .mgorus_image{
     max-width:95px;
     box-shadow: 0px 0px 35px 0px rgba(62, 62, 101, 0.1);
}
 .turkey-map-drawing {
     text-align: center;
}
 .turkey-map-drawing svg {
     width: 100%;
     height: auto;
}
 .turkey-map-drawing g.is-completed path {
     fill: #464848;
}
 .turkey-map-drawing path {
     cursor: pointer;
     fill: #18aaa6;
     -webkit-transition: .2s;
     transition: .2s;
}
 .turkey-map-drawing path:hover {
     fill: #333 !important;
}
 .turkey-map__name {
     position: absolute;
     z-index: 2;
}
 .turkey-map__name div {
     display: inline-block;
     background: #003861;
     color: #fff;
     font-size: 13px;
     font-weight: 500;
     padding: 8px 16px;
     border-radius: 2px;
}
 .bayiler>.icon {
     position: absolute;
     right: 15px;
     top: 15px;
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     border-radius: 100%;
     width: 37px;
     height: 37px;
     border: 2px solid currentColor;
     color: #000;
     opacity: .3;
}
 .bayiler .title {
     color: #464848;
     font-size: 20px;
     font-weight: 600;
     line-height: 1.3;
     margin-bottom: 0;
}
 .bayiler .title.small {
     font-size: 12px;
     font-weight: 400;
     margin-bottom: 0px;
}
 .bayiler .text {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     color: #939393;
     font-size: 13px;
     margin-top: 5px;
     margin-right: 10px;
}
 a:not([href]):not([tabindex]) {
     color: inherit;
     text-decoration: none;
}
 .box-footer .name {
     color: #777;
     font-size: 16px;
     font-weight: 500;
     display: block;
}
 .box-footer .text .icon {
     margin-right: 10px;
     font-size: 13px;
}
 .box-header{
     margin-bottom:50px;
}
 .iconset {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     width: 42px;
     height: 42px;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     background: #000;
     border-radius: 100%;
     color: #fff;
     font-size: 18px;
     margin-bottom: 20px;
     position: absolute;
     left: 20px;
     top: 20px;
     z-index: 1;
}
 .video-detail__wrapper {
     background: #002249;
     min-height: 600px;
     padding-top: 50px;
     padding-bottom: 150px;
}
 .video-detail__header {
     margin-top: 20px;
     margin-bottom: 20px;
}
 .video-detail__header .title {
     color: #fff;
     font-size: 28px;
     font-weight: 400;
}
 .video-detail-player iframe {
     width: 100%;
     height: 530px;
}
 @media (max-width: 767px) {
     .video-detail-player iframe {
         height: auto;
    }
}
 @media (min-width: 768px) and (max-width: 991px) {
     .video-detail-player iframe {
         height: 400px;
    }
}
 .video-detail-other-videos .heading {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     background: rgba(0, 0, 0, 0.2);
     height: 60px;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding-left: 15px;
     padding-right: 15px;
     color: #fff;
     font-size: 16px;
     font-weight: 400;
}
 .video-detail-other-videos .heading .all-videos {
     text-transform: capitalize;
     font-size: 12px;
     color: #fff;
     opacity: .7;
     font-weight: 400;
}
 .video-detail-other-videos .heading .all-videos:hover {
     text-decoration: underline;
}
 .video-detail-list {
     overflow-y: auto;
     background: #0000009c;
     height: calc(530px - 60px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
 @media (min-width: 768px) and (max-width: 991px) {
     .video-detail-list {
         height: 340px;
    }
}
 .video-detail-list li {
     padding-top: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.07);
     -webkit-transition: .3s;
     transition: .3s;
}
 .video-detail-list li:last-child {
     border-bottom: 0 none;
}
 .video-detail-list li:hover {
     background: rgba(0, 0, 0, 0.2);
}
 .video-detail-list li a {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
}
 .video-detail-list .video-left {
     width: 110px;
     height: 70px;
     position: relative;
     margin-left: 10px;
     margin-right: 10px;
}
 .video-detail-list .video-left img {
     width: 100%;
     height: 100%;
     -o-object-fit: cover;
     object-fit: cover;
}
 .video-detail-list .video-left .icon {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     background: rgba(0, 0, 0, 0.55);
     color: #fff;
     font-size: 16px;
}
 .video-detail-list .video-right {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding-left: 5px;
     padding-right: 15px;
}
 .video-detail-list .video-right .title {
     color: #fff !important;
     font-size: 14px !important;
     font-weight: 600 !important;
     line-height: 1.4 !important;
     margin-bottom: 0px !important;
}
 .haberbar img{
     object-fit: cover;
     height: 70px !important;
     background-color: #000000;
     -webkit-transition: all 600ms ease;
     -moz-transition: all 600ms ease;
     -ms-transition: all 600ms ease;
     -o-transition: all 600ms ease;
     transition: all 600ms ease;
     max-width: 100%;
     margin-bottom: 5px !important;
     margin-top: 5px !important;
}
 .haber-diger img{
     object-fit: cover;
     height: 150px !important;
}
 .whatsapp {
     position: fixed;
     left: 15px;
     bottom: 15px;
     transition: all .5s ease-in-out;
     z-index: 999;
}
 .whatsapp a {
     height: 50px;
     width: 50px;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
     font-size: 28px;
     display: block;
     text-align: center;
     line-height: 50px;
     color: white;
     background: #4dc247;
}
 .whatsapp a i{
     font-size: 25px;
}
 .whatsapp .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: black;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     line-height: normal;
     font-size: 15px;
     top: 13px;
     left: 105%;
     height: auto;
}
 .whatsapp:hover a {
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
}
 .whatsapp:hover .tooltiptext {
     visibility: visible;
}
 .telefon {
     position: fixed;
     left: 15px;
     bottom: 75px;
     transition: all .5s ease-in-out;
     z-index: 999;
}
 .telefon a {
     height: 50px;
     width: 50px;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
     font-size: 28px;
     display: block;
     text-align: center;
     line-height: 50px;
     color: white;
     background: #337ab7;
}
 .telefon a i{
     font-size: 25px;
}
 .telefon .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: black;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     line-height: normal;
     font-size: 15px;
     top: 13px;
     left: 105%;
     height: auto;
}
 .telefon:hover a {
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
}
 .telefon:hover .tooltiptext {
     visibility: visible;
}
 .diller {
     position: fixed;
     left: 15px;
     bottom: 135px;
     transition: all .5s ease-in-out;
     z-index: 999;
}
 .diller a {
     height: 50px;
     width: 50px;
     border-radius: 50%;
     overflow: hidden;
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
     font-size: 28px;
     display: block;
     text-align: center;
     line-height: 50px;
     color: white;
     background: #000;
}
 .diller a i{
     font-size: 25px;
}
 .diller .tooltiptext {
     visibility: hidden;
     width: 120px;
     background-color: black;
     color: #fff;
     text-align: center;
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
     z-index: 1;
     line-height: normal;
     font-size: 15px;
     top: 13px;
     left: 105%;
     height: auto;
}
 .diller:hover a {
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
}
 .diller:hover .tooltiptext {
     visibility: visible;
}
 .lang {
    float:left;
    width:100%;
}
 .lang img {
     display: inline-block;
     height: 16px;
     margin-right: 8px;
     margin-top: 0px;
     margin-bottom: -3px;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
}
 .lang .currencyitems a {
    width:24%;
}
 .activelang {
    opacity:0.45;
     filter:alpha(opacity=45);
}
 .lang h4 {
    float:left;
    width:100%;
    padding-bottom:10px;
    margin-bottom:15px;
     font-size: 24px;
     font-weight: 600;
}
 .lang a {
     display: inline-block;
     vertical-align: top;
    /* width: 32%;
     */
     margin: 5px;
     font-size: 16px;
     color: #9d9d9d;
     padding: 10px;
     border: 1px solid #0000004d;
     border-radius: 50px;
}
 .lang a:hover {
     border: 1px solid #000;
     color: #000;
}
 .ekipdetay ul {
     margin-top: 35px;
}
 .ekipdetay ul li {
     display: inline-block;
}
 .ekipdetay ul li a {
     width: 40px;
     height: 40px;
     display: block;
     line-height: 40px;
     text-align: center;
     border-radius: 50%;
     background: #e5f6ff;
     color: #69a1bb;
     margin-right: 8px;
     -webkit-transition: all .3s ease-out 0s;
     -moz-transition: all .3s ease-out 0s;
     -ms-transition: all .3s ease-out 0s;
     -o-transition: all .3s ease-out 0s;
     transition: all .3s ease-out 0s;
}
 .btn.btn-with-border {
     border-bottom: 1px solid #042b3d;
     border-radius: 0;
     min-width: auto;
     padding: 0;
}
 .iletisim .card{
     min-height: 158px;
}
 .popupform .form-column, .testimonial-section-two .form-column {
     position: relative;
}
 .popupform .form-column .inner-column, .testimonial-section-two .form-column .inner-column {
     position: relative;
     margin-top: -100px;
     border-radius: 10px;
     padding: 50px 40px 50px;
     background-color: #18aaa6;
}
 .popupform .form-column h2, .testimonial-section-two .form-column h2 {
     position: relative;
     color: #ffffff;
     font-size: 36px;
     font-weight: 600;
     text-align: center;
     margin-bottom: 20px;
}
 .default-form .form-group {
     position: relative;
     margin-bottom: 20px;
}
 .default-form .form-group input[type="text"], .default-form .form-group input[type="email"], .default-form .form-group select {
     position: relative;
     display: block;
     width: 100%;
     line-height: 24px;
     padding: 15px 25px;
     color: #ffffff;
     height: 50px;
     font-size: 14px;
     background: none;
     font-weight: 400;
     border-radius: 5px;
     border: 1px solid #ffffff;
     background: rgba(255, 255, 255, 0.10);
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease;
}
 .default-form .form-group textarea {
     position: relative;
     display: block;
     width: 100%;
     line-height: 24px;
     padding: 15px 25px;
     color: #ffffff;
     height: 150px;
     background: rgba(255, 255, 255, 0.10);
     resize: none;
     font-size: 14px;
     font-weight: 400;
     border-radius: 5px;
     border: 1px solid #ffffff;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     transition: all 300ms ease;
}
 .default-form .form-group:last-child {
     margin-bottom: 0px;
}
 .btn-style-two {
     position: relative;
     display: inline-block;
     font-size: 16px;
     line-height: 30px;
     color: #ffffff;
     padding: 10px 35px 10px;
     font-weight: 500;
     overflow: hidden;
     letter-spacing: 1px;
     border-radius: 50px;
     background-color: #322f2f;
     text-transform: capitalize;
     cursor:pointer;
}
 .btn-style-two .txt {
     position: relative;
     z-index: 1;
     transition: all 300ms ease;
     -moz-transition: all 300ms ease;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
}
 .btn-style-two:before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
     background-color: #ab7442;
     -webkit-transition: all 0.4s;
     -moz-transition: all 0.4s;
     -o-transition: all 0.4s;
     transition: all 0.4s;
     -webkit-transform: scale(1, 0.5);
     transform: scale(1, 0.5);
}
 .btn-style-two:hover::before {
     opacity: 1;
     transform: scale(1, 1);
     -webkit-transform: scale(1, 1);
}
 .btn-style-two:hover {
     color: #ffffff;
}
 .default-form .form-group .theme-btn:hover {
     color: #222222;
}
 .default-form .form-group .theme-btn:before {
     background-color: #ffffff;
}
.slick-prev, .slick-next {
    background-color: #18aaa6 !important;
}
 @media only screen and (max-width: 768px){
     #header {
         height: auto;
    }
}

/**========================= START SCROLL REVEAL (2026-07 guncelleme) =========================**/
.reveal-up{
	opacity: 0;
	transform: translateY(45px);
	transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal-up.in-view{
	opacity: 1;
	/* transform: translateY(0) yerine "none" kullanildi: translateY(0) bile olsa aktif bir
	   transform degeri, icindeki position:fixed elemanlar icin (ör. #who-we-are icindeki video
	   modal'i) tarayicinin yeni bir "containing block" olusturmasina sebep oluyor - bu da modal'in
	   ekranin disina/yanlis yere konumlanip tikanmasina yol aciyordu (2026-07 duzeltme) */
	transform: none;
}
@media (prefers-reduced-motion: reduce){
	.reveal-up{
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* Counter bolumu icin farkli/kademeli "buyuyerek belirme" animasyonu (2026-07 guncelleme) */
.reveal-counter .counter-col{
	opacity: 0;
	transform: scale(0.8);
	transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal-counter.in-view .counter-col{
	opacity: 1;
	/* scale(1) yerine "none": ayni nedenle (bkz. .reveal-up.in-view) - aktif transform degeri
	   icerideki position:fixed/absolute elemanlar icin yeni containing block olusturup ileride
	   benzer bir konumlanma sorununa yol acabilirdi (2026-07 duzeltme) */
	transform: none;
}
.reveal-counter.in-view .counter-col:nth-child(1){ transition-delay: 0s; }
.reveal-counter.in-view .counter-col:nth-child(2){ transition-delay: 0.12s; }
.reveal-counter.in-view .counter-col:nth-child(3){ transition-delay: 0.24s; }
.reveal-counter.in-view .counter-col:nth-child(4){ transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce){
	.reveal-counter .counter-col{
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/**========================= END SCROLL REVEAL =========================**/
/**========================= START ILETISIM (HARITA) =========================**/
/* 2026-07 guncelleme: Iletisim sayfasinda harita (.mapouter), kartlar+form bolumunun
   (.ptb-80-60) ALTINDA tam genislikte duruyordu; bu da sayfa acilinca haritayi gormek
   icin cok fazla asagi kaydirmayi gerektiriyordu ("harita alta inmeden gorunmuyor").
   HTML'de bu iki blok aslinda kardes elemanlar (ikisi de dogrudan <body> altinda) - sayfa
   dosyasina (DB'den gelen icerikler oldugu icin) dokunmadan, CSS Grid ile SADECE bu
   sayfada (harita oldugunda, "body:has(> .mapouter)" ile hedeflenerek) ve SADECE genis
   ekranlarda (>=992px) ikisi yan yana yerlestirildi; boylece harita sayfa ilk acildiginda,
   hic kaydirmadan formla birlikte gorunuyor. Kucuk ekranlarda (mobil/tablet) bu kural
   devreye girmiyor, harita eskisi gibi formun altinda tam genislikte kaliyor - kucuk
   ekranda iki sutuna sigdirmak okunabilirligi bozardi. Tarayici ":has()" destegi yoksa
   (cok eski tarayicilar) bu blok sessizce yok sayilir, sayfa eskisi gibi (alt alta)
   calismaya devam eder - hicbir kirilma olmaz. */
@media (min-width: 992px){
	body:has(> .mapouter){
		display: grid;
		/* 2026-07 duzeltme #3: kullanicinin ornek gosterdigi referans sitede (ramakotomotiv.com/iletisim)
		   harita SOLDA (biraz daha dar), form SAGDA (biraz daha genis) duruyor. Ayni "sekli" vermek icin
		   sutunlarin sirasi ve oranlari degistirildi - renkler/kutu stilleri (bizim tema) aynen koruniyor,
		   sadece yerlesim sekli benzetiliyor.
		   2026-07 duzeltme #4: onceki halinde harita ve form, sutunlar tam viewport genisligine
		   ("1fr"/"1.2fr") gerdigi icin genis monitorlerde hem harita sayfanin SOL KENARINA yapisik
		   duruyordu (disaridan bosluk/nefes payi yoktu) hem de her sey (kutular, inputlar) asiri
		   buyuyup "profesyonel durmuyor" hissi veriyordu. Simdi solda ve sagda esnek birer "bosluk"
		   sutunu eklendi (en az 15px, gerekirse daha fazla) ve harita/form sutunlarina bir UST SINIR
		   (max genislik) verildi; boylece icerik - tipki sitenin geri kalanindaki 1140px'lik
		   ".container" mantigi gibi - ORTALANMIS ve MAKUL bir genislikte kaliyor, sadece kenarlardaki
		   fazla alan bosluk olarak kaliyor (icerik sismiyor).
		   2026-07 duzeltme #7: kullanici referans sitede (ramakotomotiv.com/iletisim) haritanin
		   ve formun tam olarak AYNI ve daha genis (630px) oldugunu olcup istedi - yukseklikler
		   degismiyor (o mekanizma aynen koruniyor), sadece iki sutunun genislik ust siniri
		   ramakotomotiv ile birebir esitlendi. */
		grid-template-columns: minmax(15px, 1fr) minmax(0, 630px) minmax(0, 630px) minmax(15px, 1fr);
		column-gap: 30px;
	}
	/* 2026-07 duzeltme #3 (devam): CSS Grid'in otomatik yerlesim mantiginda, HTML sirasinda
	   ONCE gelen ".ptb-80-60" 2. sutuna, SONRA gelen ".mapouter" 1. sutuna ataninca, tarayici
	   ikisini ayni SATIRA degil, .mapouter'i bir alt satira atiyordu (once gelen eleman "daha
	   sonraki" bir sutuna gidince, tarayicinin ic sayaci geri sarilamiyor). Bunu kesin cozmek
	   icin artik satir numaralari (grid-row) da elle, acikca veriliyor - boylece sutun atama
	   sirasindan tamamen bagimsiz, ikisi HER ZAMAN ayni satirda yan yana cikiyor. */
	body:has(> .mapouter) > #top-header{
		grid-row: 1;
		grid-column: 1 / -1;
	}
	body:has(> .mapouter) > #header{
		grid-row: 2;
		grid-column: 1 / -1;
	}
	body:has(> .mapouter) > #header-spacer{
		grid-row: 3;
		grid-column: 1 / -1;
	}
	body:has(> .mapouter) > #breadcrumb{
		grid-row: 4;
		grid-column: 1 / -1;
	}
	body:has(> .mapouter) > #footer{
		grid-row: 6;
		grid-column: 1 / -1;
	}
	body:has(> .mapouter) > #sub-footer{
		grid-row: 7;
		grid-column: 1 / -1;
	}
	body:has(> .mapouter) > .ptb-80-60{
		grid-row: 5;
		grid-column: 3;
	}
	body:has(> .mapouter) > .mapouter{
		grid-row: 5;
		grid-column: 2;
		display: flex;
		flex-direction: column;
		/* 2026-07 duzeltme #2: asagidaki ".mapouter{max-width:1140px; margin:0 auto;}" kurali
		   normalde (tek sutunlu, grid olmayan) durumda haritayi ortalamak icindi. Ama bir grid
		   hucresi icinde "margin:0 auto" oldugu an tarayici o elemani hucreyi DOLDURMAK yerine
		   icerigi kadar KUCULTUYOR (flex/grid'te auto-margin = kucul+ortala davranisi) - iframe'in
		   genisligi de ("width:100%") boylece belirsiz/kucuk bir kutuya gore hesaplaniyor, sonuc
		   olarak harita hem cok kucuk cikiyor hem de sag tarafta kocaman bos alan kaliyordu. Burada
		   genis ekranda bu davranisi iptal edip haritayi hucrenin TAM genisligine zorluyoruz. */
		max-width: none;
		width: 100%;
		margin: 0;
	}
	body:has(> .mapouter) > .mapouter .gmap_canvas{
		flex: 1;
		height: auto;
	}
	body:has(> .mapouter) > .mapouter .gmap_canvas iframe{
		height: 100% !important;
	}
	/* 2026-07 duzeltme #6: haritanin kutusu (.mapouter) ve formun kutusu (.ptb-80-60) grid
	   tarafindan zaten AYNI yukseklige zorlaniyordu (ikisi de satirin en uzun elemanina
	   esitleniyordu) - ama bunu FARKEDEMIYORDUK cunku .ptb-80-60'in GORUNEN (cerceveli,
	   golgeli) form kutusu kendi icinde bu fazla yuksekligi doldurmuyor, sadece bos alan
	   birakiyordu (harita tarafinda ise harita gercekten o fazla alani dolduruyordu). Sonuc:
	   harita gorsel olarak formdan daha uzun/asagida bitiyormus gibi duruyordu. Simdi
	   formun gorunen kutusu da (container > row > kart) tam yukseklige kadar uzatiliyor -
	   boylece iki panel gercekten ayni hizada ve ayni boyutta bitiyor. */
	body:has(> .mapouter) > .ptb-80-60 > .container{
		height: 100%;
	}
	body:has(> .mapouter) > .ptb-80-60 > .container > .row{
		height: 100%;
	}
	body:has(> .mapouter) > .ptb-80-60 .card.card-active{
		height: 100%;
		box-sizing: border-box;
	}
}
/* 2026-07 duzeltme #5: kullanicinin istegi uzerine Adres/Telefon/E-posta kutulari bu
   sayfadan tamamen kaldirildi - bu bilgiler zaten sayfanin en altinda, footer'daki
   "İletişim Bilgileri" basligi altinda da duruyor, burada tekrar gostermeye gerek yok.
   Sayfa dosyasi (DB'den geldigi icin) degistirilemedigi icin bu blok CSS ile gizlendi;
   tum ekran boylarinda (mobil dahil) gecerli, sadece bu sayfada (harita oldugunda). */
body:has(> .mapouter) .col-lg-12:has(> .row.iletisim){
	display: none;
}
/* Haritanin gorunumu: eskiden ciplak, kenardan kenara (tam ekran genisligi) duz bir iframe
   olarak duruyordu - sitenin diger bolumleriyle (max-width 1140px + yuvarlatilmis kose +
   golge + baslik) tutarli hale getirildi. "Konumumuz" basligi gercek bir HTML elemani
   eklemeden (::before ile) olusturuluyor - sayfa dosyasi degismedigi icin bu sekilde
   yapildi. NOT: max-width/margin:auto ile ortalama SADECE mobil/tablet (tek sutunlu, grid
   olmayan) durumda uygulanir; genis ekranda yukaridaki grid kurali bunu "none/100%/0"a
   cevirip haritayi hucreye tam oturtuyor (2026-07 duzeltme #2). */
@media (max-width: 991.98px){
	.mapouter{
		max-width: 1140px;
		margin: 0 auto;
	}
}
.mapouter{
	padding: 80px 15px 60px;
	box-sizing: border-box;
}
.mapouter:before{
	content: "Konumumuz";
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 2px solid #18aaa6;
}
.gmap_canvas{
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0,0,0,.1);
	height: 430px;
}
.gmap_canvas iframe{
	width: 100% !important;
	display: block;
}
/**========================= END ILETISIM (HARITA) =========================**/
/**========================= START 2026 MODERN TEMA (v2 - referans tasarim) =========================**/
/* 2026-07-30 guncelleme: kullanicinin kendi hazirlattigi bir referans tasarimi (Next.js/
   Tailwind projesi, "website-modernization" ) birebir uyarlama talebi uzerine, onceki
   ("2026 TEMA YENILEME") bolumun yerine YENIDEN yazildi. Referansin renk paleti dogrudan
   kullanildi - koyu antrasit zemin (#1a1c1c/#141616), kart yuzeyi (#26292a), turkuaz vurgu -
   bu turkuaz zaten bizim renk1 (#18AAA6) ile AYNI deger, yani marka kimligi degismiyor,
   sadece yeni bir "yuzey" sistemi (koyu zemin + kart + kenarlik tonlari) ekleniyor. Govde
   fontu Inter, basliklar Sora oldu (yukarida body/h1-h6 kurallarinda degistirildi).
   Kapsam: anasayfaya OZEL butun bolumler (hero, features seridi, hakkimizda, sayac, hizmet
   alanlarimiz, son projelerimiz, musteri yorumlari, iletisim) koyu temaya donuyor -
   ":has(#main-slider)" ile SADECE anasayfa hedefleniyor, diger ic sayfalarin (hizmetler,
   projeler, iletisim vb. detay sayfalari) govde tasarimi bu turda DEGISMIYOR. Header ve
   footer ise ORTAK bilesenler oldugu icin TUM sayfalarda koyu temaya donuyor. Resimlerin
   kendisi degistirilmiyor (kullanici admin panelinden en son yapacak). */

:root{
	--nh-bg: #1a1c1c;
	--nh-dark: #141616;
	--nh-card: #26292a;
	--nh-fg: #ededed;
	--nh-muted: #9aa1a1;
	--nh-border: #333737;
	--nh-accent: #17302f;
	--nh-primary-fg: #06201f;
	/* 2026-07-30 (round67): kullanici referans site (Vercel demo) incelenerek anasayfa
	   bolumlerinin zeminine HAFIF bir "seritli" (striped) kontrast istedi - bolumler sirayla
	   iki farkli koyu tondan birini kullaniyor: "--nh-bg" (#1a1c1c, ana zemin) ve asagida
	   eklenen "--nh-bg-alt" (#1e2121, referans siteki ".bg-secondary/60" katmaninin verdigi
	   goruntuye en yakin duz/solid renk - kullanici tarafindan tam bu hex deger olarak
	   istendi). Sadece "Hizmet Alanlarimiz" (#providing) ve "Musteri Yorumlari"
	   (.happy-clients-bg) bu alt tonu kullaniyor - digerleri (#what-we-do, #who-we-are,
	   #projects, #home-contact) zaten "--nh-bg" kullaniyordu (kullanicinin bunlar icin
	   istedigi #1a1c1c ile ayni), o yuzden onlarda degisiklik gerekmedi. */
	--nh-bg-alt: #1e2121;
}

/**========================= START DARK/LIGHT TEMA SWITCH (round84) =========================**/
/* Kullanici navbar'in sagina bir dark/light mode switch istedi. Site su ana kadar SADECE
   koyu temayla (yukaridaki :root) tasarlanmisti - "light mode" diye ayri bir tema yoktu, bu
   yuzden asagida ayni 9 degiskenin (--nh-bg, --nh-card, --nh-fg, --nh-muted, --nh-border,
   --nh-dark, --nh-bg-alt, --nh-accent) ACIK tema karsiliklari tanimlaniyor. "--nh-primary-fg"
   (#06201f) bilerek DEGISTIRILMEDI: bu renk, admin panelinden ayarlanan sabit marka rengi
   olan "renk1" (turkuaz) zeminli rozet/buton gibi elemanlarin UZERINDEKI yazi/ikon rengi -
   o turkuaz zemin her iki temada da ayni kaldigi icin bu metin rengi de ayni kalmali.
   [data-theme="light"] attribute'u <html> etiketine JS ile (sayfa sonundaki script, ve
   flash'i onlemek icin <head> basindaki erken script) ekleniyor/kaldiriliyor. */
html[data-theme="light"]{
	--nh-bg: #f5f7f7;
	--nh-dark: #e7ecec;
	--nh-card: #ffffff;
	--nh-fg: #14181a;
	--nh-muted: #5b6363;
	--nh-border: #e0e5e5;
	--nh-accent: #e2f0ee;
	--nh-bg-alt: #eef2f2;
}

/* Genel gecis: tema degisirken (View Transitions API'nin devreye giremedigi durumlarda,
   ornegin eski tarayicilarda) en azindan temel renkler yumusak bir sekilde degissin diye
   kisa bir transition birakildi - View Transitions API destekleniyorsa zaten JS tarafinda
   ayarlanan dairesel animasyon bunun onune gecip kendi efektini gosteriyor. */
body, #header, .navbar, footer{
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* View Transitions API'nin varsayilan "cross-fade" davranisini kapatiyoruz; JS tarafinda
   (index.php sonundaki script) switch'in tiklandigi noktadan baslayan ozel bir clip-path
   (dairesel/"kara delik") animasyonu bu pseudo-elementlere uygulanıyor. */
::view-transition-old(root),
::view-transition-new(root){
	animation: none;
	mix-blend-mode: normal;
}
::view-transition-old(root){
	z-index: 1;
}
::view-transition-new(root){
	z-index: 2;
}

/* Navbar'in en sagindaki dark/light switch butonu */
.nh-theme-switch-li{
	display: flex;
	align-items: center;
	margin-left: 14px;
}
.nh-theme-switch{
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	flex-shrink: 0;
	transition: border-color 0.25s ease, background-color 0.4s ease;
}
.nh-theme-switch:hover{
	border-color: #18aaa6;
}
.nh-theme-switch:focus-visible{
	outline: 2px solid #18aaa6;
	outline-offset: 2px;
}
.nh-theme-icon{
	position: absolute;
	font-size: 16px;
	transition: opacity 0.4s ease, transform 0.5s ease;
}
.nh-theme-icon-moon{
	color: #18aaa6;
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
.nh-theme-icon-sun{
	color: #f5a524;
	opacity: 0;
	transform: rotate(90deg) scale(0.4);
}
html[data-theme="light"] .nh-theme-icon-moon{
	opacity: 0;
	transform: rotate(-90deg) scale(0.4);
}
html[data-theme="light"] .nh-theme-icon-sun{
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
@media (max-width: 991.98px){
	.nh-theme-switch-li{
		padding: 10px 0;
		margin-left: 0;
	}
}
/**========================= END DARK/LIGHT TEMA SWITCH (round84) =========================**/

/* 2026-07-30 duzeltme (round35): kullanicinin "sayfada cogu yerin arkasi beyaz" tespiti
   canli sitede incelendi - gercek sebep bulundu: #main-slider'in kendi arka plan rengi
   (#eee, sayfa altinda tanimli - resim yuklenene kadar gorunen "flash" rengi) HIC dokunulmamisti;
   hero fotografinin hemen ALTINDAKI ozellik seridi karti (-70px negatif ust bosluk ile
   yukari tasip) bu #eee rengi bazi durumlarda (ör. kartin yuvarlatilmis koseleri, satir
   arasi kucuk bosluklar) araliktan gosteriyordu - kullanicinin gordugu "beyaz bant/bosluk"
   tam olarak buydu. Ayrica sayfanin GENEL (body) arka plani hic tanimlanmamisti; herhangi bir
   bolum disi bosluk/kenar da varsayilan olarak beyaz kaliyordu. Ikisi de artik koyu temaya
   cekildi - boylece anasayfanin HERHANGI bir noktasinda beyaz "sizinti" kalmiyor. */
body:has(#main-slider){
	background-color: var(--nh-bg);
}
#main-slider{
	background-color: var(--nh-dark) !important;
}

/* --- BREADCRUMB: baslik agirligini site geneliyle tutarli hale getir (ic sayfalar, degismedi) --- */
#breadcrumb h1{
	font-weight: 700;
}

/* --- Bolum basligi ustune kucuk, turkuaz, harf araligi acik "eyebrow" etiketi (referans
   tasarimdaki "Hakkimizda / Ne Yapiyoruz / Referanslar / Iletisim" kucuk ust etiketleri).
   anasayfa.php'de ilgili basliklarin hemen ustune eklendi. --- */
.section-eyebrow{
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #18aaa6;
}

/**====================== HEADER / NAV - TUM SAYFALAR ======================**/
/* Referans tasarimda navbar HER ZAMAN koyu + bulanik (blur) zeminde; sadece anasayfada,
   hero fotografinin uzerindeyken (sayfanin en basinda) tamamen seffaf baslayip slider
   bittiginde (JS'in ekledigi ".header-fixed" ile) bu koyu-bulanik hale geciyor. Ic
   sayfalarda zaten hero fotografi olmadigi icin navbar hep koyu baslıyor - eskiden hep
   BEYAZ olan #header artik hep KOYU. */
#top-header{
	background-color: var(--nh-dark) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#top-header:after{
	display: none;
}
#top-header .t-left-side li a{
	color: var(--nh-muted);
}
#top-header .t-left-side i{
	color: #18aaa6;
}
#top-header .t-left-side li:after{
	background-color: var(--nh-border);
}
#top-header .social-icons a{
	color: var(--nh-muted);
}
#top-header .social-icons a:hover i{
	color: #18aaa6;
}
#header{
	background-color: rgba(20, 22, 22, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* 2026-07-31 DUZELTME (round72): ic sayfalarda (anasayfa disi) "Kurumsal/Hizmetler/Projeler"
   acilir menuleri iceriklerinin yarim/eksik gorundugu bildirildi - kok neden: yukaridaki
   "backdrop-filter" #header icin YENI bir stacking context olusturuyor, ama #header'in kendi
   z-index'i "auto" oldugu icin bu context #breadcrumb (asagida, "position:relative; z-index:1"
   ile KENDI context'ini olusturan bolum) ile ayni ust seviyede karsilastirildiginda breadcrumb
   (gercek/pozitif z-index'i oldugu icin) ONUNE geciyor - acilir menunun kendi z-index:1000 degeri
   SADECE #header'in KENDI ic baglaminda gecerli oldugundan bu disaridaki yarisi etkilemiyor.
   Cozum: #header'a acik bir "position + z-index" vererek KENDI baglaminin butunuyle breadcrumb'in
   onune gecmesini sagliyoruz - acilir menu artik breadcrumb'in ARKASINDA kalmiyor.
   2026-07-31 DUZELTME #2 (round73) - ONEMLI: bu kural ilk halinde dogrudan "#header{...}" ID
   selector'unun ICINE eklenmisti (specificity 1,0,0). Bu, asagidaki ".header-fixed{ position:
   fixed; ... }" kuralinin (specificity sadece 0,1,0 - sade bir class) "position" degerini HER
   ZAMAN EZIYORDU - CID selector class selector'den DAIMA daha spesifik oldugu icin, dosyadaki
   siralamadan bagimsiz olarak. Sonuc: ic sayfalarda scroll ile ".header-fixed" class'i eklense
   bile #header ARTIK GERCEKTEN "position:fixed" OLAMIYORDU (relative'te kaliyordu) - navbar
   asagi inince hic sabitlenmiyordu (JS #header-spacer'a hala bosluk ekliyordu ama header aslinda
   yerinden hic ayrilmadigi icin bu bosluk FAZLADAN/hayalet bir bosluk oluyordu - kullanicinin
   bildirdigi "kisa sureli beyaz alan gorunup kayboluyor + navbar gelmiyor" sikayeti tam olarak
   buydu). Duzeltme: position/z-index'i SADECE ".header-fixed" class'i YOKKEN eslesen
   "#header:not(.header-fixed)" selector'una tasidik - boylece scroll ile ".header-fixed"
   eklendiginde bu kural hic eslesmiyor, asagidaki ".header-fixed{ position:fixed; z-index:999; }"
   kurali serbestce devreye giriyor ve navbar butun sayfalarda anasayfadaki gibi asagi
   kaydirinca animasyonla sabitleniyor. */
#header:not(.header-fixed){
	position: relative;
	z-index: 10;
}
.header-fixed{
	background-color: rgba(20, 22, 22, 0.92) !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 30px -10px rgba(0, 0, 0, 0.5);
}
#header .nav-link{
	color: rgba(237, 237, 237, 0.82);
}
#header .nav-link:hover{
	color: #18aaa6;
}
/* round87: navbar'in light moddaki hali YENIDEN yapildi. round86'da denenen soluk turkuaz
   "buzlu cam" tonu kullanici tarafindan begenilmedi ("daha once yaptigin gibi yapma, o
   guzel olmamisti"); bu kez navbar, sitenin geri kalanindaki TUM acik-mod kartlariyla
   (--nh-card) birebir ayni, sade/duz beyaz bir yuzeye donduruldu - boylece ayri bir "renk
   denemesi" gibi degil, sayfanin dogal, oturmus bir parcasi gibi duruyor.
   Anasayfada, sayfa en ustteyken (hero fotografinin uzerinde, henuz ".header-fixed"
   eklenmeden) navbar BILEREK "transparent" kaliyor (bkz. yukarida "body:has(#main-slider)
   #header{background-color:transparent}") - o yuzden asagidaki ilk kural SADECE bu durumu
   ("body:not(:has(#main-slider))") haric tutuyor. ".header-fixed" hali ise (anasayfada
   scroll sonrasi + TUM ic sayfalarda HER ZAMAN) kosulsuz olarak beyaza donuyor - round86'da
   unutulan, nav-link yazi rengine de ayni HARIC TUTMA kurali burada dogru sekilde eklendi. */
html[data-theme="light"] body:not(:has(#main-slider)) #header{
	background-color: var(--nh-card);
	border-bottom: 1px solid var(--nh-border);
	box-shadow: 0 6px 24px -16px rgba(20, 24, 24, 0.18);
}
html[data-theme="light"] .header-fixed{
	background-color: var(--nh-card) !important;
	border-bottom: 1px solid var(--nh-border) !important;
	box-shadow: 0 10px 30px -14px rgba(20, 24, 24, 0.2) !important;
}
/* round88 DUZELTME: anasayfada asagi kaydirinca navbar'in zemini (yukaridaki ".header-fixed"
   kurali sayesinde) dogru sekilde beyaza donuyordu, AMA yazi rengi hala eski/acik (rgba(237,
   237,237,.82)) kaliyordu - metin GORUNMUYORDU. Kok neden: asagidaki ".header-fixed .nav-link"
   kismi, temel "#header .nav-link" kuraliyla (yukarida, ID icerdigi icin specificity'si daha
   yuksek) ayni ozgullukte DEGILDI - CSS'te bir ID (#header) HER ZAMAN, kac tane class olursa
   olsun, ID'siz bir kuralı yener. "#header" ID'sini zincire (".header-fixed" ile AYNI elemente,
   yani #header'in kendisine) geri eklemek bu dengesizligi duzeltiyor - artik light modda HEM
   kaydirilmamis HEM kaydirilmis navbar durumunda yazi rengi dogru calisiyor. */
html[data-theme="light"] body:not(:has(#main-slider)) #header .nav-link,
html[data-theme="light"] #header.header-fixed .nav-link{
	color: var(--nh-fg);
}

#header .navbar-toggler{
	background-color: #18aaa6;
}
#header .navbar-toggler i{
	color: var(--nh-primary-fg);
}
#header .dropdown-menu{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.5);
}
#header .dropdown-menu .dropdown-item{
	color: var(--nh-muted);
}
#header .dropdown-menu .dropdown-item:hover, #header .dropdown.active .dropdown-menu .dropdown-item:hover{
	background-color: var(--nh-accent);
	color: #18aaa6;
	padding-left: 18px;
}
#header .dropdown.active .dropdown-menu a{
	color: var(--nh-muted);
}
/* 2026-07-30 (round38): kullanici yeni bir logo dosyasi ekledi (assets/images/icons/logo1.png,
   bkz. index.php) - eski logonun opak beyaz arka planini telafi eden "buyut+kirp" numarasi
   (210% zoom + negatif offset) YENI dosya icin gecerli/dogru olmayabilecegi icin tamamen
   kaldirildi. Artik resim "object-fit:contain" ile OLDUGU GIBI (kirpilmadan/bozulmadan) kutu
   icine sigdiriliyor.
   2026-07-30 DUZELTME (round39): kullanici yeni logonun arka planinin ZATEN seffaf oldugunu
   belirtti (ekran goruntusunde koyu navbar zeminiyle sorunsuz kaynasiyor) - round38'de "guvenli
   varsayilan" olarak eklenen beyaz yuvarlatilmis "chip" zemin (background-color/padding/
   border-radius/box-shadow) artik gereksiz ve kotu gorunuyor, tamamen kaldirildi; sadece logo
   gorseli gosteriliyor. Ayrica logo biraz buyutuldu (56px -> 76px yukseklik, 180px -> 220px
   max-genislik). Navbar'in kendi satir yuksekligi buyumesin diye: masaustunde (>=992px,
   asagidaki @media bloguna bakin) ".navbar-brand" zaten "position:absolute" ile normal akisin
   DISINDA, yani buradaki yukseklik degisikligi navbar satirini hic etkilemiyor. Mobilde ise
   ".navbar-brand" normal akista olsa da, "#header" kutusu sabit 96px yukseklikte (bkz. yukarida
   "#header{height:96px}") - 76px'lik logo bu sabit kutuya rahatca sigiyor, header'in kendi
   yuksekligi degismiyor. */
#header .navbar-brand{
	height: 76px;
	width: auto;
	background: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#header .navbar-brand img{
	width: auto;
	height: 100%;
	max-width: 220px;
	max-height: 100%;
	object-fit: contain;
}
@media (max-width: 991.98px){
	#header .navbar-collapse{
		background-color: var(--nh-card);
		border: 1px solid var(--nh-border);
		border-radius: 14px;
		padding: 10px 18px;
		margin-top: 10px;
		box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.5);
	}
	#header .navbar-collapse .nav-link{
		color: var(--nh-fg) !important;
	}
}

/* 2026-07-30 guncelleme (round36): kullanici referans tasarimdaki gibi TUM sayfalarda (sadece
   anasayfada degil) navbarin SOL menu / ORTADA logo / SAG menu+telefon-butonu seklinde 3 kolonlu
   olmasini istedi. Menu artik iki ayrı <ul> (nh-nav-left / nh-nav-right, bkz. index.php) - admin
   panelindeki TEK menu listesi ortadan ikiye bolunup buraya dagitiliyor (veri/siralama/dropdown
   mantigi degismedi, sadece gorsel yerlesim). Sadece masaustu (lg+) icin - mobilde navbar-collapse
   Bootstrap'in kendi acilir/kapanir mantigiyla, iki liste alt alta, oldugu gibi calismaya devam
   ediyor.
   2026-07-30 DUZELTME (round36-b): ilk denemede "display:grid + order + display:contents"
   kombinasyonu kullanilmisti, ama canli sitede test edilince tarayicinin "order" degerini
   navbar-collapse'in (display:contents olan) COCUKLARINA dogru uygulamadigi gorulduk - logo
   sona, telefon butonu ortaya kaymisti (istenmeyen sonuc). Bu guvenilmez teknik tamamen
   birakildi; yerine COK daha basit/saglam bir yontem kullanildi: iki menu <ul>'u normal bir
   flex satirinda (space-between ile) sol ve saga yaslanir - DOM'daki dogal sirasiyla (once sol
   ul, sonra sag ul), "order" gibi kirilgan bir ozelige hic ihtiyac kalmadan. Logo ise bu flex
   satirinin USTUNE, navbar'a gore ortalanmis "position:absolute" ile yerlestirilir - menu
   kolonlarindan tamamen bagimsiz, her zaman tam ortada. */
@media (min-width: 992px){
	/* Bootstrap'in ".container" sinifi lg/xl esiklerinde SABIT (~960px/1140px) genislik veriyor;
	   sol menu + sag menu + telefon butonu + ortadaki logo bu genislige gore biraz "sikisik"
	   kaliyor, logo bazen "İLETİŞİM" yazisinin/telefon pilinin uzerine biniyordu. Sadece
	   header'in kendi ic kutusu (sayfa icerigi degil) biraz genisletildi ki hepsi rahat sigsin. */
	#header .container{
		width: 94%;
		max-width: 1560px;
	}
	#header .navbar{
		position: relative;
	}
	#header .navbar-brand{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		z-index: 2;
	}
	#header .navbar-collapse{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
	}
	#header .navbar-collapse .nh-nav-left,
	#header .navbar-collapse .nh-nav-right{
		display: flex;
		align-items: center;
		margin: 0;
	}
	#header .navbar-collapse .nh-nav-right .menu-btn{
		margin: 0 0 0 8px;
	}
	/* 2026-07-30 (round49): kullanici sol/sag menu gruplarinin (ve sag gruba dahil olan telefon
	   butonunun, ayni <ul> icinde oldugu icin otomatik olarak birlikte hareket ediyor) ortadaki
	   logoya yaklasik 60px daha yakin olmasini istedi. Iki grup da "justify-content:space-between"
	   ile navbar-collapse'in sol/sag kenarina yaslaniyor - "margin-left"/"margin-right" ile bu
	   kenarlardan icine dogru sabit bir mesafe eklenip grup oldugu gibi (aralarindaki bosluklar
	   degismeden) merkeze doğru kaydiriliyor. Canli olcumle dogrulandi: her iki taraftaki bosluk
	   (grup ile logo arasi) tam 60px azaldi. */
	#header .navbar-collapse .nh-nav-left{
		margin-left: 60px;
	}
	#header .navbar-collapse .nh-nav-right{
		margin-right: 60px;
	}
}
/* 2026-07-30 (round47): kullanicinin istegiyle bu buton artik referans site goruntusundeki
   gibi KOYU ikon/yazi renginde (beyaz yerine). Ayrica gercek bir hata duzeltildi: bu buton
   bir <a class="btn btn-primary"> oldugu icin, genel ".btn-primary:focus/:active" kurali
   (bu dosyanin basinda) tiklaninca arka planini "renk2"ye ceviriyordu - butona tiklayip
   acilan "tel:" onay penceresini "iptal" ile kapatinca odak (focus) anchor uzerinde KALIYOR
   (tarayici bunu otomatik temizlemiyor), buton bu yuzden turkuaz yerine gri/renk2 renginde
   TAKILI kaliyordu. Asagidaki kural, SADECE bu telefon butonu icin, hover/focus/active
   durumlarinda da her zaman ayni turkuaz zeminde kalmasini saglayarak bu "takili kalma"
   gorunumunu tamamen ortadan kaldiriyor. */
#header .menu-btn a.btn-primary,
#header .menu-btn a.btn-primary:hover,
#header .menu-btn a.btn-primary:focus,
#header .menu-btn a.btn-primary:active,
#header .menu-btn a.btn-primary.focus{
	background-color: #18aaa6 !important;
	border-color: #18aaa6 !important;
	color: var(--nh-primary-fg) !important;
	/* 2026-07-30 (round48): kullanici numaranin yazisinin "cok ince" gorundugunu belirtti -
	   Bootstrap'in ".btn" kurali burada bir font-weight belirtmiyordu (varsayilan normal/400
	   agirlikta kaliyordu). Kalin yapildi. */
	font-weight: 700 !important;
}

/* ---- Navbar HER ZAMAN TEK SATIR (telefon/e-posta/sosyal medya icin ayri bir ust satir yok) ----
   2026-07-30 duzeltme (round35): referans tasarimda navbar HER ZAMAN TEK SATIR. Bizim eski
   kurulumumuzda #top-header (telefon/e-posta/sosyal ikonlar) ile #header (logo+menu) anasayfada
   USTUSTE İKİ AYRI KATMAN olarak (biri y=0, digeri y=44px'ten baslayarak) goruniyordu -
   kullanicinin "navbar hic aynı degil" tespitinin en buyuk sebeplerinden biri buydu. Once SADECE
   anasayfada gizlenmisti (ic sayfalarda - hizmetler, projeler, iletisim, hakkimizda vb. -
   dokunulmamisti, orada hala normal gorunuyordu).
   2026-07-30 DUZELTME (round71): kullanici bunun bir TUTARSIZLIK/sorun oldugunu belirtti - ic
   sayfalari da anasayfayla ayni koyu temaya gecirme calismasi kapsaminda, bu ust cubuk artik
   SITE GENELINDE (sadece anasayfada degil) gizleniyor - boylece TUM sayfalarda #header tek
   basina, y=0'dan baslayan tek satirlik navbar oluyor. */
#top-header{
	display: none;
}
body:has(#main-slider) #header{
	position: absolute;
	top: 0;
	left: 0; right: 0;
	z-index: 39;
	background-color: transparent;
	/* 2026-07-30 DUZELTME (round69): kullanici sayfa en ustteyken (henuz ".header-fixed"
	   eklenmeden) navbar ile hero fotografi arasinda HICBIR sinir gorunmedigini bildirdi -
	   referans site (Vercel demo) incelendi: oradaki navbar HER ZAMAN (scroll durumundan
	   bagimsiz) ince, yari saydam beyaz bir alt cizgiye sahip ("border-b border-white/10",
	   yani rgba(255,255,255,0.1) - getComputedStyle ile dogrulandi). Bizim sitede zaten
	   sayfanin GERI KALANINDA (ic sayfalar + anasayfada scroll sonrasi ".header-fixed" hali)
	   ayni mantikta bir "border-bottom: 1px solid rgba(255,255,255,0.08)" VARDI (yukarida,
	   satir ~2998) - ama SADECE anasayfanin EN USTTEKI (seffaf) hali bunu "transparent" ile
	   bilerek gizliyordu (round35, navbarin hic engellemeden hero fotografinin uzerinde
	   basmasi icin). Kullanicinin yeni istegi uzerine, zemin/blur AYNI SEKILDE seffaf/kapali
	   KALIYOR (o kismi degistirmedi) - sadece alt cizgi artik referanstakiyle ayni orandaki
	   rgba(255,255,255,0.12) rengiyle GORUNUR yapildi. */
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	height: auto;
	/* 2026-07-30 DUZELTME (round70): kullanici cizginin menu satirina gore fazla asagida
	   durdugunu, bunun navbari OLDUGUNDAN BUYUK gosterdigini bildirdi - kok neden: alt
	   padding ust padding ile AYNI (16px) idi, bu da menu satiriyla cizgi arasinda ~17px'lik
	   bos bir alan birakiyordu. Ust bosluk (logo/menu ile navbarin EN USTU arasi) AYNEN
	   korunuyor, SADECE alt bosluk (menu ile cizgi arasi) 16px'ten 8px'e indirildi - cizgi
	   artik menu satirina daha yakin, navbar daha "sik" (compact) gorunuyor. */
	padding: 16px 0 8px;
	transition: background-color 0.35s ease, padding 0.35s ease;
}
body:has(#main-slider) #header.header-fixed{
	position: fixed;
	top: 0;
	padding: 0px 0px;
}
/* 2026-07-30 (round36) notu: navbarin SOL/ORTA-logo/SAG 3 kolonlu grid duzeni artik SITE GENELINDE
   (anasayfaya ozel degil) uygulaniyor - bkz. asagida "HEADER / NAV - TUM SAYFALAR" bolumundeki
   "#header .navbar" grid kurali (round35'te burada sadece anasayfaya ozel, veri bolunmeden sadece
   logo ortalanan bir versiyon vardi; artik gercek sol/sag menu bolunmesiyle degistirildi). */

/**====================== HERO (ANASAYFA) ======================**/
/* Referans tasarimin ortalanmis hero duzeni: kucuk nokta+etiket rozeti, buyuk Sora basligi,
   aciklama, iki buton (Bize Ulasin + Projelerimiz), asagida daire iceren "asagi kaydir"
   ipucu. Slayt fotografinin ustundeki koyu gradyan da referanstaki koyu tonlara cekildi. */
#main-slider .carousel-item:before{
	background-image: linear-gradient(180deg, rgba(20, 22, 22, 0.82) 0%, rgba(20, 22, 22, 0.68) 45%, rgba(20, 22, 22, 0.92) 100%);
}
#carouselExampleIndicators .carousel-caption{
	/* 2026-07-30 DUZELTME (round69): kullanici hero yazisi/butonunun DIKEYDE VE YATAYDA tam
	   ortada olmadigini bildirdi - kok neden bulundu: bu kutu "left:50%; top:50%;
	   transform:translate(-50%,-50%)" ile ortalaniyordu, AMA slayt giris animasyonu
	   (asagida, ".carousel-item-next.carousel-item-left .carousel-caption" vb. kurallar)
	   AYNI ELEMANIN "transform" ozelligini KENDI "translateY(16px)/translateY(0)" giris
	   efekti icin YENIDEN KULLANIYORDU - CSS'te ayni ozellik iki kere tanimlanamaz, ikinci
	   (animasyon) kural HER ZAMAN kazanip ortalama transform'unu TAMAMEN SILIYORDU. Sonuc:
	   kutu, "left:50%"den sadece SAGA dogru (kendi genisligi kadar kaymadan) konumlaniyor,
	   yatayda tam ortadan hep sag tarafa kayik goruntuluyordu.
	   COZUM: yatay ortalama "left:0; right:0; margin:0 auto" (transform GEREKMEZ) ile,
	   dikey ortalama ise kutuyu ustten-alta (top:0;bottom:0) TAM YUKSEKLIGE yayip
	   icindeki icerigi "display:flex + justify-content:center" ile DUSEY ORTALAYARAK
	   yapiliyor. Boylece "transform" ozelligi tamamen serbest kaliyor, giris animasyonu
	   (translateY) ortalamayla hic catismiyor, hem yatayda hem dikeyde TAM ORTADA duruyor. */
	width: 100%;
	max-width: 760px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 20px;
}
#carouselExampleIndicators .carousel-caption .container{
	max-width: 100%;
	padding: 0;
}
/* 2026-07-30 (round52): kullanicinin istegiyle "Malatya'da 30+ Yıllık Güven" etiketi (hero-kicker)
   HTML'den (anasayfa.php) kaldirildiktan sonra buradaki ".hero-kicker"/".hero-kicker:before"
   kurallari da artik kullanilmadigi icin tamamen silindi. */
#carouselExampleIndicators h3{
	font-size: 3.4rem;
	line-height: 1.08;
	font-weight: 800;
	text-transform: none;
	letter-spacing: -0.5px;
	text-shadow: none;
}
/* Referans tasarimdaki iki renkli/iki satirli baslik: virgulden sonraki kisim turkuaz vurgu
   rengiyle gosterilir (bkz. anasayfa.php - nhHeroBaslik()). Virgul yoksa span hic olusmaz,
   baslik tek renkte (varsayilan beyaz) kalir. */
#carouselExampleIndicators h3 .hero-title-accent{
	color: #18aaa6;
}
/* round89 DUZELTME: kullanici, slider (hero) uzerindeki metin/sayi renklerinin acik
   (light) temaya gecince DEGISMEMESI gerektigini belirtti - bu icerik bir FOTOGRAFIN
   UZERINDE durdugu icin sayfa temasindan BAGIMSIZ olmali. Kok neden: asagidaki renk(ler)
   'var(--nh-muted)'/'var(--nh-fg)'/'var(--nh-border)' gibi TEMAYA GORE DEGISEN degiskenler
   kullaniyordu (bkz. 'DARK/LIGHT TEMA SWITCH' bolumu) - light modda bu degiskenler ACIK
   renklere donuyor, foto uzerindeki yazi/sayi neredeyse gorunmez hale gelebiliyordu. Cozum:
   bu deger(ler) koyu (dark) temadaki MEVCUT/DOGRU gorunumune SABIT (hardcoded) hex renk
   olarak kilitlendi - artik data-theme="light" olsa da hic degismiyor. */
#carouselExampleIndicators .carousel-caption p{
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	color: #9aa1a1; /* round89: sabit - artik temaya gore degismiyor */
	font-size: 17px;
	font-weight: 400;
}
#carouselExampleIndicators .carousel-caption .btn{
	margin: 6px;
}
/* round89 DUZELTME: kullanici, slider (hero) uzerindeki metin/sayi renklerinin acik
   (light) temaya gecince DEGISMEMESI gerektigini belirtti - bu icerik bir FOTOGRAFIN
   UZERINDE durdugu icin sayfa temasindan BAGIMSIZ olmali. Kok neden: asagidaki renk(ler)
   'var(--nh-muted)'/'var(--nh-fg)'/'var(--nh-border)' gibi TEMAYA GORE DEGISEN degiskenler
   kullaniyordu (bkz. 'DARK/LIGHT TEMA SWITCH' bolumu) - light modda bu degiskenler ACIK
   renklere donuyor, foto uzerindeki yazi/sayi neredeyse gorunmez hale gelebiliyordu. Cozum:
   bu deger(ler) koyu (dark) temadaki MEVCUT/DOGRU gorunumune SABIT (hardcoded) hex renk
   olarak kilitlendi - artik data-theme="light" olsa da hic degismiyor. */
.hero-btn-ghost{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 50px;
	/* 2026-07-30 duzeltme (round35): kullanici bu butonu referansla karsilastirinca "neredeyse
	   görünmez" buldu - kenarlik ve zemin opakligi biraz daha belirgin/dolgun hale getirildi
	   (referanstaki gibi daha "solid" gorunen bir hayalet/ghost buton). */
	border: 1.5px solid rgba(255, 255, 255, 0.38);
	background-color: rgba(255, 255, 255, 0.12);
	color: #ededed; /* round89: sabit - artik temaya gore degismiyor */
	font-size: 14px;
	font-weight: 700;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.25s ease;
}
.hero-btn-ghost:hover{
	color: #ededed; /* round89: sabit - artik temaya gore degismiyor */
	background-color: rgba(255, 255, 255, 0.22);
}
@media (max-width: 767.98px){
	#carouselExampleIndicators h3{
		font-size: 2.1rem;
	}
	#carouselExampleIndicators .carousel-caption p{
		font-size: 15px;
	}
}

/* --- HERO: asagi kaydir ipucu - referanstaki gibi daire cerceveli buton --- */
.hero-scroll-cue{
	position: absolute;
	left: 50%;
	bottom: 30px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: rgba(237, 237, 237, 0.85);
	font-size: 16px;
	/* 2026-07-30 duzeltme (round38): kullanici "ok tiklanınca calismiyor" dedi - canli sitede
	   teshis edildi: #what-we-do (ozellikler seridi karti) -70px negatif ust boslukla hero'nun
	   ALT KISMININ UZERINE biniyor VE z-index:20 ile bu okun z-index:5'inin USTUNDE duruyordu -
	   yani ok gorunse de asagidaki kart tiklamalari yutuyordu (elementFromPoint testiyle dogrudan
	   dogrulandi). z-index artik 20'nin ustunde, boylece ok gercekten tiklanabiliyor. */
	z-index: 25;
	cursor: pointer;
	pointer-events: auto;
	animation: heroScrollBounce 1.8s ease-in-out infinite;
}
.hero-scroll-cue:hover{
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}
@keyframes heroScrollBounce{
	0%, 100%{ transform: translate(-50%, 0); }
	50%{ transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce){
	.hero-scroll-cue{ animation: none; }
}

/**====================== FEATURES SERIDI (#what-we-do) ======================**/
/* Referans tasarimdaki "Features" seridi: koyu kart zemininde 4 esit kutu, hero'nun alt
   kenariyla bir miktar bindirilmis (negatif ust bosluk), hover'da hafif vurgu. anasayfa.php
   uzerinde kartlar artik col-lg-3 (4'lu tek sira). */
body:has(#main-slider) #what-we-do{
	position: relative;
	z-index: 20;
	margin-top: -70px;
	/* 2026-07-30 (round42): kullanici hero(slider) ile bu kutu, ve bu kutu ile Hakkimizda
	   fotografi arasindaki iki boslugun TAM ESIT (20px) olmasini istedi. Ust bosluk =
	   margin-top(-70px) + padding-top; canli sitede olculdu, tam 20px icin padding-top:90px
	   gerekiyordu (eskiden buraya ozel bir deger verilmemisti, sayfa disi/varsayilan
	   kuraldaki 80px kullaniliyordu - bu da ~10px'lik bir bosluk veriyordu).
	   2026-07-30 DUZELTME (round43): kullanici 20px'i biraz az buldu, 50px istedi. Ayni
	   formul (margin-top -70px + padding-top): 50px bosluk icin padding-top = 120px.
	   2026-07-30 DUZELTME (round44): kullanici 50px'i biraz daha arttirdi, 70px istedi.
	   70px bosluk icin padding-top = 140px. */
	padding-top: 160px;
	/* 2026-07-30 DUZELTME (round63): kullanici butun anasayfadaki bolum aralarinin ESIT
	   olmasini istedi - detayli inceleme sonucu ust-ust hicbir bolumun aralik degeri ayni
	   degildi (70px'ten 210px'e kadar degisiyordu). Ust taraftaki -70px/140px kombinasyonu
	   (hero'nun UZERINE bindirilmis kart efekti icin, round42-44'te ozel olarak ayarlandi)
	   OLDUGU GIBI KORUNDU - bu farkli bir gorsel efekt (ortusme), "bolumler arasi bosluk"
	   degil. Sadece alt padding (0 idi) diger TUM bolumlerin kullandigi standart "100px"e
	   getirildi - boylece "#what-we-do -> #who-we-are" araligi da (asagida who-we-are'in ust
	   paddingi de 100px yapildi) tam olarak diger butun bolum ciftleriyle AYNI (200px) oldu. */
	padding-bottom: 70px;
	background: transparent;
}
body:has(#main-slider) #what-we-do .container > .row{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 20px;
	box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.55);
	overflow: hidden;
	/* 2026-07-30 (round41): round40'ta "tam tamına 4'e bolunsun" icin kartlar birbirine sifir
	   boslukla bitistirilmis, kart koseleri de kare (border-radius:0) yapilmisti - ama bu
	   sefer kullanici hover vurgusunun KOSELERININ yuvarlatilmis olmasini istedi ("o secili
	   kisma radius ver"). Iki istegi bir arada karsilamak icin CSS Grid'e gecildi: sabit,
	   kucuk ve ESIT bir "gap" (12px) ile 4 kutu hala matematiksel olarak tam esit genislikte
	   (grid-template-columns: repeat(4, 1fr)) ama artik aralarinda ince, simetrik bir bosluk
	   var ve her kartin kendi kosesi yuvarlatilabiliyor (asagida .card icinde border-radius
	   geri eklendi). 992px alti (tablet) 2'li, 576px alti (mobil) tek sutuna dusuyor - Bootstrap'in
	   eski col-lg-3/col-sm-6 davranisiyla ayni kirilma noktalari. */
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	padding: 14px;
	align-items: stretch;
}
@media (max-width: 991.98px){
	body:has(#main-slider) #what-we-do .container > .row{
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 575.98px){
	body:has(#main-slider) #what-we-do .container > .row{
		grid-template-columns: repeat(1, 1fr);
	}
}
body:has(#main-slider) #what-we-do .container > .row > div{
	padding-left: 0;
	padding-right: 0;
	width: auto;
	max-width: none;
}
body:has(#main-slider) #what-we-do .card{
	background: transparent;
	box-shadow: none;
	border: none;
	/* 2026-07-30 (round41): kartlar artik birbirine bitisik degil (yukaridaki "gap:12px"e
	   bakin), bu yuzden hover vurgusunun kendi kosesi rahatlikla yuvarlatilabiliyor - artik
	   komsu kartla cakismiyor. */
	border-radius: 14px;
	height: 100%;
	/* 2026-07-30 duzeltme (round35): bu kartlarin HTML'inde Bootstrap'in ".p-2" utility sinifi
	   da var (anasayfa.php'de "card whatwedo-card-1 p-2" vb.) - Bootstrap'in kendi ".p-2" kurali
	   "!important" kullandigi icin bizim (o zamana kadar !important'siz) 26px/24px kuralımızı
	   eziyor, kart ici bosluk canli sitede gercekte ~7px kaliyordu. !important eklenerek
	   kazandirildi. */
	padding: 26px 24px !important;
	margin-bottom: 0;
	margin-top: 0;
	transition: background-color 0.25s ease;
}
body:has(#main-slider) #what-we-do .card:hover{
	background-color: rgba(255, 255, 255, 0.04);
	transform: none;
	/* 2026-07-30 (round40): eski/varsayilan "#what-we-do .card:hover" kurali (yukarida, bu
	   dosyanin basinda, anasayfa disi sayfalar icin) "margin-top:-10px" iceriyordu - bu
	   ozellik burada override edilmemisti, yani anasayfada hover'da kart 10px yukari
	   kayiyor, bu da vurgu alaninin kutunun geri kalanindan kopuk/kaymis gorunmesine sebep
	   oluyordu. Burada acikca "margin-top:0" ile iptal edildi. */
	margin-top: 0;
	border-bottom: none;
	box-shadow: none;
}
body:has(#main-slider) #what-we-do .card i{
	width: 56px;
	height: 56px;
	font-size: 22px !important;
	border-radius: 14px;
	background-color: var(--nh-accent);
	color: #18aaa6 !important;
	margin-bottom: 16px !important;
	margin-top: 0 !important;
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.25s ease, color 0.25s ease;
}
body:has(#main-slider) #what-we-do .card:hover i{
	background-color: #18aaa6;
	color: var(--nh-primary-fg) !important;
	/* 2026-07-30 (round40): kullanici ikon animasyonunun eski/orijinal sitedeki gibi
	   (buyume + hafif saat-yonu-tersi donme) olmasini istedi - "transform:none" bunu iptal
	   ediyordu, orijinal "#providing .card:hover i" kuraliyla (asagida, bu dosyanin
	   basinda) AYNI deger kullanildi. */
	transform: rotate(-8deg) scale(1.08);
}
body:has(#main-slider) #what-we-do .card h4{
	color: var(--nh-fg);
	font-size: 17px;
	margin-bottom: 8px;
}
body:has(#main-slider) #what-we-do .card .head-after:before{
	display: none;
}
body:has(#main-slider) #what-we-do .card .satir{
	color: var(--nh-muted);
	font-size: 13px;
	line-height: 22px;
	margin-bottom: 0;
}

/**====================== HAKKIMIZDA ICERIK BLOGU - TUM SAYFALAR (round71) ======================**/
/* 2026-07-30 (round71): "#who-we-are" bileseni (foto + "Hakkımızda"/Misyonumuz/Vizyonumuz metni)
   sadece anasayfada DEGIL, "/icerik/hakkimizda" (Kurumsal > Hakkımızda) sayfasinda da AYNI
   HTML/class yapisiyla tekrar kullaniliyor (CMS'in "sayfalar.php" sablonu ayni bilesenle
   render ediyor). Ama koyu tema kurallari eskiden SADECE "body:has(#main-slider)" ile
   (yani sadece anasayfada) uygulanmisti - bu yuzden Hakkımızda sayfasinda bu blok hala eski
   ACIK/beyaz temada kalmisti (kullanicinin bildirdigi asil sorun). Asagidaki kurallar artik
   HICBIR SEKILDE anasayfaya ozel degil (":has(#main-slider)" ON-EKI YOK) - boylece TUM
   sayfalarda ayni koyu gorunum uygulaniyor. Ust/alt bosluk da (100px/100px) hero'yla ilgili
   ozel bir bindirme/hizalama gerektirmeyen, STANDART/simetrik bir bolum araligi - anasayfaya
   ozel "padding-top:20px" degeri ise ASAGIDA, daha spesifik ".body:has(#main-slider) #who-we-are"
   kuraliyla (specificity'si daha yuksek oldugu icin) hala SADECE anasayfada geçerli kalıyor. */
#who-we-are{
	background-color: var(--nh-bg);
	padding: 100px 0px 100px;
}
#who-we-are .head-after{
	color: var(--nh-fg);
}
#who-we-are p, .about-us-content p{
	color: var(--nh-muted);
}
.img-bg-2{
	display: none;
}
.img-bg-1{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.55);
}
.img-bg-1:before{
	display: none;
}
.img-bg-1 img{
	border-radius: 0;
	border-bottom: none;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.about-badge{
	position: absolute;
	right: -14px;
	bottom: -18px;
	z-index: 3;
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	padding: 18px 26px;
	border-radius: 16px;
	box-shadow: 0 18px 35px -12px rgba(0, 0, 0, 0.5);
	text-align: left;
}
.about-badge strong{
	display: block;
	font-family: 'Sora', sans-serif;
	font-size: 2rem;
	line-height: 1;
	font-weight: 800;
	color: #fff;
}
.about-badge span{
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
	color: #fff;
}
.about-us-content h3:not(.head-after){
	color: var(--nh-fg);
	border-left: 3px solid #18aaa6;
	padding-left: 14px;
}

/**====================== HAKKIMIZDA (#who-we-are) - SADECE ANASAYFA (hero'ya gore bosluk) ======================**/
body:has(#main-slider) #who-we-are{
	background-color: var(--nh-bg);
	/* 2026-07-30 (round40): ust bosluk 130px'ten kullanici geri bildirimiyle kucultuldu -
	   #what-we-do kutusu hero'nun ustune -70px ile bindigi icin slider'a "cok yakin"
	   duruyordu, ama buradaki 130px'lik bosluk yuzunden Hakkimizda fotografiyla arasi
	   asiri aciliyordu (dengesiz gorunum). Iki bosluk birbirine yaklastirildi.
	   2026-07-30 DUZELTME (round41): kullanici "hala esit degil" dedi - canli sitede
	   sayfa kaydirma/"reveal" animasyonlari devre disi birakilip GERCEK (son) konumlar
	   olculdu: hero altiyla ozellikler kutusu arasi sadece ~10px iken, 30px'te bile
	   ozellikler kutusuyla Hakkimizda fotografi arasi ~58px cikiyordu (video-btn kutusunun
	   kendi iki katmanli foto efekti ~28px'lik sabit bir ek bosluk katiyor, bu fotograf
	   efektinin kendisi - kaldirilmadi/degistirilmedi). Ust bosluk tamamen kaldirilarak
	   (0px) bu ek bosluk ~28px'e indi, artik ustteki ~10px'e cok daha yakin.
	   2026-07-30 DUZELTME (round42): kullanici net bir sayi verdi - "ikisine de esit bosluk
	   ver, sliderin 20px altinda, hakkimizda da bunun 20px altinda olsun". Gercek masaustu
	   genislikte (992px+, onceki olcumler dar/tablet genislikte yapilmisti ve o genislikte
	   bu ek "video-btn" bosluğu farkli cikiyordu) yeniden olculdu: bu genislikte ek bosluk
	   sifira yakin cikiyor, yani ust bosluk (0px) dogrudan ~0px'lik bir alt bosluk veriyordu.
	   Tam 20px icin ust bosluk 20px'e cikarildi (yukaridaki #what-we-do'nun padding-top:90px
	   degisikligiyle birlikte, iki taraf da canli sitede TAM 20px olarak dogrulandi).
	   2026-07-30 DUZELTME (round43): kullanici 20px'i az buldu, 50px istedi.
	   2026-07-30 DUZELTME (round44): kullanici 50px'i biraz daha arttirdi, 70px istedi.
	   2026-07-30 DUZELTME (round63): kullanicinin YENI ve daha genel talebi ("butun bolumler
	   arasi bosluk ESIT olsun") uzerine, bu bolumun ust paddingi de diger TUM bolumlerin
	   kullandigi standart "100px"e getirildi (once 70px'ti - #what-we-do'nun alt paddingi 0
	   oldugu icin bu ikisinin TOPLAMI sadece 70px'lik bir aralik veriyordu, digerlerinde ise
	   iki taraf da katkida bulunuyor ve toplam ~180-210px oluyordu). Simdi #what-we-do'nun alt
	   paddingi de 100px yapildiginda (yukarida), bu cift de TAM 200px oluyor - butun diger
	   ciftlerle ayni. */
	padding: 20px 0px 100px;
}
body:has(#main-slider) #who-we-are .head-after{
	color: var(--nh-fg);
}
body:has(#main-slider) #who-we-are p, body:has(#main-slider) .about-us-content p{
	color: var(--nh-muted);
}
/* Referans tasarimda tek, sade, yuvarlatilmis bir fotograf var (bizim ikili "img-bg-1 +
   img-bg-2" kolaj efektimiz yerine) - ikinci fotograf anasayfada gizleniyor, ilki tek basina
   ve "30+ Yillik Tecrube" rozetiyle (mevcut sayac verisinden, ayni kaynaktan) sunuluyor. */
body:has(#main-slider) .img-bg-2{
	display: none;
}
body:has(#main-slider) .img-bg-1{
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.55);
}
/* 2026-07-30 (round45): kullanici "Hakkimizda" fotografinin uzerinde orijinal resimde
   olmayan bir renk/ton oldugunu bildirdi - bu, fotografi koyu/teal bir tona boyayan
   ":before" katmanindan (mix-blend-mode:color ile) kaynaklaniyordu. Kaldirildi, artik
   fotograf kendi orijinal renkleriyle gorunuyor. */
body:has(#main-slider) .img-bg-1:before{
	display: none;
}
body:has(#main-slider) .img-bg-1 img{
	border-radius: 0;
	border-bottom: none;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
body:has(#main-slider) .about-badge{
	position: absolute;
	right: -14px;
	bottom: -18px;
	z-index: 3;
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	padding: 18px 26px;
	border-radius: 16px;
	box-shadow: 0 18px 35px -12px rgba(0, 0, 0, 0.5);
	text-align: left;
}
body:has(#main-slider) .about-badge strong{
	display: block;
	font-family: 'Sora', sans-serif;
	font-size: 2rem;
	line-height: 1;
	font-weight: 800;
	/* 2026-07-30 (round52): kullanicinin istegiyle bu rozetin metni ("30+ Yıllık Tecrübe") beyaz
	   yapildi - ust ".about-badge" kuralindaki "color: var(--nh-primary-fg)" (koyu, #06201f)
	   bu iki elemanda (strong/span) burada dogrudan ezilerek beyaza cevrildi; "--nh-primary-fg"
	   degiskeninin kendisi degistirilmedi (telefon butonu gibi diger yerlerde hala kullaniliyor). */
	color: #fff;
}
body:has(#main-slider) .about-badge span{
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.85;
	color: #fff;
}
/* Misyonumuz/Vizyonumuz basliklari (admin panelinden girilen zengin metin icindeki h3'ler) */
body:has(#main-slider) .about-us-content h3:not(.head-after){
	color: var(--nh-fg);
	border-left: 3px solid #18aaa6;
	padding-left: 14px;
}

/**====================== SAYAÇ / ISTATISTIK (#counter) ======================**/
/* 2026-07-30 DUZELTME (round63): "butun bolumler arasi bosluk esit olsun" talebi uzerine ust/alt
   padding diger butun bolumlerin standardi olan 100px/100px'e getirildi (once 90px/110px'ti).
   ONEMLI: alt padding degisince, ".counter-img img"in "bottom:-110px" degeri de (asagida,
   round49'da #counter'in O ZAMANKI 110px alt paddingine gore hesaplanmisti) YENI 100px'e uyacak
   sekilde "bottom:-100px" olarak GUNCELLENDI - yoksa resim artik #counter'in gercek alt
   kenariyla tam hizali olmayip 10px kisa kalirdi (round49'daki duzeltme bozulurdu). */
body:has(#main-slider) #counter{
	padding: 100px 0px 100px;
}
body:has(#main-slider) .counter-bg:after{
	background-color: var(--nh-dark);
	background-image: none;
	opacity: 0.92;
}
#counter .counter-col:after{
	background-color: rgba(255, 255, 255, 0.15);
}
#counter .timer{
	font-family: 'Sora', sans-serif;
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -1px;
	font-variant-numeric: tabular-nums;
	color: #18aaa6;
}
#counter h4{
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 600 !important;
	color: var(--nh-muted);
	opacity: 1;
}
#counter .counter-col i{
	color: #18aaa6 !important;
}
#counter .counter-img img{
	-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 38%);
	mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 38%);
	/* 2026-07-30 duzeltme (round41): "filter:drop-shadow(...)" burada kaldirildi - kullanici
	   adamin arkasinda "dikdortgen seklinde transparan bir kutu" belirdigini bildirdi.
	   Kok neden: kaynak fotograf muhtemelen duz/opak bir dikdortgen (kenarlari seffaf bir
	   "cutout" degil), sadece yukaridaki mask-image ile ALT %38'i eritiliyor - geri kalan
	   (fotografin ust/yanlari hala tam opak dikdortgen) kismi icin drop-shadow, o dikdortgen
	   seklin etrafinda yumusak ama fark edilir bir "kutu" golgesi olusturuyordu. Golge
	   kaldirildi, alttaki eritme (mask) efekti korundu. */
	/* 2026-07-30 (round49): kullanici adamin resmini TAM alt cizgiye kadar indirmek ve biraz
	   buyutmek istedi. Resim "position:absolute" ile en yakin "position:relative" olan atasi
	   ".counter-col"e gore konumlaniyor - bu kolon SADECE satirin (row) kendi yuksekligi kadar
	   (kisa, sayac metinleriyle ayni boy), oysa "#counter"in kendisi altta ayrica 110px
	   padding ekliyor (yukarida "body:has(#main-slider) #counter{padding:...110px}"). Yani
	   "bottom:0" aslinda kolonun alt kenariyla hizaliydi, #counter'in GERCEK alt kenarinin
	   110px USTUNDE kaliyordu (canli olcumle dogrulandi: iki kenar arasinda tam 110px bosluk
	   vardi - kullanicinin "hala alt cizgiye degmiyor" sikayetinin kok nedeni buydu). Bu
	   sayfada ("#counter" sadece anasayfada kullaniliyor) "bottom:-110px" ile resim artik
	   #counter'in gercek alt cizgisine tam degiyor. Genislik de kullanicinin istegiyle
	   160px -> 190px yapilarak resim biraz buyutuldu.
	   2026-07-30 DUZELTME (round63): "#counter"in alt paddingi butun bolumlerle esitlemek icin
	   110px'ten 100px'e indirildi (yukarida) - bu yuzden resmin "bottom" degeri de AYNI ORANDA
	   "-100px"e guncellendi ki resim GENE #counter'in (artik degisen) gercek alt cizgisine tam
	   otursun, yoksa 10px kisa kalir/tekrar bosluk acilirdi. */
	bottom: -100px;
	width: 190px;
}
/* round93 DUZELTME: light modda #counter (Mutlu Musteri/sayac) bolumunun sag
   tarafindaki adam fotografinin ALT kismi asiri beyaz/soluk gorunuyordu. Kok neden:
   yukaridaki mask-image resmin alt yuzde 38'ini seffafliga dogru eritiyor - bu deger
   dark moddaki koyu zemine gore ayarlanmisti (eriyen kisim koyu zeminle uyumlu/goze
   batmiyor). Light modda zemin acik renge donustugu icin (.counter-bg:after artik
   acik var(--nh-dark) kullaniyor) ayni genis eritme alani artik acik/beyazimsi bir
   leke gibi goze carpiyor. Dark moddaki kurala dokunmadan, SADECE light mod icin
   eritme alani yuzde 38'den yuzde 18'e dusuruldu (resmin daha az kismi seffaflasiyor)
   boylece beyazlik/soluma azaltildi, resmin altinin tamamen erimesi onlendi. */
html[data-theme="light"] #counter .counter-img img{
	-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
	mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%);
}

/**====================== HIZMET ALANLARIMIZ (#providing) ======================**/
body:has(#main-slider) #providing{
	/* 2026-07-30 DUZELTME (round67): kullanicinin talebi uzerine bu bolumun zemini artik
	   "--nh-bg" (#1a1c1c) yerine "--nh-bg-alt" (#1e2121) kullaniyor - komsu bolumlerden
	   (Ne Yapiyoruz/Hakkimizda: #1a1c1c, Son Projelerimiz: #1a1c1c) hafifce ayrisan bir zemin
	   tonu, referans siteki seritli goruntuye benzer sekilde. */
	background-color: var(--nh-bg-alt);
	/* 2026-07-30 DUZELTME (round63): alt padding, butun bolumler arasi bosluğu esitlemek icin
	   80px'ten 100px'e cikarildi (standart deger). */
	padding: 100px 0px 100px;
	text-align: left;
}
body:has(#main-slider) #providing .head-after{
	color: var(--nh-fg);
}
body:has(#main-slider) #providing .card{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 20px;
	box-shadow: none;
	text-align: left;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body:has(#main-slider) #providing .card:hover{
	transform: translateY(-6px);
	border-color: rgba(24, 170, 166, 0.4);
	box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
}
body:has(#main-slider) #providing .card i{
	width: 64px;
	height: 64px;
	/* 2026-07-30 (round41): admin panelinden gelen ikon siniflarinin (fas fa-paw, fa-tractor,
	   fa-ruler-combined, far fa-building vb.) hepsinde HTML'de "fa-5x" utility sinifi da var
	   (bkz. anasayfa.php - "<i class=\"...ikon... fa-5x\"></i>"), bu da glif boyutunu ~70px
	   yapiyordu - ama kutu sadece 64px'ti. Kullanici bunu "ikon buyuyunce kutunun icine
	   sigmiyor, daha buyuk gorunuyor" ve "hover'da renkten dolayi bir ikon gorunmuyor" olarak
	   bildirdi: aslinda AYNI kokten iki belirti - tasan kisim kutunun disina, koyu kart
	   zeminine tasiyordu, hover'da ikonun rengi de koyu (--nh-primary-fg) oldugu icin o tasan
	   kisim koyu zeminde neredeyse gorunmez oluyordu. "#what-we-do" bolumundeki ayni desen
	   (56px kutu icin 22px font-size) ile AYNI orantida (kutu*0.4) acik bir font-size
	   verilerek glif artik kutunun icine tam sigiyor. */
	font-size: 26px !important;
	border-radius: 16px;
	background-color: var(--nh-accent);
	color: #18aaa6 !important;
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.25s ease, color 0.25s ease;
}
body:has(#main-slider) #providing .card:hover i{
	background-color: #18aaa6;
	color: var(--nh-primary-fg) !important;
	/* 2026-07-30 (round40): kullanici "Hizmet Alanlarimiz" ikonlarinin da eski/orijinal
	   sitedeki gibi buyuyup hafif saat-yonu-tersi donmesini istedi - "transform:none" bu
	   animasyonu iptal ediyordu, orijinal "#providing .card:hover i" kuraliyla (bu
	   dosyanin basinda) AYNI deger kullanildi. */
	transform: rotate(-8deg) scale(1.08);
}
body:has(#main-slider) #providing .card h3{
	color: var(--nh-fg);
	font-size: 19px;
}
body:has(#main-slider) #providing .card p{
	color: var(--nh-muted);
}

/**====================== SON PROJELERIMIZ (#projects) - yeni statik kart grid ======================**/
/* Referans tasarimdaki gibi hover-overlay yerine, resmin ALTINDA daima gorunen icerik +
   resmin uzerinde sol-ust kategori rozeti. anasayfa.php'de .grid/.grid-effect yerine yeni
   .project-card yapisi kullanildi (diger sayfalardaki eski .grid/.grid-effect kullanimlarina
   dokunulmadi). */
body:has(#main-slider) #projects.projects-bg{
	background-image: none;
	background-color: var(--nh-bg);
}
body:has(#main-slider) #projects.projects-bg:after{
	display: none;
}
body:has(#main-slider) #projects.projects-bg h1{
	color: var(--nh-fg);
}
body:has(#main-slider) #projects{
	padding: 20px 0px 100px;
}
.project-card-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0 15px;
}
@media (max-width: 991.98px){
	.project-card-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
	.project-card-grid{ grid-template-columns: 1fr; }
}
.project-card{
	display: block;
	border-radius: 18px;
	overflow: hidden;
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.55);
}
.project-card-media{
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.project-card-media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.project-card:hover .project-card-media img{
	transform: scale(1.06);
}
.project-card-tag{
	position: absolute;
	left: 16px;
	top: 16px;
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 5px 14px;
	border-radius: 30px;
}
.project-card-body{
	padding: 22px 24px;
}
.project-card-loc{
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--nh-muted);
}
.project-card-body h2{
	margin: 8px 0 0;
	font-size: 19px;
	color: var(--nh-fg);
}
.project-card-body p{
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 22px;
	color: var(--nh-muted);
}
.project-card-more{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	padding: 11px 22px;
	border-radius: 50px;
	border: 1px solid var(--nh-border);
	color: var(--nh-fg);
	font-size: 13px;
	font-weight: 700;
	transition: background-color 0.25s ease;
}
.project-card-more:hover{
	color: var(--nh-fg);
	background-color: rgba(255, 255, 255, 0.06);
}
.projects-heading-row{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

/**====================== MUSTERI YORUMLARI (#happy-clients) - yeni statik kart grid ======================**/
/* 2026-07-30 DUZELTME (round60): kullanicinin gonderdigi referans tasarimla "birebir ayni" olmasi
   istendi. Uc kok sorun/fark bulundu ve asagida duzeltildi:
   1) ARKA PLAN RENKLERI TERSTI: bolum zemini (".happy-clients-bg") daha ACIK olan "--nh-card"
      rengini, kart ici ise daha KOYU olan "--nh-bg" rengini kullaniyordu - bu, sitenin geri kalaninda
      (ör. "#providing .card") kullanilan "zemin=koyu / kart=acik (yukselmis kart hissi)" kuraliyla
      ZITTI ve referans tasarimdaki (kartlar zeminden daha acik/yukselmis gorunuyor) haliyle de
      UYUMSUZDU. Simdi digerleriyle TUTARLI hale getirildi: zemin=var(--nh-bg), kart=var(--nh-card).
   2) KART ICI "ISIM" BOLUMU SABIT DEGILDI: yorum metni kisa oldugunda (ör. "mükemmel") kartin
      alt kismindaki avatar/isim/meslek satiri, metnin hemen altina yapisip kaliyordu; kart Grid
      satirindaki en uzun kartla ayni yukseklige gelse bile (varsayilan "align-items:stretch"), ISIM
      BOLUMU o bosluga gore ASAGI KAYMIYORDU. Simdi ".testimonial-card" flex-column yapildi ve
      ".testimonial-foot" e "margin-top:auto" verildi - boylece metin ne kadar kisa/uzun olursa olsun
      isim bolumu HER ZAMAN kartin en altina sabitleniyor. */
body:has(#main-slider) .happy-clients-bg{
	background-image: none;
	/* 2026-07-30 DUZELTME (round67): kullanicinin talebi uzerine bu bolumun zemini de
	   "--nh-bg-alt" (#1e2121) oldu - Son Projelerimiz (#1a1c1c) ile Biz Sizi Arayalim
	   (#1a1c1c) arasinda referans siteki gibi hafif bir zemin farki yaratiyor. */
	background-color: var(--nh-bg-alt);
}
body:has(#main-slider) .happy-clients-bg:after{
	display: none;
}
body:has(#main-slider) #happy-clients .head-after{
	color: var(--nh-fg);
}
/* 2026-07-30 DUZELTME (round66): kullanici round60'taki ORTALI baslik + kartlarin ALTINDA ortali
   buton duzenini istemedi ("buton altta guzel durmadi") - "Son Projelerimiz" bolumundeki gibi
   baslik SOLA, buton AYNI SATIRDA SAGA alindi (anasayfa.php'de artik ".projects-heading-row"
   AYNEN yeniden kullaniliyor, ozel bir ".testimonial-heading" sarmalayicisina gerek kalmadi).
   Bu yuzden yukaridaki gecici merkezleme kurali kaldirildi, kucuk turkuaz alt cizgi
   (".head-after:before") de ARTIK BASKA BIR SEY ILE EZILMIYOR - "Son Projelerimiz" basligindaki
   gibi normal sekilde gorunuyor. */
.testimonial-subtitle{
	margin: 14px 0 0;
	color: var(--nh-muted);
	font-size: 15px;
	line-height: 26px;
}
body:has(#main-slider) #happy-clients{
	padding: 20px 0px 100px;
}
.testimonial-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	padding: 0 15px;
}
@media (max-width: 991.98px){
	.testimonial-grid{ grid-template-columns: 1fr; }
}
.testimonial-card{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 20px;
	padding: 30px;
	text-align: left;
	min-height: 0;
	/* 2026-07-30 DUZELTME (round61): kullanici 3 kutunun GENISLIGININ ayni olmadigini bildirdi -
	   kok neden: CSS Grid'de "1fr" sutunlar esit olsa bile, grid ogelerinin varsayilan
	   "min-width:auto" degeri, ICERIDEKI EN UZUN BOLUNEMEYEN KELIME kadar bir minimum genislik
	   dayatiyor. 1. karttaki yorum metninde bosluksuz cok uzun bir kelime var
	   ("sjkdfhsjkdfhjksdhgsjdbjsdfhjsddkfkhhsdfhjksdf") - bu tek kelime, o kartin sutununu
	   digerlerinden DAHA GENIS olmaya zorluyordu. "min-width:0" ile grid ogesinin kendi icerigine
	   gore genisleme zorunlulugu kaldirildi, uzun kelimenin sarilmasi (asagida ".testimonial-quote"
	   "overflow-wrap") ile birlikte artik butun kartlar HER ZAMAN esit genislikte. */
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.testimonial-card:before{
	content: none !important;
}
.testimonial-stars{
	color: #18aaa6;
	font-size: 14px;
	letter-spacing: 3px;
	margin: 14px 0 0;
}
.testimonial-quote{
	margin: 16px 0 0;
	color: var(--nh-muted);
	font-size: 14px;
	line-height: 24px;
	font-style: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}
.testimonial-foot{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--nh-border);
}
.testimonial-avatar{
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--nh-accent);
	color: #18aaa6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 14px;
}
.testimonial-name{
	display: block;
	color: var(--nh-fg);
	font-weight: 600;
	font-size: 14px;
}
.testimonial-role{
	display: block;
	color: var(--nh-muted);
	font-size: 12px;
	font-style: italic;
}
/* 2026-07-30 DUZELTME (round66): ".testimonial-more-wrap" artik KULLANILMIYOR - "Tüm Yorumlar"
   butonu round60'ta kartlarin ALTINDA ayri bir sarmalayici icinde ortalanmisti, round66'da ise
   basligin YANINA (".projects-heading-row" icine, "Son Projelerimiz" ile ayni satira) tasindigi
   icin bu kurala artik gerek kalmadi - anasayfa.php'de de bu class kaldirildi, olu kod olarak
   burada birikmesin diye kural da silindi. */

/**====================== IS ORTAKLARIMIZ (#partners, anasayfa - round68) ======================**/
/* 2026-07-30 (round68): kullanicinin gonderdigi referans gorsel + referans site (Vercel demo)
   incelendi - orada bu bolum "bg-primary text-primary-foreground" (Tailwind) kullaniyor: zemin
   dogrudan marka turkuazi (--primary: #18aaa6 - bizim "renk1" ile AYNI deger), yazi rengi ise
   "--primary-foreground: #06201f" (bizim zaten var olan "--nh-primary-fg" degiskenimizle DE
   BIREBIR AYNI deger - tesadufen degil, iki site de ayni marka renk paletini kullaniyor).
   Etiket (~14px, %70 opaklik) ve 6'li ortak satiri (~18px, kalin, %80 opaklik, hover'da %100)
   referans sitedeki degerlerle (getComputedStyle ile olculdu) birebir eslesecek sekilde
   uygulandi. Grid kirilma noktalari da referanstaki "2 (mobil) / 3 (tablet) / 6 (masaustu)"
   duzeniyle ayni, sadece bizim sitede zaten kullanilan 991.98px/575.98px breakpoint'lerine
   (ör. ".project-card-grid") uyarlandi. */
body:has(#main-slider) #partners{
	background-color: #18aaa6;
	padding: 48px 0px 48px;
}
body:has(#main-slider) .partners-eyebrow{
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 3.5px;
	color: var(--nh-primary-fg);
	opacity: .7;
}
body:has(#main-slider) .partners-grid{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
	align-items: center;
	margin-top: 32px;
}
body:has(#main-slider) .partners-item{
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: 'Sora', sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--nh-primary-fg);
	opacity: .8;
	transition: opacity .2s ease;
}
body:has(#main-slider) .partners-item:hover{
	opacity: 1;
}
@media (max-width: 991.98px){
	body:has(#main-slider) .partners-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575.98px){
	body:has(#main-slider) .partners-grid{ grid-template-columns: repeat(2, 1fr); }
}

/**====================== ILETISIM TEASER (#home-contact, anasayfa) ======================**/
body:has(#main-slider) #home-contact{
	background-color: var(--nh-bg);
	/* 2026-07-30 DUZELTME (round63): alt padding, diger butun bolumlerle tutarli olmasi icin
	   110px'ten 100px'e indirildi (standart deger) - #footer'in kendisi paylasilan/site geneli
	   bir bilesen oldugu icin ONA DOKUNULMADI, sadece bu anasayfaya ozel bolumun kendi alt
	   paddingi degisti. */
	padding: 20px 0px 100px;
}
body:has(#main-slider) #home-contact .head-after{
	color: var(--nh-fg);
}
body:has(#main-slider) #home-contact > .container > .row > div > p{
	color: var(--nh-muted);
}
.home-contact-item{
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 24px;
}
.home-contact-item .icon-box{
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background-color: var(--nh-accent);
	color: #18aaa6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.home-contact-item strong{
	display: block;
	color: var(--nh-fg);
	font-family: 'Sora', sans-serif;
	font-size: 15px;
}
.home-contact-item p, .home-contact-item a{
	margin: 2px 0 0;
	color: var(--nh-muted);
	font-size: 14px;
	line-height: 22px;
}
.home-contact-item a:hover{
	color: #18aaa6;
}
.home-contact-card{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 20px;
	padding: 40px;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.home-contact-card h3{
	color: var(--nh-fg);
}
.home-contact-card p{
	color: var(--nh-muted);
}

/**====================== FOOTER - TUM SAYFALAR ======================**/
.footer-bg{
	background-image: none !important;
	background-color: var(--nh-dark) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-bg:after{
	display: none;
}
#footer h3.head-after{
	color: var(--nh-fg);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}
#footer h3.head-after:before{
	background-color: #18aaa6;
}
#footer p{
	color: var(--nh-muted) !important;
}
#footer ul li a, #footer p a{
	color: var(--nh-muted) !important;
}
/* 2026-07-30 (round52): kullanicinin istegiyle sosyal medya ikonlarinin (footer, en altta)
   ici/glif rengi duzeltildi. Kok neden: yukaridaki "#footer ul li a, #footer p a" kurali
   (footer menu baglantilari icin kasitli olarak "muted" gri renk veriyor) ".social-icons li a"
   icin de gecerli oluyordu (o da bir <ul><li><a> yapisi) - ikon glifleri teal daire zeminin
   uzerinde dusuk kontrastli/soluk gri (~#9aa1a1) goruntuluyordu, "ici gorunmuyor" hissi
   buradan geliyordu. Daha spesifik (bir class fazla) bu kural ile sadece sosyal ikonlar
   tekrar beyaza donduruldu, footer'daki diger (menu) linkler etkilenmedi. */
#footer .social-icons li a{
	color: #fff !important;
}
#footer li{
	border-bottom-color: rgba(255, 255, 255, 0.08);
}
#footer .footer-contact h5{
	color: var(--nh-fg);
	font-size: 14px;
}
#sub-footer{
	background-color: var(--nh-dark) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* round93 DUZELTME: light modda footer ile altindaki copyright/sub-footer cubugu
   arasindaki ayirici cizgi kayboluyordu - kok neden: yukaridaki border-top rengi
   sabit rgba(255,255,255,0.08) (beyaz, %8 opaklik) - bu SADECE koyu (dark) zeminde
   gorunur, footer artik temaya duyarli oldugu icin light modda zemin acik renge
   (var(--nh-dark) => acik gri) donusunce bu beyaz cizgi de acik zeminin icinde
   kayboluyordu (neredeyse ayni ton). Mevcut/calisan dark-mod kuralina dokunmadan,
   SADECE light mod icin ayri bir renk (koyu, dusuk opaklikta - acik zeminde gorunur
   olacak sekilde) override ekleniyor - dark moddaki cizgi degismiyor. */
html[data-theme="light"] #sub-footer{
	border-top-color: rgba(20, 22, 22, 0.12);
}
#sub-footer li, #sub-footer a{
	color: var(--nh-muted);
}
#sub-footer a:hover{
	color: #18aaa6;
}
/* round91 DUZELTME: buyuk footer logosu light modda soluk/gorunmez cikiyordu (kok neden:
   logo koyu zemin icin tasarlanmis acik renkli bir gorsel, footer artik temaya duyarli
   oldugundan light modda acik gri zemine donusuyor). Kullanicinin tercihiyle: index.php
   artik logoyu IKI AYRI <img> olarak basiyor (".nh-footer-logo-dark" +, SADECE ayrica bir
   light-mod dosyasi yuklenmisse, ".nh-footer-logo-light") - burada CSS ile sadece dogru
   olan gosteriliyor. ":has()" ile "acik logo DOM'da gercekten var mi" kontrol ediliyor ki
   light-mod dosyasi HENUZ yuklenmemisse (yani ikinci img hic basilmamissa) koyu logo HER
   ZAMAN gorunur kalsin - bu sayede eski/varsayilan durumda hicbir gorsel regresyon olmaz. */
.nh-footer-logo-light{
	display: none;
}
html[data-theme="light"] .nh-footer-logo-wrap:has(.nh-footer-logo-light) .nh-footer-logo-dark{
	display: none;
}
html[data-theme="light"] .nh-footer-logo-wrap:has(.nh-footer-logo-light) .nh-footer-logo-light{
	display: inline-block;
}
/**========================= END 2026 MODERN TEMA (v2) =========================**/
/**========================= START FOOTER FAVICON BOUNCE =========================**/
/* 2026-07 guncelleme: kullanici istegi uzerine, footer'in icinde site faviconu "DVD ekran
   koruyucusu" gibi sol-ustten baslayip kenarlara carparak dolasiyor (hareket mantigi
   common-script.js icinde). #footer zaten "footer-bg" sinifiyla position:relative VE
   z-index:9 oldugu icin (yukarida bkz.) kendi "yerel" istifleme baglamini (stacking
   context) zaten kendiliginden olusturuyor - ikon bu sayede sadece footer'in kendi
   icinde kalip sayfanin baska bolumlerini etkilemiyor; ayrica ikon burada mutlak
   konumlanabiliyor.
   2026-07 duzeltme: ikon biraz kucultuldu (42px -> 28px) ve ayni degerler artik JS
   tarafindan da inline stil olarak zorlaniyor (bkz. common-script.js) - boylece bu kural
   herhangi bir sebeple devreye girmese bile ikon yine de dogru konumda/boyutta kalir ve
   footer'in disina tasip sayfayi uzatmaz.
   2026-07 duzeltme #2: ikon yazilarin/basliklarin ONUNDEN geciyordu - "en arkada olsun,
   hepsinin arkasindan gecsin" istendigi icin z-index -1 yapildi (footer'in kendi normal
   metin/baslik icerigi negatif z-index kullanmadigi icin bunlar HER ZAMAN -1'in onunde
   kalir, yani ikon dogru sekilde yazilarin arkasinda gorunur).
   2026-07 duzeltme #3: ikon bu kez neredeyse hic gorunmez oldu - cunku footer'in koyu
   yari-saydam arka plan katmani (".footer-bg:after") de -1 idi ve ikonla AYNI seviyede
   oldugu icin onun ONUNE geciyordu. Bu katman -2'ye cekildi (yukarida bkz.) boylece sira
   dogru: koyu katman (-2) en arkada, ikon (-1) onun onunde ama yazilarin arkasinda. */
/* round91 DUZELTME: kullanici, light modda bu gezinen ikonun da (favicon) "tam gorunmuyor"
   oldugunu bildirdi - buyuk logoyla ayni kok neden: ikon acik renkli, footer'in artik
   temaya duyarli (light modda acik gri) zemininde dusuk kontrast olusturuyor. Buyuk logonun
   aksine bu ikon icin AYRI bir "light-mod dosyasi" istemek pratik degil (favicon tek/global
   bir gorsel, sadece bu kucuk eglence-amacli animasyon icin ikinci bir dosya yuklemek asiri
   olur) - bunun yerine ikonun HER ZAMAN (temadan bagimsiz) sabit KOYU, yari-saydam yuvarlak
   bir "chip" zemin uzerinde durmasi saglandi; boylece ikon hangi renkte olursa olsun, kendi
   sabit koyu zemininde HER ZAMAN kontrastli/gorunur kalir - site temasi degistiginde bu
   chip'in kendisi degismez. */
.footer-bounce-icon{
	position: absolute !important;
	top: 0;
	left: 0;
	width: 28px !important;
	height: 28px !important;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 50%;
	background-color: rgba(20, 22, 22, 0.55);
	object-fit: contain;
	pointer-events: none;
	z-index: -1;
}
/**========================= END FOOTER FAVICON BOUNCE =========================**/
/**========================= START SSS + MUSTERI GORUSLERI SAYFALARI (round74) =========================**/
/* 2026-07-31 (round74): Kullanici "S.S.S ve Müşteri Görüşleri sayfalarini da temaya uygun
   tasarla" istedi - bu iki sayfa da (Hakkımızda'da oldugu gibi) CORE tarafindan render
   ediliyor (pages/sss.php / pages/musteri_gorusleri.php sandbox'ta YOK), yani HTML/PHP
   sablonlarina dokunamiyoruz - sadece CSS (+ gerekli yerlerde JS ile mevcut elemanlari
   zenginlestirerek) koyu temaya uyarliyoruz. Sayfalar body uzerinde kendine ozgu bir ID
   tasimadigi icin, "body:has(> .mapouter)" (Iletisim sayfasi icin daha once kullanilan
   yontem) ile AYNI mantikla, her sayfaya ozgu BENZERSIZ bir ic eleman uzerinden
   (SSS: "#accordion", Musteri Gorusleri: "input[name=\"meslek\"]") kapsamlaniyor - boylece bu
   kurallar SADECE kendi sayfalarinda calisiyor, birbirini ya da diger sayfalari etkilemiyor. */

/* --- Genel sayfa arka plani (breadcrumb'in altindaki icerik alani hala varsayilan beyazdi) --- */
/* round87 DUZELTME: yukaridaki SSS/Musteri-Gorusleri kapsamlama yorumu artik dogru
   degil - ".mgorus_image" sadece EN AZ BIR yorum onaylanmisken sayfada var oluyor
   (her yorumun kendi avatar resmi bu class'i tasiyor). Su an sitede henuz hic yorum
   olmadigi icin ("Uzgunuz, kayit bulunamamistir") bu class HICBIR ZAMAN sayfada
   bulunmuyordu - bu da asagidaki TUM round74/75 kurallarinin (kart, hero istatistik
   seridi, form karti dahil) SESSIZCE hic calismamasina, sayfanin varsayilan/temasiz
   (formun beyaz kaldigi) haliyle gorunmesine sebep oluyordu. Kalici cozum: sayfayi
   yorum SAYISINDAN BAGIMSIZ olarak her zaman ayni bicimde tanimlayan bir ipucuna
   gecildi - "Siz de Yorum Birakin" formunun 'Meslek' input'u (name="meslek"), 0 yorum
   olsa bile HER ZAMAN sayfada mevcut (bkz. asagida + common-script.js, ayni degisiklik
   oradaki JS icin de yapildi). */
body:has(#accordion), body:has(input[name="meslek"]){
	background-color: var(--nh-bg);
}

/* ================= S.S.S SAYFASI ================= */
body:has(#accordion) #accordion{
	margin-top: 10px;
}
body:has(#accordion) .collapse-head{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.4);
	transition: border-color 0.25s ease;
}
body:has(#accordion) .collapse-head:hover{
	border-color: #18aaa6;
}
body:has(#accordion) .collapse-head button{
	background-color: transparent;
	color: var(--nh-fg);
	font-family: 'Sora', sans-serif;
	font-weight: 600;
	font-size: 15px;
	align-items: center;
}
body:has(#accordion) button[aria-expanded="true"]{
	background-color: var(--nh-accent);
	color: #18aaa6;
}
body:has(#accordion) .collapse-head p{
	color: var(--nh-muted);
	line-height: 1.8;
	padding: 2px 24px 24px 55px;
}

/* ================= MUSTERI GORUSLERI SAYFASI ================= */
/* round74: Yorum kartlari anasayfadaki ".testimonial-card" ile ayni renk/kart dili.
   round75 (2026-07-31): Kullanici "tasarim bana iyi gelmedi, efsane bir sey yap, wow desinler"
   dedi (sadece bu sayfa icin - S.S.S ayni kaldi) - sayfa cok daha "gorsel/enerjik" bir yone
   tasindi: ustte breadcrumb icine gercek verilerden (ortalama puan + toplam yorum) beslenen
   bir istatistik seridi (bkz. common-script.js), sayfa arka planina yumusak teal glow,
   kartlarda buyuk soluk tirnak ikonu + daha belirgin hover (kaldırma + teal parıltılı golge),
   sayfa/sayfalama degisiminde kartlarin kademeli (stagger) belirme animasyonu, ve formda
   sabitlenen (sticky) + ust vurgu cizgili bir kart eklendi. */
body:has(input[name="meslek"]) .ptb-60-60{
	position: relative;
}
body:has(input[name="meslek"]) .ptb-60-60:before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 900px;
	max-width: 160%;
	height: 460px;
	background: radial-gradient(ellipse at top, rgba(24, 170, 166, 0.07), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
body:has(input[name="meslek"]) .ptb-60-60 > .container{
	position: relative;
	z-index: 1;
}
/* Ustteki koyu breadcrumb serididine (baslik + "Anasayfa/Kurumsal/.." izi) bu sayfaya ozel
   yumusak bir teal parıltı + asagida common-script.js'in ekledigi istatistik seridi. */
body:has(input[name="meslek"]) #breadcrumb{
	position: relative;
	overflow: hidden;
}
body:has(input[name="meslek"]) #breadcrumb:before{
	content: "";
	position: absolute;
	top: -60%;
	right: -8%;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(24, 170, 166, 0.22), transparent 70%);
	pointer-events: none;
}
.nh-review-hero-stats{
	position: relative;
	display: flex;
	align-items: center;
	gap: 30px;
	margin-top: 22px;
	flex-wrap: wrap;
}
.nh-stat{
	display: flex;
	flex-direction: column;
}
.nh-stat-value{
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'Sora', sans-serif;
	font-size: 30px;
	font-weight: 800;
	color: var(--nh-fg);
	line-height: 1;
}
.nh-stat-star{
	font-style: normal;
	font-size: 20px;
	color: #18aaa6;
}
.nh-stat-label{
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--nh-muted);
}
.nh-stat-divider{
	width: 1px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.14);
}

/* Yorum kartlari */
body:has(input[name="meslek"]) .border-bottom-light{
	position: relative;
	overflow: hidden;
	border-bottom: none;
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 16px;
	padding: 26px 26px 22px;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
body:has(input[name="meslek"]) .border-bottom-light:after{
	content: "\201C";
	position: absolute;
	top: 6px;
	right: 18px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 70px;
	line-height: 1;
	color: #18aaa6;
	opacity: 0.12;
	pointer-events: none;
	z-index: 0;
}
body:has(input[name="meslek"]) .border-bottom-light.nh-card-in{
	opacity: 1;
	transform: translateY(0);
}
body:has(input[name="meslek"]) .border-bottom-light.nh-card-in:hover{
	border-color: #18aaa6;
	transform: translateY(-6px);
	box-shadow: 0 22px 45px -14px rgba(24, 170, 166, 0.3);
}
@media (prefers-reduced-motion: reduce){
	body:has(input[name="meslek"]) .border-bottom-light{
		transition: none;
		opacity: 1;
		transform: none;
	}
}
body:has(input[name="meslek"]) .border-bottom-light h5{
	color: var(--nh-fg);
	font-family: 'Sora', sans-serif;
}
body:has(input[name="meslek"]) .border-bottom-light p.mb-1{
	color: var(--nh-muted);
	font-size: 12px;
	font-style: italic;
}
body:has(input[name="meslek"]) .border-bottom-light p.mb-0{
	position: relative;
	color: var(--nh-muted);
	line-height: 1.8;
}
/* Jenerik "unnamed.png" ikonu JS ile gizlenip yerine (common-script.js) bas harfli
   ".testimonial-avatar" rozeti ekleniyor; yorumun kendi metninde gizli bir "[[puan:N]]"
   etiketi bulunursa (round75 - bkz. common-script.js) GERCEK N yildizi de ekleniyor -
   bu etiket olmayan (bu ozellikten once yazilmis) eski yorumlarda uydurma bir puan
   gostermemek icin yildiz satiri hic eklenmiyor. */
.nh-review-avatar-wrap{
	text-align: center;
}
.nh-review-avatar{
	margin: 0 auto;
}
.nh-review-stars{
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-top: 10px;
}
.nh-review-stars i{
	font-style: normal;
	font-size: 14px;
}
.nh-review-stars .nh-star-filled{
	color: #18aaa6;
}
.nh-review-stars .nh-star-empty{
	color: var(--nh-border);
}

/* Yorum formu karti ("Siz de Yorum Bırakın") - masaustunde scroll ile birlikte sabit kalir */
body:has(input[name="meslek"]) .col-lg-5 .card{
	position: relative;
	overflow: hidden;
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
}
body:has(input[name="meslek"]) .col-lg-5 .card:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #18aaa6, transparent 130%);
}
@media (min-width: 992px){
	body:has(input[name="meslek"]) .col-lg-5 .card{
		position: sticky;
		top: 112px;
	}
}
body:has(input[name="meslek"]) .col-lg-5 .card h4{
	color: var(--nh-fg);
}
body:has(input[name="meslek"]) .form-control{
	background-color: var(--nh-dark);
	border-color: var(--nh-border);
	color: var(--nh-fg);
}
body:has(input[name="meslek"]) .form-control::placeholder{
	color: var(--nh-muted) !important;
}
body:has(input[name="meslek"]) .form-control:focus{
	border-color: #18aaa6;
}
/* Puanlama secici (round75, yeni eklendi - bkz. common-script.js) */
.nh-rating-label{
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--nh-fg);
}
.nh-star-picker{
	display: flex;
	gap: 8px;
}
.nh-star-btn{
	background: none;
	border: none;
	padding: 0;
	font-size: 30px;
	line-height: 1;
	color: var(--nh-border);
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s ease;
}
.nh-star-btn.active{
	color: #18aaa6;
	transform: scale(1.1);
}

/* Sayfalama (6'lik gruplar - common-script.js tarafindan olusturulur, bkz. orada) */
body:has(input[name="meslek"]) .col-lg-7 > .col-lg-12 > p{
	color: var(--nh-muted);
	text-align: center;
	font-size: 13px;
}
.nh-review-pagination{
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0 !important;
}
.nh-review-pagination button{
	min-width: 38px;
	height: 38px;
	padding: 0 6px;
	border-radius: 50px;
	border: 1px solid var(--nh-border);
	background-color: var(--nh-card);
	color: var(--nh-muted);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.25s ease;
}
.nh-review-pagination button:hover{
	border-color: #18aaa6;
	color: #18aaa6;
}
.nh-review-pagination button.active{
	background-color: #18aaa6;
	border-color: #18aaa6;
	color: var(--nh-primary-fg);
}
.nh-review-pagination button.nh-page-arrow{
	background-color: transparent;
	border-color: transparent;
	font-size: 18px;
}
.nh-review-pagination button.nh-page-arrow:hover{
	background-color: var(--nh-card);
	border-color: var(--nh-border);
}
.nh-review-pagination button:disabled{
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
@media (max-width: 575.98px){
	body:has(input[name="meslek"]) .border-bottom-light .col-sm-2{
		margin-bottom: 16px;
	}
}
/**========================= START HIZMETLERIMIZ + HIZMET DETAY SAYFALARI (round77) =========================**/
/* Kullanicinin talebi: "Hizmetlerimiz" listeleme sayfasi ile 4 hizmet detay sayfasi (Insaat,
   Taahhut, Tarim, Hayvancilik) da S.S.S / Musteri Gorusleri gibi koyu temaya uygun tasarlansin.
   Bu sayfalarin PHP/HTML govdesi core tarafindan uretiliyor (pages/hizmet_detay.php sadece detay
   sayfasi icin var, listeleme sayfasinin kendi core dosyasina erisim yok) - sadece CSS ile
   yeniden tasarlanabiliyor. */

/* --- HIZMETLERIMIZ LISTELEME SAYFASI (/hizmetler) ---
   Bu sayfa, anasayfadaki "Hizmet Alanlarimiz" (#providing) bolumuyle TAMAMEN AYNI govdeyi
   (ayni "id=providing", ayni .card yapisi) paylasiyor. Anasayfada bu bolum zaten koyu temaya
   sahip ama o kural sadece "body:has(#main-slider)" (yani SADECE anasayfa) ile sinirli - bu
   sayfada #main-slider olmadigi (bunun yerine #breadcrumb var) icin o kural hic eslesmiyor ve
   varsayilan beyaz zeminde kaliyordu (kullanicinin ekran goruntusundeki sorun). Anasayfadaki
   kurallara DOKUNMADAN (regresyon riski almamak icin), ayni tasarimi bu sayfaya ozel yeni bir
   govde secici (body:has(#breadcrumb):has(#providing)) ile tekrar uyguluyoruz. */
body:has(#breadcrumb):has(#providing){
	background-color: var(--nh-bg);
}
body:has(#breadcrumb) #providing{
	background-color: var(--nh-bg-alt);
	padding: 100px 0px 100px;
	text-align: left;
}
body:has(#breadcrumb) #providing .head-after{
	color: var(--nh-fg);
}
body:has(#breadcrumb) #providing .card{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 20px;
	box-shadow: none;
	text-align: left;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
body:has(#breadcrumb) #providing .card:hover{
	transform: translateY(-6px);
	border-color: rgba(24, 170, 166, 0.4);
	box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
}
body:has(#breadcrumb) #providing .card i{
	width: 64px;
	height: 64px;
	font-size: 26px !important;
	border-radius: 16px;
	background-color: var(--nh-accent);
	color: #18aaa6 !important;
	transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.25s ease, color 0.25s ease;
}
body:has(#breadcrumb) #providing .card:hover i{
	background-color: #18aaa6;
	color: var(--nh-primary-fg) !important;
	transform: rotate(-8deg) scale(1.08);
}
body:has(#breadcrumb) #providing .card h3{
	color: var(--nh-fg);
	font-size: 19px;
}
body:has(#breadcrumb) #providing .card p{
	color: var(--nh-muted);
}

/* --- HIZMET DETAY SAYFALARI (/hizmet/insaat, /hizmet/taahhut, /hizmet/tarim, /hizmet/hayvancilik) ---
   Bu 4 sayfa TEK core sablonundan (pages/hizmet_detay.php) uretiliyor ve hepsi "#blog" id'sini
   kullaniyor - ANCAK "#blog" ayni zamanda "Bizden Haberler" (haberler / haberdetay) sayfalari
   tarafindan da kullaniliyor (ayni id, kismen ayni siniflar). Iki sablonu ayirt etmek icin,
   SADECE hizmet_detay.php'nin sidebar'inda bulunan ve haberdetay sayfasinda HIC bulunmayan
   ".side-nav-bar" sinifi govde secicisi olarak kullanildi (body:has(#blog .side-nav-bar)) -
   boylece haberler/haberdetay sayfalarina hic dokunulmuyor. */
body:has(#blog .side-nav-bar){
	background-color: var(--nh-bg);
}
body:has(#blog .side-nav-bar) #blog .card{
	background-color: var(--nh-card);
	border-color: var(--nh-border);
}
body:has(#blog .side-nav-bar) #blog .card.card-active{
	border-bottom-color: #18aaa6;
	box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.5);
}
body:has(#blog .side-nav-bar) #blog img{
	border-radius: 14px;
}
body:has(#blog .side-nav-bar) #blog .blog-category ul li{
	color: var(--nh-muted);
	font-size: 13px;
}
body:has(#blog .side-nav-bar) #blog .blog-content .blog-title{
	color: var(--nh-fg);
	font-weight: 700;
}
body:has(#blog .side-nav-bar) #blog .blog-content{
	color: var(--nh-muted);
	line-height: 1.9;
}
body:has(#blog .side-nav-bar) #blog .blog-content a{
	color: #18aaa6;
}
body:has(#blog .side-nav-bar) #blog .blog-content h1,
body:has(#blog .side-nav-bar) #blog .blog-content h2,
body:has(#blog .side-nav-bar) #blog .blog-content h3,
body:has(#blog .side-nav-bar) #blog .blog-content h4,
body:has(#blog .side-nav-bar) #blog .blog-content h5,
body:has(#blog .side-nav-bar) #blog .blog-content h6,
body:has(#blog .side-nav-bar) #blog .blog-content strong,
body:has(#blog .side-nav-bar) #blog .blog-content b{
	color: var(--nh-fg);
}
/* Sidebar: "Tum Hizmetlerimiz" basligi + hizmet listesi */
body:has(#blog .side-nav-bar) .col-lg-4 .head-after{
	color: var(--nh-fg);
}
body:has(#blog .side-nav-bar) .side-nav-bar li{
	border-bottom: 1px solid var(--nh-border);
}
body:has(#blog .side-nav-bar) .side-nav-bar li:last-child{
	border-bottom: 0;
}
body:has(#blog .side-nav-bar) .side-nav-bar li a{
	color: var(--nh-muted);
	transition: color 0.2s ease, padding-left 0.2s ease;
}
body:has(#blog .side-nav-bar) .side-nav-bar li a:hover{
	color: #18aaa6;
	padding-left: 4px;
}
body:has(#blog .side-nav-bar) .side-nav-bar li.active a{
	color: #18aaa6;
	font-weight: 700;
}
/* Sidebar: "Bize Soru Sorun" iletisim kutusu */
body:has(#blog .side-nav-bar) .helpline .card{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-bottom: 1px solid var(--nh-border);
	box-shadow: none;
	transform: none;
	position: relative;
	overflow: hidden;
}
body:has(#blog .side-nav-bar) .helpline .card:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #18aaa6, transparent 130%);
}
body:has(#blog .side-nav-bar) .helpline .head-after{
	color: var(--nh-fg);
}
body:has(#blog .side-nav-bar) .helpline p{
	color: var(--nh-muted);
}
body:has(#blog .side-nav-bar) .helpline p a{
	color: #18aaa6;
}
body:has(#blog .side-nav-bar) .helpline i{
	color: #18aaa6;
}
/**========================= END HIZMETLERIMIZ + HIZMET DETAY SAYFALARI (round77) =========================**/
/**========================= END SSS + MUSTERI GORUSLERI SAYFALARI (round74) =========================**/
/**========================= START PROJELERIMIZ + PROJE KATEGORI SAYFALARI (round78) =========================**/
/* Kullanicinin talebi: "Projelerimiz" listeleme sayfasi (3 kategori karti: Tamamlanan/Planlanan/
   Devam Eden Projeler) ile bu 3 kategorinin kendi foto izgara sayfalari da koyu temaya uygun,
   projeleri on plana cikaran ve "wow" hissi veren bir tasarimla yenilensin + proje gorsellerine
   kaliteli bir animasyon eklensin. Bu sayfalarin govdesi core tarafindan uretiliyor, pages/
   klasorunde kendi sablon dosyalari yok - sadece CSS/JS ile yeniden tasarlanabiliyor. */

/* --- PROJELERIMIZ LISTELEME SAYFASI (/projeler) ---
   Bu sayfa "#foto_galeri" id'sini "Foto Galeri" (/foto-galeri) listeleme sayfasiyla BIREBIR
   AYNI govdeyle (ayni .card.card-active, .iconset, .blog-img, .blog-title yapisi) paylasiyor.
   Iki sablonu ayirt etmek icin, SADECE bu sayfadaki kartlarin baglantilarinin "proje-kategori/"
   ile basladigi gercegi kullanildi (Foto Galeri sayfasindaki baglantilar "foto/" ile basliyor) -
   boylece Foto Galeri sayfasina hic dokunulmuyor. */
body:has(#foto_galeri a[href^="proje-kategori/"]){
	background-color: var(--nh-bg);
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card{
	background-color: var(--nh-card);
	border-color: var(--nh-border);
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card:hover,
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card-active{
	box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.55);
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .blog-img{
	position: relative;
	overflow: hidden;
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .blog-img img{
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card:hover .blog-img img{
	transform: scale(1.08);
}
/* Hover'da resmin altina hafif koyu gradyan gelir - derinlik hissi guclendirir */
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .blog-img:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(15, 30, 34, 0) 55%, rgba(15, 30, 34, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card:hover .blog-img:after{
	opacity: 1;
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .iconset{
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	box-shadow: 0 8px 20px -6px rgba(24, 170, 166, 0.6);
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card:hover .iconset{
	transform: rotate(-10deg) scale(1.12);
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .blog-content .blog-title a{
	color: var(--nh-fg);
	transition: color 0.2s ease;
}
body:has(#foto_galeri a[href^="proje-kategori/"]) #foto_galeri .card:hover .blog-content .blog-title a{
	color: #18aaa6;
}

/* --- PROJE KATEGORI SAYFALARI (/proje-kategori/tamamlanan-projeler, planlanan-projeler, devam-eden-projeler) ---
   Bu 3 sayfa core tarafindan AYNI foto izgara govdesiyle (".project-grid" > ".grid" > ".grid-effect")
   uretiliyor. ".project-grid" sinifi SADECE bu 3 sayfada kullanildigindan, dogrudan bu sinif govde
   secici olarak kullanildi - eski ".grid"/".grid-effect" kurallarina (diger sayfalarda da
   kullanilabiliyor olabilecekleri icin) DOKUNULMADI, sadece ".project-grid" ile daha ozel/ek
   kurallar eklendi. */
body:has(.project-grid){
	background-color: var(--nh-bg);
}
.project-grid .grid .grid-effect{
	border-radius: 18px;
}
/* Kademeli "belirerek buyume" giris animasyonu (JS ile ".nh-proj-in" sinifi eklenince aktif olur) */
.project-grid .grid .grid-effect{
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}
.project-grid .grid .grid-effect.nh-proj-in{
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* Mevcut ".grid .grid-effect:hover{transform:translateY(-6px);}" kuralinin (genel/scope'suz)
   yukaridaki reveal transform'u tarafindan ezilmemesi icin, hover halini burada DAHA SPESIFIK
   bir secici ile tekrar tanimliyoruz (4 sinif + :hover, generic kuraldan daha spesifik). */
.project-grid .grid .grid-effect.nh-proj-in:hover{
	transform: translateY(-6px) scale(1);
}
/* Resmin ortasinda hover'da beliren "incele" buyutec ikonu (JS ile eklenir) */
.nh-proj-view{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
	pointer-events: none;
	z-index: 2;
}
.project-grid .grid .grid-effect:hover .nh-proj-view{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 767.98px){
	/* Dokunmatik cihazlarda hover olmadigi icin buyutec ikonu gereksiz/takilı gorunebilir - gizlendi */
	.nh-proj-view{
		display: none;
	}
}
/**========================= END PROJELERIMIZ + PROJE KATEGORI SAYFALARI (round78) =========================**/
/**========================= START PROJE DETAY SAYFASI (round79) =========================**/
/* Kullanicinin talebi: "/proje/<slug>" tekil proje detay sayfasi (ör. "Nisa Evleri 1") da
   anasayfadaki proje kartlari temasiyla tutarli, "wow" hissi veren bir tasarimla yenilensin.
   Bu sayfanin govdesi de kategori sayfalari gibi ".project-grid" sinifini kullaniyor - round78
   sadece kategori foto izgarasina (".grid .grid-effect") odaklanmisti; bu sayfada o yapi hic
   kullanilmadigi icin round78 sadece genel koyu arka plani (body:has(.project-grid)) getirmis,
   sayfanin kendi icerigi (baslik, hero gorsel, bilgi karti, ek foto galerisi) hala eski/acik
   temada kalip yaridan yamali/bozuk bir gorunum olusturuyordu - bu blok o icerigi tasarliyor. */

/* Icerik alanindaki tekrar eden baslik (h1.head-after) - breadcrumb'daki basligin ayni tekrari
   (hizmet detay/haber detay sayfalarindaki ayni desenle tutarli), sadece renklendirildi. */
.project-grid .text-left h1.head-after{
	color: var(--nh-fg);
}

/* Hero gorsel - kenarlari yuvarlatilip golge eklendi */
.project-grid .position-realtive .mb-3 img{
	border-radius: 20px;
	box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Hero gorselin sol-alt kosesine binen "cam" (glassmorphism) bilgi karti: Proje Kategori /
   Proje Adi / kisa aciklama. Onceki (acik/beyaz) hali koyu temayla uyumsuzdu. */
.project-grid .project-single .card.card-active{
	background-color: rgba(26, 28, 28, 0.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 25px 55px -20px rgba(0, 0, 0, 0.65);
}
.project-grid .project-single li{
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--nh-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/* round87 DUZELTME: bu "cam" (glassmorphism) kart kasitli olarak HER ZAMAN koyu birakilmisti
   (sadece koyu tema dusunulerek yazilmisti) - kullanici light moda gecince kutunun hala
   "dark moddaki gibi" kaldigini bildirdi. Alttaki metin/etiket renkleri zaten var(--nh-fg)
   ve var(--nh-muted) kullandigi icin (yani zaten tema degiskenine bagliydi) - tek sorun
   kartin KENDI zemininin/kenarliginin/ic cizgilerinin sabit koyu degerler olmasiydi. Light
   modda kart ve ic cizgiler acik/beyaz "cam" gorunumune donduruluyor - fotografin uzerinde
   hala bir "cam kart" hissi kaliyor, sadece koyu yerine acik tonda. */
html[data-theme="light"] .project-grid .project-single .card.card-active{
	background-color: rgba(255, 255, 255, 0.88);
	border-color: rgba(20, 24, 24, 0.08);
	box-shadow: 0 25px 55px -20px rgba(20, 24, 24, 0.3);
}
html[data-theme="light"] .project-grid .project-single li{
	border-bottom-color: rgba(20, 24, 24, 0.08);
}

.project-grid .project-single li:last-child{
	border-bottom: 0;
}
.project-grid .project-single li span{
	color: #18aaa6;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}
.project-grid .project-single p{
	color: var(--nh-fg);
	font-size: 15px;
	margin-top: 10px;
	margin-bottom: 0;
}
@media (max-width: 767.98px){
	/* Kucuk ekranlarda %50 genislikte, resmin ustune binen sabit konum okunmuyordu - tam
	   genislige alinip resmin ALTINA statik olarak yerlestirildi. */
	.project-grid .project-single{
		position: static;
		width: 100%;
		margin-top: -30px;
	}
}

/* Ek proje fotograflari (kucuk galeri) - bu kartlar ".blog-img.haber-diger" sinifini "Bizden
   Haberler" detay sayfasindaki ek foto galerisiyle paylasiyor; ".project-grid" ile sinirlayarak
   haber detay sayfasina dokunulmuyor. */
.project-grid .blog-col .card.p-2{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-grid .blog-col .card.p-2:hover{
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5);
}
.project-grid .blog-img.haber-diger{
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	cursor: pointer;
}
.project-grid .blog-img.haber-diger img{
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.project-grid .blog-col .card.p-2:hover .blog-img.haber-diger img{
	transform: scale(1.08);
}
/* Round78'de tanimlanan genel ".nh-proj-view" buyutec ikonunu (JS ile eklenir) burada da
   kullaniyoruz - CSS'i zaten genel oldugundan sadece hover tetikleyicisini ekliyoruz. */
.project-grid .blog-img.haber-diger:hover .nh-proj-view{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
/**========================= END PROJE DETAY SAYFASI (round79) =========================**/
/**========================= START FOTO GALERI + VIDEO GALERI + ILETISIM (round80) =========================**/
/* Kullanicinin talebi: Foto Galeri, Video Galeri ve Iletisim sayfalari da (Projelerimiz'de
   yapilan gibi) SADECE renk degil, gercek bir tasarimla koyu temaya uyarlansin. */

/* --- FOTO GALERI + VIDEO GALERI LISTELEME SAYFALARI (/foto-galeri, /video-galeri) ---
   Ikisi de (Projelerimiz listeleme sayfasi gibi) "#foto_galeri" govdesini paylasiyor. Ayirt
   edici olarak baglanti on-eki kullanildi: Foto Galeri -> "foto/", Video Galeri -> "video/".
   Ayni "wow" kart tasarimi (round78'de Projelerimiz icin yapilan) burada da uygulanarak site
   genelinde TUTARLI tek bir "kategori karti" dili olusuyor. */
body:has(#foto_galeri a[href^="foto/"]),
body:has(#foto_galeri a[href^="video/"]){
	background-color: var(--nh-bg);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card{
	background-color: var(--nh-card);
	border-color: var(--nh-border);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card:hover,
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card-active,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card:hover,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card-active{
	box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.55);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .blog-img,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .blog-img{
	position: relative;
	overflow: hidden;
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .blog-img img,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .blog-img img{
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card:hover .blog-img img,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card:hover .blog-img img{
	transform: scale(1.08);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .blog-img:after,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .blog-img:after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(15, 30, 34, 0) 55%, rgba(15, 30, 34, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card:hover .blog-img:after,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card:hover .blog-img:after{
	opacity: 1;
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .iconset,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .iconset{
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	box-shadow: 0 8px 20px -6px rgba(24, 170, 166, 0.6);
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card:hover .iconset,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card:hover .iconset{
	transform: rotate(-10deg) scale(1.12);
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .blog-content .blog-title a,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .blog-content .blog-title a{
	color: var(--nh-fg);
	transition: color 0.2s ease;
}
body:has(#foto_galeri a[href^="foto/"]) #foto_galeri .card:hover .blog-content .blog-title a,
body:has(#foto_galeri a[href^="video/"]) #foto_galeri .card:hover .blog-content .blog-title a{
	color: #18aaa6;
}

/* --- FOTO GALERI DETAY SAYFASI (/foto/<slug>) - tekil albumun foto izgarasi ---
   "#foto" id'si baska hicbir sablonla paylasilmiyor, dogrudan hedeflenebiliyor. Kategori
   sayfalarindaki (round78) ile ayni kademeli "belirerek buyume" giris animasyonu + hover'da
   beliren "incele" buyutec ikonu (".nh-proj-view", JS ile eklenir) burada da kullanildi. */
body:has(#foto){
	background-color: var(--nh-bg);
}
#foto .card{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#foto .card:hover{
	transform: translateY(-6px);
	box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.5);
}
#foto .blog-img{
	position: relative;
}
#foto .blog-img img{
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#foto .card:hover .blog-img img{
	transform: scale(1.08);
}
#foto .blog-img:hover .nh-proj-view{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
#foto .card{
	opacity: 0;
	transform: translateY(20px) scale(0.96);
	transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}
#foto .card.nh-proj-in{
	opacity: 1;
	transform: translateY(0) scale(1);
}
#foto .card.nh-proj-in:hover{
	transform: translateY(-6px) scale(1);
}

/* --- VIDEO DETAY SAYFASI (/video/<slug>) - kendi ozel siniflari (paylasim yok, dogrudan hedeflendi) --- */
body:has(.video-detail-showcase){
	background-color: var(--nh-bg);
}
.video-detail-showcase{
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.6);
	border: 1px solid var(--nh-border);
}
.video-detail-player iframe{
	display: block;
}
.video-detail-other-videos{
	background-color: var(--nh-card);
}
.video-detail-other-videos .heading{
	background-color: var(--nh-dark);
	position: relative;
}
.video-detail-other-videos .heading:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #18aaa6;
}
.video-detail-other-videos .heading .all-videos{
	color: var(--nh-muted);
	opacity: 1;
}
.video-detail-other-videos .heading .all-videos:hover{
	color: #18aaa6;
	text-decoration: none;
}
.video-detail-list{
	background-color: var(--nh-card);
}
.video-detail-list li{
	border-bottom-color: var(--nh-border);
	transition: background-color 0.2s ease;
}
.video-detail-list li:hover{
	background-color: rgba(24, 170, 166, 0.08);
}
.video-detail-list .video-left{
	border-radius: 10px;
	overflow: hidden;
}
.video-detail-list .video-left img{
	transition: transform 0.4s ease;
}
.video-detail-list li:hover .video-left img{
	transform: scale(1.08);
}
.video-detail-list .video-left .icon{
	color: #18aaa6;
	background-color: rgba(0, 0, 0, 0.35);
}
.video-detail-list .video-right .title{
	color: var(--nh-fg) !important;
	transition: color 0.2s ease;
}
.video-detail-list li:hover .video-right .title{
	color: #18aaa6 !important;
}

/* --- ILETISIM SAYFASI (/iletisim) ---
   Sayfanin YERLESIMI (harita+form yan yana grid) daha onceki bir turda zaten "body:has(>
   .mapouter)" seciciyle ozel olarak tasarlanmisti - burada SADECE renk/koyu tema ve ek bir
   kalite katmani (harita "koyu mod" filtresi, form alanlarina ikon) ekleniyor, yerlesim
   kurallarina dokunulmuyor. */
body:has(> .mapouter){
	background-color: var(--nh-bg);
}
.mapouter:before{
	color: var(--nh-fg);
}
.gmap_canvas{
	border-radius: 16px;
	border: 1px solid var(--nh-border);
	box-shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.5);
}
/* Google Haritalar embed'i harici bir iframe oldugundan icerigi CSS ile "gercekten"
   yeniden renklendiremiyoruz (farkli origin) - ama CSS filter, iframe'in TAMAMINI (gorsel
   olarak) etkiledigi icin yaygin bir teknikle harita "koyu mod" gorunumune yaklastiriliyor.
   round90 DUZELTME: bu filtre SADECE dark (koyu) temada dogruydu - kullanici, siteyi light
   (acik) moda alinca haritanin YINE koyu/ters renkli kaldigini bildirdi. Kok neden: bu kural
   temadan BAGIMSIZ, HER ZAMAN uygulaniyordu. Simdi bu filtre SADECE koyu temada (yani
   "html[data-theme='light']" YOKKEN) gecerli - light modda haritanin dogal/orijinal (acik)
   Google Haritalar gorunumu geri donuyor. */
html:not([data-theme="light"]) .gmap_canvas iframe{
	filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.9);
}
html[data-theme="light"] .gmap_canvas iframe{
	filter: none;
}
body:has(> .mapouter) .ptb-80-60 .card.card-active{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	box-shadow: 0 25px 55px -20px rgba(0, 0, 0, 0.55);
	position: relative;
	overflow: hidden;
}
body:has(> .mapouter) .ptb-80-60 .card.card-active:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #18aaa6, transparent 130%);
}
body:has(> .mapouter) .form-control{
	background-color: var(--nh-dark);
	border-color: var(--nh-border);
	color: var(--nh-fg);
}
body:has(> .mapouter) .form-control::placeholder{
	color: var(--nh-muted) !important;
}
body:has(> .mapouter) .form-control:focus{
	border-color: #18aaa6;
}
/* Form alanlarina ikon (JS ile eklenir) - "sadece renk degil, gercek tasarim" istegi icin */
body:has(> .mapouter) .form-group{
	position: relative;
}
body:has(> .mapouter) .form-control{
	padding-left: 42px;
}
body:has(> .mapouter) .nh-field-icon{
	position: absolute;
	left: 14px;
	top: 14px;
	color: var(--nh-muted);
	font-size: 16px;
	pointer-events: none;
	transition: color 0.2s ease;
	z-index: 1;
}
body:has(> .mapouter) .form-group:focus-within .nh-field-icon{
	color: #18aaa6;
}
/**========================= END FOTO GALERI + VIDEO GALERI + ILETISIM (round80) =========================**/
/**========================= START IC SAYFA GOVDE ARKAPLANI - GUVENLIK AGI (round81) =========================**/
/* Kullanici: "hakkımızda sayfasinda asagi gidince footer animasyonla gelirken arka plan beyaz
   duruyor" dedi. Kok neden: "#footer" (TUM sayfalarda ortak/core govde) sayfaya girerken
   calisan "reveal-up" giris animasyonuyla (opacity:0 -> 1, bkz. "SCROLL REVEAL" bolumu) beliriyor;
   bu opacity gecisi sirasinda <body>'nin KENDI arka plan rengi bir an gorunur hale geliyor.
   Bircok ic sayfada <body> zaten kendi ozel "body:has(...)" secicileriyle koyu yapilmisti
   (Hizmetler, Projelerimiz, Foto/Video Galeri, Iletisim...) - ama "/icerik/hakkimizda" gibi
   CMS'in genel "icerik" sablonuyla uretilen sayfalarda boyle bir kural hic yoktu, boylece
   <body>'nin VARSAYILAN (beyaz) rengi footer'in ~1 saniyelik "belirme" animasyonu sirasinda
   kisa bir "beyaz flas" olarak goruluyordu. "#breadcrumb" TUM ic sayfalarda ortak oldugundan,
   genel bir guvenlik agi olarak buraya <body> icin koyu arka plan ekleniyor - zaten kendi ozel
   kurali olan sayfalarda bu sadece FAZLADAN bir garanti, gorsel bir degisiklige yol acmiyor. */
body:has(#breadcrumb){
	background-color: var(--nh-bg);
}
/**========================= END IC SAYFA GOVDE ARKAPLANI - GUVENLIK AGI (round81) =========================**/
/**========================= START HAKKIMIZDA - MISYON/VIZYON KUTULARI (round81) =========================**/
/* Kullanici Hakkımızda sayfasindaki mevcut tasarimi begenmedi: "Misyonumuz"/"Vizyonumuz"
   basliklari sadece sol tarafta ince bir turkuaz cizgiyle ayrilan DUZ metin gibi duruyordu,
   gercek bir "kutu" hissi yoktu - "kutunun tasarimini tamamen degistir" istendi.
   common-script.js'de (round81) her nitelikli baslik (h3:not(.head-after)), kendisinden sonraki
   -bir sonraki nitelikli baslika kadar olan- TUM kardes elemanlarla birlikte ".nh-about-box"
   sinifli yeni bir sarmalayici DIV icine aliniyor (paragraf sayisi 1 veya daha fazla olsa da
   dogru calisir). Asagidaki kurallar o kutuyu, sitenin geri kalanindaki kart diliyle (koyu
   zemin + ince kenarlik + sol turkuaz vurgu + golge + hover'da hafif yukselme) tutarli olacak
   sekilde tasarliyor. */
.nh-about-box{
	background-color: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-left: 3px solid #18aaa6;
	border-radius: 14px;
	padding: 22px 26px;
	margin: 26px 0 0;
	box-shadow: 0 20px 45px -22px rgba(0, 0, 0, 0.5);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nh-about-box:hover{
	transform: translateY(-4px);
	box-shadow: 0 25px 55px -20px rgba(0, 0, 0, 0.6);
}
.nh-about-box h3:not(.head-after){
	border-left: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 10px;
}
.nh-about-box p{
	margin-bottom: 0;
}
.nh-about-box p + p{
	margin-top: 10px;
}
@media (max-width: 767.98px){
	.nh-about-box{
		padding: 18px 20px;
	}
}
/**========================= END HAKKIMIZDA - MISYON/VIZYON KUTULARI (round81) =========================**/
/**========================= START PROJE KATEGORI SAYFASI - ANASAYFA KART TASARIMI (round81) =========================**/
/* Kullanici: "tamamlanan projeler kismina girince gorunen proje kutularini, anasayfadaki proje
   kutulariyla BIREBIR AYNI yap" dedi. Anasayfadaki "Son Projelerimiz" bolumu ".project-card"
   adinda statik bir kart yapisi kullaniyor (resmin uzerinde sadece kategori rozeti, ALTINDA HER
   ZAMAN GORUNEN baslik+aciklama - round78'deki gibi sadece hover'da beliren bir "buyutec ikonu +
   karartma" YOK). Kategori sayfalari (Tamamlanan/Planlanan/Devam Eden Projeler) core tarafindan
   FARKLI/eski bir govdeyle (".grid > .grid-effect > img + .p-grid-content") uretiliyor - HTML
   degistirilemedigi icin, bu eski govdeyi CSS ile anasayfadaki karta gorsel olarak birebir
   uyacak sekilde yeniden bicimlendiriyoruz: kart zemini+kenarligi (renk2 yerine
   var(--nh-card)/var(--nh-border)), gorselde sabit 4:3 oran, ve en onemlisi ".p-grid-content"
   artik resmin UZERINE binen, sadece hover'da beliren yari saydam bir karartma DEGIL - resmin
   ALTINDA HER ZAMAN GORUNEN, kartin kendi zeminiyle ayni renkte duz bir "kart govdesi" oldu
   (anasayfadaki ".project-card-body" ile ayni davranis). Round78'in hover'da beliren buyutec
   ikonu (".nh-proj-view") bu sayfada artik gereksiz oldugundan gizlendi - anasayfadaki kartlarda
   boyle bir ikon yok. Anasayfadaki kartlarin sol-ust kosesindeki turkuaz "kategori" rozeti de
   (".nh-cat-tag", common-script.js ile eklenir, sayfanin kendi H1 basligindan alinir) eklendi. */
.project-grid .grid .grid-effect{
	position: relative;
	background: var(--nh-card);
	border: 1px solid var(--nh-border);
	border-radius: 18px;
	box-shadow: none;
}
.project-grid .grid .grid-effect:hover{
	box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.55);
}
.project-grid .grid .grid-effect img{
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.project-grid .grid .grid-effect .p-grid-content{
	position: static;
	opacity: 1;
	transform: none;
	background-image: none;
	padding: 22px 24px;
	color: var(--nh-fg);
}
.project-grid .grid .grid-effect:hover .p-grid-content{
	opacity: 1;
	transform: none;
}
.project-grid .grid .grid-effect h2{
	font-size: 19px;
	color: var(--nh-fg);
	margin-bottom: 8px;
}
.project-grid .grid .grid-effect p{
	color: var(--nh-muted);
	font-size: 13px;
	line-height: 22px;
	opacity: 1;
}
.project-grid .grid .grid-effect .nh-proj-view{
	display: none;
}
.project-grid .grid .grid-effect .nh-cat-tag{
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 2;
	background-color: #18aaa6;
	color: var(--nh-primary-fg);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 5px 14px;
	border-radius: 30px;
}
	   
#counter .counter-number-wrap{
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

#counter .counter-plus{
    font-size: 52px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #18b8b5 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}
/**========================= END PROJE KATEGORI SAYFASI - ANASAYFA KART TASARIMI (round81) =========================**/
/**========================= NAVBAR TR/EN DIL SWITCH (round82) - round83'te kaldirildi =========================**/
/* Kullanici dil (TR/EN) degistirme ozelligini tamamen iptal etti; navbar'daki bu switch'in
   HTML'i index.php'den silindi, bu yuzden asagidaki .nh-lang-switch* kurallari da (artik
   kullanilmadigi icin) kaldirildi. Site artik sadece Turkce olarak calisiyor. */