/* CSS Version: 107.0 - İletişim Container Border-Radius:0 + Content Padding:0 Tüm Mobil Query'lerde */ /* Font Face - Bahnschrift Variable Font (Condensed variant) */ @font-face { font-family: 'Bahnschrift Condensed'; src: url('../font/bahnschrift-condensed.ttf') format('truetype'); font-weight: 100 900; /* Variable font - tüm ağırlıklar */ font-stretch: 75%; /* Condensed variant için */ font-style: normal; font-display: swap; /* Font yüklenene kadar fallback font göster */ } /* Font Loading State - FOUT önleme */ .font-loading { visibility: hidden; } .font-loading.fonts-loaded { visibility: visible; } *{margin:0;padding:0;box-sizing:border-box} /* VERSION 8.9 - STATS/FOOTER/FOOTER-BOTTOM ALIGNED WITH SAME PADDING (30/20PX), CONTAINERS CENTERED */ body{font-family:'Bahnschrift Condensed';background:#e8e8e8;color:#fff;overflow-x:hidden;padding:0;margin:0} /* Screen Reader Only - Erişilebilirlik için */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} /* Custom Scrollbar */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent;border-radius:4px} ::-webkit-scrollbar-thumb{background:#e8e9ed;border-radius:4px;transition:background .3s} ::-webkit-scrollbar-thumb:hover{background:#d0d1d5} *{scrollbar-width:thin;scrollbar-color:#e8e9ed transparent} h1,h2,h3,h4,h5,h6{font-family:'Bahnschrift Condensed'} .page-wrapper{background:#fff;max-width:100%;margin:5px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);-webkit-box-shadow:0 4px 15px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 15px rgba(0,0,0,0.1)} img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:inherit;cursor:pointer!important} button{font-family:inherit;cursor:default!important;border:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none} .top-bar{background:#5ba8de;padding:0;display:flex;justify-content:space-between;align-items:stretch;height:145px;position:relative;margin-bottom:0;border-radius:0;box-shadow:0 2px 4px rgba(0,0,0,0.15);overflow:hidden;border-bottom:0;border-top-right-radius:8px;will-change:auto} .top-bar::before{content:'';position:absolute;left:0;top:0;height:72.5px;width:3px;background:linear-gradient(to bottom,#56a6eb,#84b5d5);z-index:15} .top-bar::after{content:'';position:absolute;left:0;top:72.5px;bottom:0;width:3px;background:#f5f5f5;z-index:5} .top-bar-left{flex:1;display:flex;align-items:center;padding:0 5px 0 30px;z-index:2;position:relative;background:#5ba8de;overflow:visible} .top-bar-left .logo{display:none} .top-bar-left::before{content:'';position:absolute;right:0;top:0;height:100%;width:800px;background:url('../../resimler/site/header.jpg') no-repeat right top;background-size:auto 100%;z-index:10;pointer-events:none;will-change:auto;filter:brightness(0.5);-webkit-filter:brightness(0.5)} .top-bar-left::after{content:'';position:absolute;left:0;right:0;top:0;height:100%;background:url('../../resimler/site/header_l.jpg') no-repeat left center;background-size:100% 100%;z-index:0;pointer-events:none;will-change:auto;filter:brightness(0.5);-webkit-filter:brightness(0.5)} .top-bar-right{width:clamp(200px,20vw,280px);background:linear-gradient(90deg,#f2f2f2 0%,#d4d4d4 100%);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:3;border-left:1px solid #d0d0d0;border-top-right-radius:8px;border-top:none;border-right:none;box-shadow:inset -15px 0 20px -10px rgba(232,232,232,0.8),inset 0 -15px 20px -10px rgba(232,232,232,0.3),inset -5px 0 15px -5px rgba(255,255,255,0.6)} .top-bar-right::before{content:'';position:absolute;left:calc(-100vw + clamp(200px,20vw,280px));bottom:0;right:100%;height:3px;background:#f2f2f2;z-index:5} .top-bar-right::after{content:'';position:absolute;left:0;right:0;top:0;height:8px;background:linear-gradient(to bottom,#e8e8e8 0%,transparent 100%);pointer-events:none;z-index:10;border-top-right-radius:8px} .top-bar h1{font-weight:600;text-transform:uppercase;margin:0;position:relative;z-index:2;font-family:'Bahnschrift Condensed';color:inherit} .top-bar h1 .mobile-br{display:none} .top-bar .logo{width:100%;max-width:180px;height:auto;border-radius:0;filter:brightness(0.5);-webkit-filter:brightness(0.5)} /* --- HEADER İLE BİRLEŞİK VE ORTALANMIŞ MENÜ --- */ nav{background:rgba(12,25,34,0.95);position:absolute;top:0;left:0;width:100%;max-width:100%;z-index:200;margin:0;padding:0;border-radius:0;border-top:none;border-bottom:1px solid rgba(255,255,255,0.1);border-left:none;border-right:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 15px rgba(0,0,0,0.3);display:flex;justify-content:center;will-change:auto} nav ul{list-style:none;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;margin:0 auto;padding:6px 15px;gap:8px} nav li a{display:flex;align-items:center;gap:9px;padding:9px 18px;font-weight:600;text-transform:uppercase;transition:all .2s ease;white-space:nowrap;font-family:'Bahnschrift Condensed';color:#e2e8f0;border-radius:6px;text-decoration:none;position:relative} nav li a::before{display:none!important} nav li a::after{content:'';position:absolute;bottom:6px;left:18px;right:18px;height:2px;background:#817863;transform:scaleX(0);transition:transform .2s ease;transform-origin:center} nav li a:hover::after{transform:scaleX(1)!important;display:block!important} nav li a:hover{background:rgba(255,255,255,0.08);color:#ffffff} nav li a.active{background:#817863!important;color:#ffffff!important;box-shadow:0 2px 8px rgba(129,120,99,0.35)} nav li a.active::after{display:none!important} .nav-home-icon{width:19px;height:19px;fill:currentColor;flex-shrink:0;margin-top:-1px} .top-bar-subtitle{font-size:17px;letter-spacing:2px;font-weight:600;color:rgba(255,255,255,0.85);margin-top:6px;font-family:'Bahnschrift Condensed'} .mobile-menu-pull{display:none;position:absolute;top:50%;right:clamp(15px,4vw,25px);transform:translateY(-50%);z-index:1002;cursor:default;width:clamp(38px,9vw,45px);height:clamp(38px,9vw,45px);background:transparent;border-radius:0;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.2vw,6px);padding:clamp(8px,2vw,10px);box-shadow:none;transition:all .3s;backdrop-filter:none;-webkit-backdrop-filter:none} .mobile-menu-pull.hidden{display:none!important} .mobile-menu-pull:active{transform:translateY(-50%) scale(0.95)} .mobile-menu-pull-line{width:clamp(24px,6vw,28px);height:clamp(2.5px,0.6vw,3px);background:#333;border-radius:clamp(2px,0.5vw,3px);transition:all .3s;box-shadow:0 1px 2px rgba(0,0,0,0.2)} .mobile-menu-pull-text{display:none} .mobile-menu-close{display:none;position:fixed;top:clamp(15px,2.5vh,25px);right:clamp(15px,3vw,25px);z-index:1101;cursor:default;width:clamp(44px,10vw,52px);height:clamp(44px,10vw,52px);background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.3);border-radius:50%;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .mobile-menu-close.show{display:flex!important} .mobile-menu-close:active{transform:rotate(90deg) scale(0.95);background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5)} .mobile-menu-close::before,.mobile-menu-close::after{content:'';position:absolute;width:clamp(20px,5vw,24px);height:clamp(3px,0.7vw,3.5px);background:#fff;border-radius:clamp(2px,0.5vw,3px);box-shadow:0 2px 4px rgba(0,0,0,0.3)} .mobile-menu-close::before{transform:rotate(45deg)} .mobile-menu-close::after{transform:rotate(-45deg)} .mobile-menu-toggle{display:none;position:fixed;top:10px;right:25px;z-index:998;width:45px;height:45px;background:rgba(44,76,111,0.9);border:2px solid rgba(74,144,214,0.6);border-radius:8px;cursor:default;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:all .3s;box-shadow:0 0 15px rgba(74,144,214,0.4)} .mobile-menu-toggle span{display:block;width:25px;height:3px;background:#fff;border-radius:2px;transition:all .3s} .mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(7px,7px)} .mobile-menu-toggle.active span:nth-child(2){opacity:0} .mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)} .mobile-menu-toggle:hover{background:rgba(58,92,127,0.9);box-shadow:0 0 20px rgba(74,144,214,0.6)} .mobile-nav{display:none;position:fixed;left:-100%;top:0;right:0;bottom:0;width:100%;max-width:100%;height:100vh;background:rgba(32,52,74,0.98);z-index:2000!important;padding:0;transition:left .18s cubic-bezier(0.4, 0, 0.2, 1),opacity .18s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:5px 0 20px rgba(0,0,0,0.5);overflow-y:auto;touch-action:pan-y;flex-direction:column;justify-content:flex-start;margin-top:0;border-radius:0;visibility:hidden;pointer-events:none;opacity:0;will-change:left,opacity;padding-top:clamp(120px,16vh,150px)} .mobile-nav.open{left:0;display:flex;visibility:visible;pointer-events:auto;opacity:1} .mobile-nav-header{position:absolute;top:0;left:0;right:0;padding:clamp(20px,4vh,30px) clamp(20px,5vw,30px);text-align:center;z-index:5;background:linear-gradient(180deg,rgba(32,52,74,1) 0%,rgba(32,52,74,0.8) 80%,transparent 100%);opacity:0;transform:translateY(-20px);transition:opacity .3s ease,transform .3s ease} .mobile-nav.open .mobile-nav-header{opacity:1;transform:translateY(0);transition-delay:.1s} .mobile-nav-title{font-size:clamp(18px,4.5vw,24px);font-weight:700;color:#fff;margin:0;letter-spacing:clamp(2px,0.5vw,3px);text-transform:uppercase;font-family:'Bahnschrift Condensed';text-shadow:0 2px 8px rgba(0,0,0,0.4)} .mobile-nav ul{padding:0 20px;margin:0;list-style:none} .mobile-nav-logo{display:none} .mobile-nav-close-x{position:absolute;top:clamp(15px,2.5vh,25px);right:clamp(15px,3vw,25px);cursor:default;width:clamp(44px,10vw,52px);height:clamp(44px,10vw,52px);background:rgba(255,255,255,0.15);border:2px solid rgba(255,255,255,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:10;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .mobile-nav-close-x:active{transform:rotate(90deg) scale(0.95);background:rgba(255,255,255,0.25);border-color:rgba(255,255,255,0.5)} .mobile-nav-close-x::before,.mobile-nav-close-x::after{content:'';position:absolute;width:clamp(20px,5vw,24px);height:clamp(3px,0.7vw,3.5px);background:#fff;border-radius:clamp(2px,0.5vw,3px);box-shadow:0 2px 4px rgba(0,0,0,0.3)} .mobile-nav-close-x::before{transform:rotate(45deg)} .mobile-nav-close-x::after{transform:rotate(-45deg)} .mobile-nav-logo img{width:clamp(120px,30vw,160px);height:auto} .mobile-nav-swipe-hint{display:none} .mobile-nav-arrows{display:none} .mobile-nav-arrow{display:none} .mobile-nav-hint-text{display:none} .left-panel.open{z-index:999} .mobile-nav.open{z-index:2000!important} .mobile-nav-close{display:none} .mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:8px;max-width:500px;margin:0 auto;padding:20px;flex:0} .mobile-nav li{opacity:0;transform:translateX(-20px);transition:opacity .3s ease,transform .3s ease} .mobile-nav.open li{opacity:1;transform:translateX(0)} .mobile-nav.open li:nth-child(1){transition-delay:.05s} .mobile-nav.open li:nth-child(2){transition-delay:.1s} .mobile-nav.open li:nth-child(3){transition-delay:.15s} .mobile-nav.open li:nth-child(4){transition-delay:.2s} .mobile-nav.open li:nth-child(5){transition-delay:.25s} .mobile-nav.open li:nth-child(6){transition-delay:.3s} .mobile-nav.open li:nth-child(7){transition-delay:.35s} .mobile-nav li a{display:flex;align-items:center;gap:15px;padding:18px 25px;font-size:clamp(14px,3.5vw,16px);font-weight:600;text-transform:uppercase;font-family:'Bahnschrift Condensed';color:#fff;border-radius:8px;transition:all .3s;border-left:4px solid transparent;background:rgba(255,255,255,0.05);position:relative;overflow:hidden} .mobile-nav li a::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(74,144,214,0.3) 0%,transparent 100%);opacity:0;transition:opacity .3s;pointer-events:none} .mobile-nav li a::before{content:'◆';color:#4a90d6;font-size:clamp(14px,3.5vw,16px);text-shadow:0 0 8px rgba(74,144,214,0.8);position:relative;z-index:1} .mobile-nav li a:hover,.mobile-nav li a:active,.mobile-nav li a.active{background:rgba(74,144,214,0.25);border-left-color:#4a90d6;padding-left:30px;box-shadow:0 0 15px rgba(74,144,214,0.4);transform:scale(1.02)} .mobile-nav li a:hover::after,.mobile-nav li a:active::after,.mobile-nav li a.active::after{opacity:1} .mobile-nav li a:active{background:rgba(74,144,214,0.35)!important;transform:scale(0.98)!important} .main-container{display:flex;height:calc(100vh - 145px);position:relative;z-index:10;margin-top:0} .left-panel{width:clamp(240px,19vw,300px);background:#0c1922;flex-shrink:0;display:flex;display:-webkit-flex;display:-moz-flex;flex-direction:column;-webkit-flex-direction:column;position:fixed;left:-100%;top:44%;bottom:auto;height:clamp(380px,50vh,480px);z-index:999;transition:left .15s cubic-bezier(0.4, 0.0, 0.2, 1),transform .15s cubic-bezier(0.4, 0.0, 0.2, 1);-webkit-transition:left .15s cubic-bezier(0.4, 0.0, 0.2, 1);-moz-transition:left .15s cubic-bezier(0.4, 0.0, 0.2, 1);border-top-right-radius:8px;-webkit-border-top-right-radius:8px;border-bottom-right-radius:8px;-webkit-border-bottom-right-radius:8px;border-top:1px solid #505a63;border-right:1px solid #505a63;border-left:none;overflow:visible;will-change:left;-webkit-transform:translateZ(0) translateY(-50%);-moz-transform:translateZ(0) translateY(-50%);transform:translateZ(0) translateY(-50%);backface-visibility:hidden;-webkit-backface-visibility:hidden} .left-panel::after{content:'';position:absolute;bottom:-90px;left:0;width:100%;height:90px;background:#0c1922;transform-origin:top left;transform:skewY(-7deg);border-right:1px solid #505a63;border-bottom:1px solid #505a63;border-bottom-right-radius:20px;z-index:-1;pointer-events:none} .left-panel.open{left:5px;z-index:999} .panel-header{background:#0c1922;padding:12px 15px 12px 60px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #14212a;flex-shrink:0;border-top-right-radius:8px} .panel-header h2{font-size:18px;letter-spacing:1px;font-weight:700} .panel-header button{background:0;color:#fff;font-size:28px;line-height:1;display:block;cursor:pointer} .projects-list{flex:1 1 auto;display:flex;flex-direction:column;overflow-y:visible;overflow-x:hidden;padding:12px 15px 5px 15px;gap:0;justify-content:flex-start} .projects-list::-webkit-scrollbar{display:none;width:0;height:0} .projects-list{scrollbar-width:none;-ms-overflow-style:none} .proj{position:relative;padding:0;border-bottom:0;transition:all .3s;cursor:default;display:flex;flex-direction:row;align-items:center;gap:12px;flex:0 0 auto;min-height:0;border-radius:6px;position:relative;overflow:visible;box-shadow:0 3px 8px rgba(0,0,0,0.3);margin-bottom:8px;max-width:100%;padding:8px;background:#14212a} .proj:hover{transform:translateX(5px);box-shadow:0 4px 12px rgba(0,0,0,0.4)} .proj>a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;text-indent:-9999px;overflow:hidden} .proj-img-wrapper{position:relative;width:clamp(80px,25%,100px);height:clamp(80px,25%,100px);aspect-ratio:1/1;overflow:hidden;border-radius:6px;flex-shrink:0} .proj-img-wrapper::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100%;background:linear-gradient(to top,rgba(0,0,0,0.4) 0%,transparent 100%);z-index:1;pointer-events:none} .proj img{width:100%;height:100%;object-fit:cover;border-radius:6px;flex-shrink:0;position:relative;z-index:0} .proj-badge{display:none!important} .proj-info{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;z-index:2} .proj-info-text{display:flex;flex-direction:column;gap:4px;width:100%} .proj h3{font-size:clamp(15px,1.2vw,17px);color:#fff;font-weight:800;margin:0;letter-spacing:0.5px;line-height:1.2;text-shadow:none} .proj p{font-size:clamp(13px,1vw,14px);color:rgba(255,255,255,0.65);margin:0;font-weight:500;text-transform:uppercase;letter-spacing:0.4px;text-shadow:none} .proj-arrow{width:auto;height:auto;background:transparent;border-radius:0;display:inline-flex;align-items:center;justify-content:flex-start;flex-shrink:0;transition:all .3s;box-shadow:none;font-size:clamp(13px,1vw,14px);color:#817863;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-top:2px} .proj-arrow::after{content:'DETAY →';font-size:inherit;color:inherit;font-weight:inherit} .proj:hover .proj-arrow{color:#fff} .proj a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;cursor:pointer!important} .all-proj{padding:8px 15px 10px 15px;text-align:center;border-top:0;flex-shrink:0;background:#0c1922;position:relative;z-index:2;border-bottom-right-radius:8px} .all-proj button,.all-proj a{background:transparent!important;color:#fff!important;padding:10px 16px!important;border:1px solid #2c3a44!important;border-radius:6px!important;font-size:14px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;width:100%!important;max-width:100%!important;letter-spacing:0.5px!important;box-shadow:none!important;transform:none!important;transition:all .3s!important;text-decoration:none!important;white-space:nowrap!important} .all-proj button .btn-dots,.all-proj a .btn-dots{display:grid!important;grid-template-columns:repeat(3,3px)!important;gap:2px!important;margin-left:4px!important} .all-proj button .btn-dots span,.all-proj a .btn-dots span{width:3px!important;height:3px!important;background:#fff!important;border-radius:50%!important} .all-proj button:hover,.all-proj a:hover{background:#14212a!important;border-color:#505a63!important} .hero{position:relative;width:100%;height:auto;min-height:100%;overflow:hidden;flex:1;padding-top:0} .toggle-projects{position:fixed;left:5px;top:50%;transform:translateY(-50%);width:clamp(32px,3.2vw,42px);height:clamp(280px,32vh,380px);background:transparent;z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 clamp(15px,2vh,20px) 0;cursor:default;transition:opacity .15s,visibility .15s,background .15s cubic-bezier(0.4, 0.0, 0.2, 1),left .15s;border-bottom-right-radius:8px;overflow:visible;will-change:transform} .toggle-projects::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:#0c1922;clip-path:path('M 0 0 L 27 23 Q 42 36, 42 48 L 42 380 L 0 380 Z');box-shadow:2px 0 10px rgba(0,0,0,0.5);border-bottom-right-radius:8px;z-index:1;transition:background .15s cubic-bezier(0.4, 0.0, 0.2, 1);will-change:background} .toggle-projects:hover{background:transparent} .toggle-projects:hover::before{background:#14212a} .toggle-arrow{color:#fff;font-size:clamp(22px,2.5vw,28px);font-weight:bold;position:absolute;top:12%;left:50%;transform:translate(-50%,-50%);background:none!important;border-radius:0!important;width:auto!important;height:auto!important;z-index:2} .toggle-projects.open .toggle-arrow{transform:translate(-50%,-50%)} .toggle-projects .text{writing-mode:vertical-rl;text-orientation:mixed;color:#fff;font-weight:700;letter-spacing:clamp(1px,0.2vw,1.8px);font-family:'Bahnschrift Condensed';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(180deg);z-index:2;white-space:nowrap} .toggle-projects .dots{display:grid;grid-template-columns:repeat(3,clamp(3px,0.4vw,4px));gap:clamp(2px,0.3vw,3px);position:absolute;bottom:clamp(12px,1.5vh,15px);left:50%;transform:translateX(-50%);z-index:2} .toggle-projects .dots span{width:clamp(3px,0.4vw,4px);height:clamp(3px,0.4vw,4px);background:#fff;border-radius:50%} .slide{position:absolute;width:100%;height:100%;opacity:0;transition:opacity 1s;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;top:0;height:100%;overflow:hidden} .slide.active{opacity:1} .slide img{width:100%;height:100%;object-fit:cover;-o-object-fit:cover;object-position:center center;-o-object-position:center center;image-rendering:auto;transform:scale(1);backface-visibility:hidden;-webkit-backface-visibility:hidden;max-width:none;max-height:none} .slide:first-child img{object-fit:cover;-o-object-fit:cover;object-position:center center} .slide-mobile-link{display:none!important} .darkened-image{filter:brightness(0.5)!important;-webkit-filter:brightness(0.5)!important} /* MASAÜSTÜ: Karartma tamamen kaldırıldı */ .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;display:flex;align-items:center;padding:0;padding-left:30%;padding-bottom:80px;z-index:10} .hero-content{max-width:650px;margin-left:0} .hero-content h2{font-size:clamp(19px,6vw,43px);line-height:1.15;margin-bottom:20px;text-transform:uppercase;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,0.65),0 1px 2px rgba(0,0,0,0.9)} .hero-content .blue{color:#817863;display:inline;font-size:inherit;line-height:inherit;margin:0;padding:0} .hero-content p{font-size:clamp(14px,2vw,17px);line-height:1.6;margin-bottom:20px;margin-top:20px;color:#ffffff;text-shadow:0 2px 6px rgba(0,0,0,0.7)} .hero-btns{display:flex;flex-wrap:wrap;gap:15px} .btn{padding:13px 28px;border-radius:4px;display:inline-flex;align-items:center;gap:8px;transition:all .3s;font-weight:700;text-transform:uppercase} .btn-blue{background:#817863;color:#fff} .btn-blue::after{content:'›';font-size:20px;font-weight:bold;margin-left:4px} .btn-submit::after{content:none!important} .btn-blue:hover{background:#6d6554;transform:translateY(-2px)} .btn-border{background:transparent;color:#fff;border:2px solid #fff} .btn-border:hover{background:rgba(255,255,255,.15)} .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:#fff;width:45px;height:45px;border-radius:50%;z-index:10;transition:all .3s;display:flex;align-items:center;justify-content:center} .arrow:hover{background:#817863} .arr-l{left:160px!important} .arr-l::before{content:'‹';font-size:28px;font-weight:bold;line-height:1} .arr-r{right:100px} .arr-r::before{content:'›';font-size:28px;font-weight:bold;line-height:1} /* Masaüstü arrow pozisyon responsive ayarları */ @media(min-width:769px) and (max-width:1024px){ /* BASE FONT SIZE */ body{font-size:17px!important} /* JOB META ITEM STRONG */ .job-meta-item strong{font-size:17px!important} /* JOB CARD & MODAL ELEMENTS */ .job-location,.job-type{font-size:17px!important} .job-modal-badge,.job-modal-date{font-size:17px!important} .job-modal-info-item{font-size:17px!important} .requirement-card p{font-size:17px!important} /* FORM ELEMENTS */ .form-intro,.form-group label{font-size:17px!important} /* BUTTON ELEMENTS */ .btn-apply{font-size:16px!important} /* CONTACT ITEM SPAN */ .contact-item span{font-size:17px!important} /* LEFT PANEL */ .left-panel{top:calc(43.3% + 49px)!important;height:clamp(360px,48vh,460px)!important} .left-panel.open{left:5px!important} /* PANEL HEADER TEXT */ .panel-header h2{font-size:0!important} .panel-header h2::before{content:"SATIŞTAKİ PROJELERİMİZ"!important;font-size:16px!important} /* PANEL HEADER PADDING - CONTENT STARTS AFTER TOGGLE BUTTON */ .panel-header{padding:12px 15px 12px 42px!important} /* PROJECTS LIST PADDING - ALIGN WITH HEADER */ .projects-list{padding:12px 15px 5px 42px!important} /* TOGGLE ARROW */ .toggle-arrow{top:calc(12% + 1px)!important} /* TOGGLE DOTS */ .toggle-projects .dots{grid-template-columns:repeat(3,2.8px)!important;gap:1.8px!important} .toggle-projects .dots span{width:2.8px!important;height:2.8px!important} /* ALL-PROJ BUTTON DOTS */ .all-proj button .btn-dots{margin-left:3px!important} /* ALL-PROJ BUTTON HOVER TEXT COLOR */ .all-proj button:hover{color:#fff!important} /* ALL-PROJ BUTTON FONT SIZE */ .all-proj button{font-size:13px!important} /* STATS CONTAINER - MAX WIDTH TO MATCH NAV */ .stats-container{max-width:1400px!important;margin:0 auto!important} /* FOOTER WRAP - MAX WIDTH TO MATCH NAV */ .footer-wrap{max-width:1400px!important;margin:0 auto!important;padding:30px 30px 30px 60px!important} /* FOOTER BOTTOM - MAX WIDTH TO MATCH NAV */ .footer-bottom{max-width:100%!important} /* FOOTER BOTTOM CONTENT - MAX WIDTH TO MATCH NAV */ .footer-bottom-content{max-width:1400px!important;margin:0 auto!important} /* TOP BAR */ .top-bar h1{font-size:28px!important} /* NAVIGATION */ nav ul{max-width:800px!important} nav li a{font-size:17px!important;padding:9px 18px!important;line-height:1.4!important} /* HERO SECTION */ .hero-content h2{font-size:45px!important;line-height:1.15!important;margin-bottom:20px!important} .hero-content p{font-size:18px!important;line-height:1.6!important;margin-bottom:20px!important;margin-top:20px!important} .hero-content .blue{color:#817863!important} .btn{font-size:16px!important;padding:13px 28px!important} .btn-blue{background:#817863!important;color:#fff!important} .btn-border{background:transparent!important;color:#fff!important;border:2px solid #fff!important} /* ARROWS */ .arrow{font-size:24px!important;width:45px!important;height:45px!important} .arr-l{left:130px!important} .arr-r{right:80px!important} .left-panel.open ~ .hero .arr-l{left:310px!important} /* SLIDE THUMBS */ .slide-thumbs{bottom:60px!important} .thumb-arrow-prev{margin-right:10px!important} .thumb-arrow-next{margin-left:10px!important} .thumb-title{font-size:17px!important} /* TOGGLE & WHATSAPP */ .toggle-projects .text{font-size:17px!important} .wa-float .text{font-size:17px!important} /* PROJECTS PANEL */ .proj h3{font-size:clamp(15px,1.2vw,17px)!important} .proj p{font-size:clamp(13px,1vw,14px)!important} .proj-arrow{font-size:clamp(13px,1vw,14px)!important} /* STATS SECTION */ .stat-number{font-size:32px!important;line-height:1.2!important} .stat-label{font-size:16px!important;line-height:1.4!important} /* FOOTER */ .footer-item h4{font-size:21px!important;margin-bottom:5px!important} .footer-item p{font-size:19px!important;line-height:1.5!important} .footer-bottom{font-size:14px!important;padding:15px 20px!important} .footer-bottom .footer-location{font-size:14px!important} .footer-bottom .footer-contact{font-size:14px!important} .footer-bottom .footer-email{font-size:14px!important} .footer-bottom .footer-social span{font-size:14px!important} .footer-copyright p{margin:0!important;color:#ccc!important;font-size:14px!important;font-weight:400!important;letter-spacing:0.5px!important} /* CONTACT PAGE */ .contact-header h1{font-size:clamp(32px,5vw,46px)!important} .contact-subtitle{font-size:clamp(18px,2vw,22px)!important} .company-info h2{font-size:clamp(24px,3vw,30px)!important} .company-subtitle{font-size:clamp(16px,1.5vw,18px)!important} .office-content h3{font-size:clamp(20px,2.5vw,24px)!important} .office-content p{font-size:clamp(17px,1.8vw,19px)!important} .contact-item{font-size:clamp(17px,1.8vw,19px)!important} .contact-email a{font-size:clamp(18px,2vw,22px)!important} .contact-form-section h3{font-size:clamp(24px,3vw,28px)!important} .contact-map h3{font-size:clamp(24px,3vw,30px)!important} .form-group label{font-size:clamp(17px,1.8vw,19px)!important} .form-group input,.form-group textarea{font-size:clamp(17px,1.8vw,19px)!important} .btn-submit{font-size:clamp(18px,2vw,20px)!important} /* ABOUT PAGE */ .about-intro h1{font-size:clamp(32px,5vw,46px)!important} .about-intro p{font-size:clamp(17px,1.8vw,19px)!important} .mvv-card h3{font-size:clamp(24px,3vw,28px)!important} .mvv-card p{font-size:clamp(17px,1.8vw,19px)!important} /* CAREER PAGE */ .job-card h3{font-size:clamp(24px,3vw,28px)!important} .job-card p{font-size:clamp(17px,1.8vw,19px)!important} /* NEWS PAGE */ .news-card h3{font-size:clamp(24px,3vw,28px)!important} .news-card p{font-size:clamp(17px,1.8vw,19px)!important} .news-content p{font-size:clamp(18px,1.6vw,20px)!important} .news-content h3{font-size:clamp(24px,2.5vw,30px)!important} .news-list li{font-size:clamp(18px,1.6vw,20px)!important} .breadcrumb{font-size:17px!important} /* CONTACT CONTENT */ .contact-content{max-width:950px!important;padding-bottom:2px!important} /* ABOUT PAGE - VALUES LIST */ .values-list li{font-size:17px!important} /* ABOUT PAGE - POLICY & CERTIFICATES */ .policy-intro{font-size:17px!important} .policy-item p{font-size:17px!important} .certificates-intro{font-size:17px!important} .certificate-content h4{font-size:18px!important} .certificate-content p{font-size:17px!important} /* NEWS PAGE */ .news-body h3{font-size:20px!important} .news-body p{font-size:17px!important} .news-read-more{font-size:17px!important} .news-category-badge{font-size:13px!important} .filter-btn{font-size:13px!important} } @media(min-width:1025px) and (max-width:1440px){ /* BASE FONT SIZE */ body{font-size:18px!important} /* JOB META ITEM STRONG */ .job-meta-item strong{font-size:18px!important} /* JOB CARD & MODAL ELEMENTS */ .job-location,.job-type{font-size:18px!important} .job-modal-badge,.job-modal-date{font-size:18px!important} .job-modal-info-item{font-size:18px!important} .requirement-card p{font-size:18px!important} /* FORM ELEMENTS */ .form-intro,.form-group label{font-size:18px!important} /* BUTTON ELEMENTS */ .btn-apply{font-size:17px!important} /* CONTACT ITEM SPAN */ .contact-item span{font-size:18px!important} /* LEFT PANEL */ .left-panel{top:calc(44.3% + 59px)!important;height:clamp(370px,49vh,470px)!important} .left-panel.open{left:5px!important} /* PANEL HEADER TEXT */ .panel-header h2{font-size:0!important} .panel-header h2::before{content:"SATIŞTAKİ PROJELERİMİZ"!important;font-size:17px!important} /* PANEL HEADER PADDING - CONTENT STARTS AFTER TOGGLE BUTTON */ .panel-header{padding:12px 15px 12px 46px!important} /* PROJECTS LIST PADDING - ALIGN WITH HEADER */ .projects-list{padding:12px 15px 5px 46px!important} /* TOGGLE ARROW */ .toggle-arrow{top:calc(12% + 1.5px)!important} /* TOGGLE DOTS */ .toggle-projects .dots{grid-template-columns:repeat(3,3.2px)!important;gap:2.2px!important} .toggle-projects .dots span{width:3.2px!important;height:3.2px!important} /* ALL-PROJ BUTTON DOTS */ .all-proj button .btn-dots{margin-left:4px!important} /* ALL-PROJ BUTTON HOVER TEXT COLOR */ .all-proj button:hover{color:#fff!important} /* ALL-PROJ BUTTON FONT SIZE */ .all-proj button{font-size:14px!important} /* STATS CONTAINER - MAX WIDTH TO MATCH NAV */ .stats-container{max-width:1400px!important;margin:0 auto!important} /* FOOTER WRAP - MAX WIDTH TO MATCH NAV */ .footer-wrap{max-width:1400px!important;margin:0 auto!important;padding:30px 30px 30px 60px!important} /* FOOTER BOTTOM - MAX WIDTH TO MATCH NAV */ .footer-bottom{max-width:100%!important} /* FOOTER BOTTOM CONTENT - MAX WIDTH TO MATCH NAV */ .footer-bottom-content{max-width:1400px!important;margin:0 auto!important} /* TOP BAR */ .top-bar h1{font-size:30px!important} /* NAVIGATION */ nav ul{max-width:950px!important} nav li a{font-size:18px!important;padding:9px 18px!important;line-height:1.4!important} /* HERO SECTION */ .hero-content h2{font-size:50px!important;line-height:1.15!important;margin-bottom:20px!important} .hero-content p{font-size:18px!important;line-height:1.6!important;margin-bottom:20px!important;margin-top:20px!important} .hero-content .blue{color:#817863!important} .btn{font-size:17px!important;padding:13px 28px!important} .btn-blue{background:#817863!important;color:#fff!important} .btn-border{background:transparent!important;color:#fff!important;border:2px solid #fff!important} /* ARROWS */ .arrow{font-size:24px!important;width:45px!important;height:45px!important} .arr-l{left:160px!important} .arr-r{right:100px!important} .left-panel.open ~ .hero .arr-l{left:360px!important} /* SLIDE THUMBS */ .slide-thumbs{bottom:60px!important} .thumb-arrow-prev{margin-right:10px!important} .thumb-arrow-next{margin-left:10px!important} .thumb-title{font-size:18px!important} /* TOGGLE & WHATSAPP */ .toggle-projects .text{font-size:18px!important} .wa-float .text{font-size:18px!important} /* PROJECTS PANEL */ .proj h3{font-size:clamp(15px,1.2vw,17px)!important} .proj p{font-size:clamp(13px,1vw,14px)!important} .proj-arrow{font-size:clamp(13px,1vw,14px)!important} /* STATS SECTION */ .stat-number{font-size:32px!important;line-height:1.2!important} .stat-label{font-size:17px!important;line-height:1.4!important} /* FOOTER */ .footer-item h4{font-size:21px!important;margin-bottom:5px!important} .footer-item p{font-size:19px!important;line-height:1.5!important} .footer-bottom{font-size:16px!important;padding:15px 20px!important} .footer-bottom .footer-location{font-size:16px!important} .footer-bottom .footer-contact{font-size:16px!important} .footer-bottom .footer-email{font-size:16px!important} .footer-bottom .footer-social span{font-size:16px!important} .footer-copyright p{margin:0!important;color:#ccc!important;font-size:16px!important;font-weight:400!important;letter-spacing:0.5px!important} /* CONTACT PAGE */ .contact-header h1{font-size:clamp(32px,5vw,46px)!important} .contact-subtitle{font-size:clamp(18px,2vw,22px)!important} .company-info h2{font-size:clamp(24px,3vw,30px)!important} .company-subtitle{font-size:clamp(16px,1.5vw,18px)!important} .office-content h3{font-size:clamp(20px,2.5vw,24px)!important} .office-content p{font-size:clamp(17px,1.8vw,19px)!important} .contact-item{font-size:clamp(17px,1.8vw,19px)!important} .contact-email a{font-size:clamp(18px,2vw,22px)!important} .contact-form-section h3{font-size:clamp(24px,3vw,28px)!important} .contact-map h3{font-size:clamp(24px,3vw,30px)!important} .form-group label{font-size:clamp(17px,1.8vw,19px)!important} .form-group input,.form-group textarea{font-size:clamp(17px,1.8vw,19px)!important} .btn-submit{font-size:clamp(18px,2vw,20px)!important} /* ABOUT PAGE */ .about-intro h1{font-size:clamp(32px,5vw,46px)!important} .about-intro p{font-size:clamp(17px,1.8vw,19px)!important} .mvv-card h3{font-size:clamp(24px,3vw,28px)!important} .mvv-card p{font-size:clamp(17px,1.8vw,19px)!important} /* CAREER PAGE */ .job-card h3{font-size:clamp(24px,3vw,28px)!important} .job-card p{font-size:clamp(17px,1.8vw,19px)!important} /* NEWS PAGE */ .news-card h3{font-size:clamp(24px,3vw,28px)!important} .news-card p{font-size:clamp(17px,1.8vw,19px)!important} .news-content p{font-size:clamp(18px,1.6vw,20px)!important} .news-content h3{font-size:clamp(24px,2.5vw,30px)!important} .news-list li{font-size:clamp(18px,1.6vw,20px)!important} .breadcrumb{font-size:18px!important} /* CONTACT CONTENT */ .contact-content{max-width:1100px!important;padding-bottom:2px!important} /* ABOUT PAGE - VALUES LIST */ .values-list li{font-size:18px!important} /* ABOUT PAGE - POLICY & CERTIFICATES */ .policy-intro{font-size:18px!important} .policy-item p{font-size:18px!important} .certificates-intro{font-size:18px!important} .certificate-content h4{font-size:19px!important} .certificate-content p{font-size:18px!important} /* NEWS PAGE */ .news-body h3{font-size:21px!important} .news-body p{font-size:18px!important} .news-read-more{font-size:18px!important} .news-category-badge{font-size:14px!important} .filter-btn{font-size:14px!important} } @media(min-width:1441px) and (max-width:1920px){ /* BASE FONT SIZE */ body{font-size:19px!important} /* JOB META ITEM STRONG */ .job-meta-item strong{font-size:19px!important} /* JOB CARD & MODAL ELEMENTS */ .job-location,.job-type{font-size:19px!important} .job-modal-badge,.job-modal-date{font-size:19px!important} .job-modal-info-item{font-size:19px!important} .requirement-card p{font-size:19px!important} /* FORM ELEMENTS */ .form-intro,.form-group label{font-size:19px!important} /* BUTTON ELEMENTS */ .btn-apply{font-size:18px!important} /* CONTACT ITEM SPAN */ .contact-item span{font-size:19px!important} /* LEFT PANEL */ .left-panel{top:calc(45.3% + 70px)!important;height:clamp(380px,50vh,480px)!important} .left-panel.open{left:5px!important} /* PANEL HEADER TEXT */ .panel-header h2{font-size:0!important} .panel-header h2::before{content:"SATIŞTAKİ PROJELERİMİZ"!important;font-size:19px!important} /* PANEL HEADER PADDING - CONTENT STARTS AFTER TOGGLE BUTTON */ .panel-header{padding:12px 15px 12px 50px!important} /* PROJECTS LIST PADDING - ALIGN WITH HEADER */ .projects-list{padding:12px 15px 5px 50px!important} /* TOGGLE ARROW */ .toggle-arrow{top:calc(12% + 2px)!important} /* TOGGLE DOTS */ .toggle-projects .dots{grid-template-columns:repeat(3,3.5px)!important;gap:2.5px!important} .toggle-projects .dots span{width:3.5px!important;height:3.5px!important} /* ALL-PROJ BUTTON DOTS */ .all-proj button .btn-dots{margin-left:5px!important} /* ALL-PROJ BUTTON HOVER TEXT COLOR */ .all-proj button:hover{color:#fff!important} /* ALL-PROJ BUTTON FONT SIZE */ .all-proj button{font-size:15px!important} /* STATS CONTAINER - MAX WIDTH TO MATCH NAV */ .stats-container{max-width:1400px!important;margin:0 auto!important} /* FOOTER WRAP - MAX WIDTH TO MATCH NAV */ .footer-wrap{max-width:1400px!important;margin:0 auto!important;padding:30px 30px 30px 60px!important} /* FOOTER BOTTOM - MAX WIDTH TO MATCH NAV */ .footer-bottom{max-width:100%!important} /* FOOTER BOTTOM CONTENT - MAX WIDTH TO MATCH NAV */ .footer-bottom-content{max-width:1400px!important;margin:0 auto!important} /* TOP BAR */ .top-bar h1{font-size:32px!important} /* NAVIGATION */ nav ul{max-width:1100px!important} nav li a{font-size:19px!important;padding:14px 24px!important;line-height:1.4!important} /* HERO SECTION */ .hero-content{max-width:750px!important} .hero-content h2{font-size:55px!important;line-height:1.15!important;margin-bottom:20px!important} .hero-content p{font-size:19px!important;line-height:1.6!important;margin-bottom:20px!important;margin-top:20px!important} .hero-content .blue{color:#817863!important} .btn{font-size:18px!important;padding:14px 32px!important} .btn-blue{background:#817863!important;color:#fff!important} .btn-border{background:transparent!important;color:#fff!important;border:2px solid #fff!important} /* ARROWS */ .arrow{font-size:26px!important;width:45px!important;height:45px!important} .arr-l{left:180px!important} .arr-r{right:110px!important} .left-panel.open ~ .hero .arr-l{left:390px!important} /* SLIDE THUMBS */ .slide-thumbs{bottom:60px!important} .thumb-arrow-prev{margin-right:10px!important} .thumb-arrow-next{margin-left:10px!important} .thumb-title{font-size:19px!important} /* TOGGLE & WHATSAPP */ .toggle-projects .text{font-size:19px!important} .wa-float .text{font-size:19px!important} /* PROJECTS PANEL */ .proj h3{font-size:clamp(15px,1.2vw,17px)!important} .proj p{font-size:clamp(13px,1vw,14px)!important} .proj-arrow{font-size:clamp(13px,1vw,14px)!important} /* STATS SECTION */ .stat-number{font-size:32px!important;line-height:1.2!important} .stat-label{font-size:18px!important;line-height:1.4!important} /* FOOTER */ .footer-wrap{max-width:1400px!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:40px!important;padding:30px 30px 30px 60px!important} .footer-item h4{font-size:21px!important;margin-bottom:5px!important} .footer-item p{font-size:19px!important;line-height:1.5!important} .footer-bottom{background:#2c2c2c!important;padding:15px 20px!important;text-align:center!important;font-size:18px!important} .footer-bottom-content{max-width:1400px!important;margin:0 auto!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:30px!important} .footer-bottom .footer-location{display:flex!important;align-items:center!important;gap:10px!important;color:#aaa!important;font-size:18px!important} .footer-bottom .footer-contact{display:flex!important;align-items:center!important;gap:10px!important;color:#aaa!important;font-size:18px!important} .footer-bottom .footer-email{display:flex!important;align-items:center!important;gap:10px!important;color:#aaa!important;font-size:18px!important} .footer-bottom .footer-social{display:flex!important;gap:15px!important;align-items:center!important} .footer-bottom .footer-social span{color:#aaa!important;font-size:18px!important;font-weight:600!important} .footer-copyright p{margin:0!important;color:#ccc!important;font-size:18px!important;font-weight:400!important;letter-spacing:0.5px!important} /* CONTACT PAGE */ .contact-header h1{font-size:clamp(32px,5vw,46px)!important} .contact-subtitle{font-size:clamp(18px,2vw,22px)!important} .company-info h2{font-size:clamp(24px,3vw,30px)!important} .company-subtitle{font-size:clamp(16px,1.5vw,18px)!important} .office-content h3{font-size:clamp(20px,2.5vw,24px)!important} .office-content p{font-size:clamp(17px,1.8vw,19px)!important} .contact-item{font-size:clamp(17px,1.8vw,19px)!important} .contact-email a{font-size:clamp(18px,2vw,22px)!important} .contact-form-section h3{font-size:clamp(24px,3vw,28px)!important} .contact-map h3{font-size:clamp(24px,3vw,30px)!important} .form-group label{font-size:clamp(17px,1.8vw,19px)!important} .form-group input,.form-group textarea{font-size:clamp(17px,1.8vw,19px)!important} .btn-submit{font-size:clamp(18px,2vw,20px)!important} /* ABOUT PAGE */ .about-intro h1{font-size:clamp(32px,5vw,46px)!important} .about-intro p{font-size:clamp(17px,1.8vw,19px)!important} .mvv-card h3{font-size:clamp(24px,3vw,28px)!important} .mvv-card p{font-size:clamp(17px,1.8vw,19px)!important} /* CAREER PAGE */ .job-card h3{font-size:clamp(24px,3vw,28px)!important} .job-card p{font-size:clamp(17px,1.8vw,19px)!important} /* NEWS PAGE */ .news-card h3{font-size:clamp(24px,3vw,28px)!important} .news-card p{font-size:clamp(17px,1.8vw,19px)!important} .news-content p{font-size:clamp(18px,1.6vw,20px)!important} .news-content h3{font-size:clamp(24px,2.5vw,30px)!important} .news-list li{font-size:clamp(18px,1.6vw,20px)!important} .breadcrumb{font-size:19px!important} /* CONTACT CONTENT */ .contact-content{max-width:1250px!important;padding-bottom:2px!important} /* ABOUT PAGE - VALUES LIST */ .values-list li{font-size:19px!important} /* ABOUT PAGE - POLICY & CERTIFICATES */ .policy-intro{font-size:19px!important} .policy-item p{font-size:19px!important} .certificates-intro{font-size:19px!important} .certificate-content h4{font-size:20px!important} .certificate-content p{font-size:19px!important} /* NEWS PAGE */ .news-body h3{font-size:22px!important} .news-body p{font-size:19px!important} .news-read-more{font-size:19px!important} .news-category-badge{font-size:15px!important} .filter-btn{font-size:15px!important} } @media(min-width:1921px){ /* BASE FONT SIZE */ body{font-size:21px!important} /* JOB META ITEM STRONG */ .job-meta-item strong{font-size:21px!important} /* JOB CARD & MODAL ELEMENTS */ .job-location,.job-type{font-size:21px!important} .job-modal-badge,.job-modal-date{font-size:21px!important} .job-modal-info-item{font-size:21px!important} .requirement-card p{font-size:21px!important} /* FORM ELEMENTS */ .form-intro,.form-group label{font-size:21px!important} /* BUTTON ELEMENTS */ .btn-apply{font-size:20px!important} /* CONTACT ITEM SPAN */ .contact-item span{font-size:21px!important} /* LEFT PANEL */ .left-panel{top:calc(46.3% + 80px)!important;height:clamp(390px,51vh,490px)!important} .left-panel.open{left:5px!important} /* PANEL HEADER TEXT */ .panel-header h2{font-size:0!important} .panel-header h2::before{content:"SATIŞTAKİ PROJELERİMİZ"!important;font-size:20px!important} /* PANEL HEADER PADDING - CONTENT STARTS AFTER TOGGLE BUTTON */ .panel-header{padding:12px 15px 12px 54px!important} /* PROJECTS LIST PADDING - ALIGN WITH HEADER */ .projects-list{padding:12px 15px 5px 54px!important} /* TOGGLE ARROW */ .toggle-arrow{top:calc(12% + 2.5px)!important} /* TOGGLE DOTS */ .toggle-projects .dots{grid-template-columns:repeat(3,3.5px)!important;gap:2.5px!important} .toggle-projects .dots span{width:3.5px!important;height:3.5px!important} /* ALL-PROJ BUTTON DOTS */ .all-proj button .btn-dots{margin-left:6px!important} /* ALL-PROJ BUTTON HOVER TEXT COLOR */ .all-proj button:hover{color:#fff!important} /* ALL-PROJ BUTTON FONT SIZE */ .all-proj button{font-size:16px!important} /* STATS CONTAINER - MAX WIDTH TO MATCH NAV */ .stats-container{max-width:1400px!important;margin:0 auto!important} /* FOOTER WRAP - MAX WIDTH TO MATCH NAV */ .footer-wrap{max-width:1400px!important;margin:0 auto!important;padding:30px 30px 30px 60px!important} /* FOOTER BOTTOM - MAX WIDTH TO MATCH NAV */ .footer-bottom{max-width:100%!important} /* FOOTER BOTTOM CONTENT - MAX WIDTH TO MATCH NAV */ .footer-bottom-content{max-width:1400px!important;margin:0 auto!important} /* TOP BAR */ .top-bar h1{font-size:34px!important} /* NAVIGATION */ nav ul{max-width:1250px!important} nav li a{font-size:21px!important;padding:14px 24px!important;line-height:1.4!important} /* HERO SECTION */ .hero-content{max-width:850px!important} .hero-content h2{font-size:60px!important;line-height:1.15!important;margin-bottom:20px!important} .hero-content p{font-size:21px!important;line-height:1.6!important;margin-bottom:20px!important;margin-top:20px!important} .hero-content .blue{color:#817863!important} .btn{font-size:20px!important;padding:16px 36px!important} .btn-blue{background:#817863!important;color:#fff!important} .btn-border{background:transparent!important;color:#fff!important;border:2px solid #fff!important} /* ARROWS */ .arrow{font-size:28px!important;width:45px!important;height:45px!important} .arr-l{left:200px!important} .arr-r{right:120px!important} .left-panel.open ~ .hero .arr-l{left:420px!important} /* SLIDE THUMBS */ .slide-thumbs{bottom:60px!important} .thumb-arrow-prev{margin-right:10px!important} .thumb-arrow-next{margin-left:10px!important} .thumb-title{font-size:21px!important} /* TOGGLE & WHATSAPP */ .toggle-projects .text{font-size:21px!important} .wa-float .text{font-size:21px!important} /* PROJECTS PANEL */ .proj h3{font-size:clamp(15px,1.2vw,17px)!important} .proj p{font-size:clamp(13px,1vw,14px)!important} .proj-arrow{font-size:clamp(13px,1vw,14px)!important} /* STATS SECTION */ .stat-number{font-size:32px!important;line-height:1.2!important} .stat-label{font-size:18px!important;line-height:1.4!important} /* FOOTER */ .footer-wrap{max-width:1400px!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:40px!important;padding:30px 30px 30px 60px!important} .footer-item h4{font-size:21px!important;margin-bottom:5px!important} .footer-item p{font-size:19px!important;line-height:1.5!important} .footer-bottom{background:#2c2c2c!important;padding:15px 20px!important;text-align:center!important;font-size:18px!important} .footer-bottom-content{max-width:1400px!important;margin:0 auto!important;display:flex!important;justify-content:space-between!important;align-items:center!important;gap:30px!important} .footer-bottom .footer-location{display:flex!important;align-items:center!important;gap:10px!important;color:#aaa!important;font-size:18px!important} .footer-bottom .footer-contact{display:flex!important;align-items:center!important;gap:10px!important;color:#aaa!important;font-size:18px!important} .footer-bottom .footer-email{display:flex!important;align-items:center!important;gap:10px!important;color:#aaa!important;font-size:18px!important} .footer-bottom .footer-social{display:flex!important;gap:15px!important;align-items:center!important} .footer-bottom .footer-social span{color:#aaa!important;font-size:18px!important;font-weight:600!important} .footer-copyright p{margin:0!important;color:#ccc!important;font-size:18px!important;font-weight:400!important;letter-spacing:0.5px!important} /* CONTACT PAGE */ .contact-header h1{font-size:clamp(32px,5vw,46px)!important} .contact-subtitle{font-size:clamp(18px,2vw,22px)!important} .company-info h2{font-size:clamp(24px,3vw,30px)!important} .company-subtitle{font-size:clamp(16px,1.5vw,18px)!important} .office-content h3{font-size:clamp(20px,2.5vw,24px)!important} .office-content p{font-size:clamp(17px,1.8vw,19px)!important} .contact-item{font-size:clamp(17px,1.8vw,19px)!important} .contact-email a{font-size:clamp(18px,2vw,22px)!important} .contact-form-section h3{font-size:clamp(24px,3vw,28px)!important} .contact-map h3{font-size:clamp(24px,3vw,30px)!important} .form-group label{font-size:clamp(17px,1.8vw,19px)!important} .form-group input,.form-group textarea{font-size:clamp(17px,1.8vw,19px)!important} .btn-submit{font-size:clamp(18px,2vw,20px)!important} /* ABOUT PAGE */ .about-intro h1{font-size:clamp(32px,5vw,46px)!important} .about-intro p{font-size:clamp(17px,1.8vw,19px)!important} .mvv-card h3{font-size:clamp(24px,3vw,28px)!important} .mvv-card p{font-size:clamp(17px,1.8vw,19px)!important} /* CAREER PAGE */ .job-card h3{font-size:clamp(24px,3vw,28px)!important} .job-card p{font-size:clamp(17px,1.8vw,19px)!important} /* NEWS PAGE */ .news-card h3{font-size:clamp(24px,3vw,28px)!important} .news-card p{font-size:clamp(17px,1.8vw,19px)!important} .news-content p{font-size:clamp(18px,1.6vw,20px)!important} .news-content h3{font-size:clamp(24px,2.5vw,30px)!important} .news-list li{font-size:clamp(18px,1.6vw,20px)!important} .breadcrumb{font-size:20px!important} /* CONTACT CONTENT */ .contact-content{max-width:1400px!important;padding-bottom:2px!important} /* ABOUT PAGE - VALUES LIST */ .values-list li{font-size:20px!important} /* ABOUT PAGE - POLICY & CERTIFICATES */ .policy-intro{font-size:20px!important} .policy-item p{font-size:20px!important} .certificates-intro{font-size:20px!important} .certificate-content h4{font-size:21px!important} .certificate-content p{font-size:20px!important} /* NEWS PAGE */ .news-body h3{font-size:23px!important} .news-body p{font-size:20px!important} .news-read-more{font-size:20px!important} .news-category-badge{font-size:16px!important} .filter-btn{font-size:16px!important} } /* Masaüstü: Projects list scrollbar gizle */ @media(min-width:769px){ .projects-list{ overflow-y:auto!important; scrollbar-width:none!important; -ms-overflow-style:none!important; } .projects-list::-webkit-scrollbar{ display:none!important; width:0!important; height:0!important; } } .dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:none;gap:12px;z-index:10} .dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.4);border:0;transition:all .3s} .dot.active{background:#817863;width:30px;border-radius:6px} .slide-thumbs{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:none;gap:0;z-index:15;align-items:center;opacity:0;transition:opacity .5s;max-width:90%} .slide-thumbs.show{display:flex;opacity:1} .thumb-arrow{background:rgba(0,0,0,.8);color:#fff;width:35px;height:35px;border-radius:50%;border:2px solid rgba(255,255,255,.3);cursor:default;transition:all .3s;display:flex;align-items:center;justify-content:center;flex-shrink:0} .thumb-arrow:hover{background:#817863;border-color:#817863} .thumb-arrow-prev{margin-right:10px} .thumb-arrow-prev::before{content:'‹';font-size:24px;font-weight:bold;line-height:1} .thumb-arrow-next{margin-left:10px} .thumb-arrow-next::before{content:'›';font-size:24px;font-weight:bold;line-height:1} .thumb-container{display:flex;display:-webkit-flex;gap:15px;overflow-x:scroll;overflow-y:hidden;max-width:800px;position:relative;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x;cursor:grab} .thumb-container::-webkit-scrollbar{display:none;width:0;height:0} .thumb-container.dragging{cursor:grabbing;scroll-behavior:auto} .thumb-item{width:180px;height:120px;border-radius:8px;overflow:hidden;cursor:default;transition:all .3s;border:3px solid transparent;position:relative;flex-shrink:0;transform-origin:center center;backface-visibility:hidden;-webkit-backface-visibility:hidden} .thumb-item:hover{border-color:#817863;box-shadow:0 0 20px rgba(129,120,99,.6)} .thumb-item.active{border-color:#817863;box-shadow:0 0 20px rgba(129,120,99,.6)} .thumb-item img{width:100%;height:100%;object-fit:cover} .thumb-item .thumb-title{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%);color:#fff;font-size:15px;font-weight:700;padding:15px 8px 8px;text-align:center;letter-spacing:.5px;text-transform:uppercase} footer{background:#efefef;padding:0;position:relative;z-index:1;margin-top:0} .stats-section{background:linear-gradient(180deg,#0a1420 0%,#0c1922 50%,#0a1420 100%);padding:30px 20px 30px 150px;position:relative;overflow:hidden} .stats-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(43,127,214,0.08) 0%,transparent 70%);z-index:0;pointer-events:none} .stats-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative;z-index:1} .stat-item{display:flex;gap:15px;align-items:flex-start;padding:0;background:transparent;border:none;border-right:1px solid rgba(255,255,255,0.08);transition:all .3s ease;cursor:default;position:relative} .stat-item:last-child{border-right:none} .stat-item::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,rgba(43,127,214,0.05) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1} .stat-item:hover::before{opacity:1} .stat-item:hover{transform:translateY(-5px)} .stat-icon{width:50px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative} .stat-icon svg{width:40px;height:40px;stroke:#817863;fill:none;stroke-width:1.5;filter:drop-shadow(0 0 12px rgba(129,120,99,0.4));transition:all .3s ease} .stat-item:hover .stat-icon svg{stroke:#817863;filter:drop-shadow(0 0 20px rgba(129,120,99,0.7))} .stat-content{flex:1} .stat-number{font-size:clamp(28px,3vw,36px);font-weight:900;color:#ffffff;line-height:1.2;margin-bottom:5px;font-family:'Bahnschrift Condensed';letter-spacing:-0.5px;transition:all .3s ease} .stat-item:hover .stat-number{color:#817863} .stat-label{font-size:clamp(15px,1.2vw,17px);color:#94a3b8;font-weight:500;text-transform:uppercase;letter-spacing:1px;font-family:'Bahnschrift Condensed';line-height:1.4;opacity:0.85} .footer-wrap{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:30px 30px 30px 60px;position:relative;z-index:1;justify-items:center} .footer-item{display:flex;gap:15px;align-items:flex-start;transition:transform .3s ease;cursor:default;-webkit-tap-highlight-color:transparent} .footer-item:hover,.footer-item:active{transform:translateY(-5px)} .footer-icon{width:50px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .footer-icon svg{width:38px;height:38px;fill:#817863} .footer-item h4{color:#0d4880;font-size:clamp(17px,1.8vw,19px);margin-bottom:5px;text-transform:uppercase;font-weight:900;letter-spacing:.5px;white-space:nowrap;text-shadow:0.5px 0 0 currentColor,-0.5px 0 0 currentColor;font-family:'Bahnschrift Condensed'} .footer-item p{color:#2c3238;font-size:clamp(15px,1.4vw,17px);line-height:1.5} .footer-bottom{background:#2c2c2c;padding:15px 20px;text-align:center} .footer-bottom-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:30px} .footer-location,.footer-contact,.footer-email{display:flex;align-items:center;gap:10px;color:#aaa;font-size:18px} .footer-location svg,.footer-contact svg,.footer-email svg{width:24px;height:24px;fill:#2b7fd6} .footer-location strong,.footer-contact strong,.footer-email strong{color:#fff;font-weight:600} .footer-social{display:flex;gap:15px;align-items:center} .footer-social span{color:#aaa;font-size:18px;font-weight:600} .footer-social a{color:#aaa;transition:color .3s} .footer-social a:hover{color:#2b7fd6} .footer-social svg{width:20px;height:20px;fill:currentColor} .wa-float{position:fixed;right:5px;top:50%;transform:translateY(-50%);width:clamp(32px,3.2vw,42px);height:clamp(240px,28vh,320px);background:transparent;z-index:1500;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:clamp(15px,2vh,20px) 0;cursor:default;transition:opacity .18s,visibility .18s,background .18s cubic-bezier(0.25, 0.1, 0.25, 1),right .18s;border-bottom-left-radius:8px;overflow:visible;will-change:transform} .wa-float::before{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(-90deg,#25D366 0%,#1ea855 100%);clip-path:path('M 42 0 L 15 23 Q 0 36, 0 48 L 0 320 L 42 320 Z');box-shadow:-2px 0 10px rgba(37,211,102,0.4);border-bottom-left-radius:8px;z-index:1;transition:background .18s cubic-bezier(0.25, 0.1, 0.25, 1);will-change:background} .wa-float:hover{background:transparent} .wa-float:hover::before{background:linear-gradient(-90deg,#1ea855 0%,#25D366 100%)} .wa-arrow{color:#fff;font-size:clamp(22px,2.5vw,28px);font-weight:bold;position:absolute;top:12%;left:50%;transform:translate(-50%,-50%);background:none!important;border-radius:0!important;width:auto!important;height:auto!important;z-index:2} .wa-float a{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;width:100%;text-decoration:none;position:relative;z-index:2;padding:clamp(15px,2vh,20px) 0} .wa-float .text{writing-mode:vertical-rl;text-orientation:mixed;color:#fff;font-weight:700;letter-spacing:clamp(1px,0.2vw,1.8px);font-family:'Bahnschrift Condensed';transform:rotate(180deg);z-index:2;position:relative;top:clamp(60px,7vh,70px)} .wa-float .wa-icon{width:clamp(20px,2vw,24px);height:clamp(20px,2vw,24px);display:flex;align-items:center;justify-content:center;z-index:2;transform:rotate(-90deg);position:absolute;bottom:clamp(12px,1.5vh,15px);left:50%;transform:translateX(-50%) rotate(-90deg)} .wa-float .wa-icon svg{width:100%;height:100%;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))} /* Masaüstü responsive ayarlar */ @media(min-width:769px) and (max-width:1024px){ /* HIDE OLD WHATSAPP BUTTON */ .wa-float{display:none!important} /* NEW FLOATING WHATSAPP BUTTON - BALLOON SHAPE */ .wa-float-new{position:fixed!important;right:15px!important;bottom:15px!important;width:60px!important;height:60px!important;background:#25D366!important;border-radius:50%!important;z-index:9999!important;transition:all 0.3s ease!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;box-shadow:0 4px 12px rgba(37,211,102,0.4)!important} .wa-float-new:hover{background:#1ea855!important;transform:scale(1.1)!important;box-shadow:0 6px 16px rgba(37,211,102,0.6)!important} .wa-float-new svg{position:relative!important;width:32px!important;height:32px!important;fill:#fff!important;transform:none!important} } @media(min-width:1025px) and (max-width:1440px){ /* HIDE OLD WHATSAPP BUTTON */ .wa-float{display:none!important} /* NEW FLOATING WHATSAPP BUTTON - BALLOON SHAPE */ .wa-float-new{position:fixed!important;right:15px!important;bottom:15px!important;width:70px!important;height:70px!important;background:#25D366!important;border-radius:50%!important;z-index:9999!important;transition:all 0.3s ease!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;box-shadow:0 4px 12px rgba(37,211,102,0.4)!important} .wa-float-new:hover{background:#1ea855!important;transform:scale(1.1)!important;box-shadow:0 6px 16px rgba(37,211,102,0.6)!important} .wa-float-new svg{position:relative!important;width:38px!important;height:38px!important;fill:#fff!important;transform:none!important} } @media(min-width:1441px) and (max-width:1920px){ /* HIDE OLD WHATSAPP BUTTON */ .wa-float{display:none!important} /* NEW FLOATING WHATSAPP BUTTON - BALLOON SHAPE */ .wa-float-new{position:fixed!important;right:15px!important;bottom:15px!important;width:75px!important;height:75px!important;background:#25D366!important;border-radius:50%!important;z-index:9999!important;transition:all 0.3s ease!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;box-shadow:0 4px 12px rgba(37,211,102,0.4)!important} .wa-float-new:hover{background:#1ea855!important;transform:scale(1.1)!important;box-shadow:0 6px 16px rgba(37,211,102,0.6)!important} .wa-float-new svg{position:relative!important;width:42px!important;height:42px!important;fill:#fff!important;transform:none!important} } @media(min-width:1921px){ /* HIDE OLD WHATSAPP BUTTON */ .wa-float{display:none!important} /* NEW FLOATING WHATSAPP BUTTON - BALLOON SHAPE */ .wa-float-new{position:fixed!important;right:15px!important;bottom:15px!important;width:80px!important;height:80px!important;background:#25D366!important;border-radius:50%!important;z-index:9999!important;transition:all 0.3s ease!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important;box-shadow:0 4px 12px rgba(37,211,102,0.4)!important} .wa-float-new:hover{background:#1ea855!important;transform:scale(1.1)!important;box-shadow:0 6px 16px rgba(37,211,102,0.6)!important} .wa-float-new svg{position:relative!important;width:46px!important;height:46px!important;fill:#fff!important;transform:none!important} } @keyframes wa-pulse-fab{0%,100%{box-shadow:0 4px 12px rgba(37,211,102,0.4),0 2px 4px rgba(0,0,0,0.2)}50%{box-shadow:0 4px 12px rgba(37,211,102,0.4),0 2px 4px rgba(0,0,0,0.2),0 0 0 12px rgba(37,211,102,0.2)}} @keyframes pulse-glow{ 0%,100%{ opacity:1; box-shadow:0 0 10px rgba(255,255,255,0.3); } 50%{ opacity:0.7; box-shadow:0 0 20px rgba(255,255,255,0.6); } } @keyframes pulse-glow-wa{ 0%,100%{ opacity:1; box-shadow:-2px 0 15px rgba(37,211,102,0.4); } 50%{ opacity:0.85; box-shadow:-2px 0 30px rgba(37,211,102,0.8); } } @keyframes pulse-glow-toggle{ 0%,100%{ opacity:1; box-shadow:2px 0 15px rgba(43,127,214,0.4); } 50%{ opacity:0.85; box-shadow:2px 0 30px rgba(43,127,214,0.8); } } @media(max-width:1024px){ .left-panel{width:230px} } @media(max-width:768px){ ::-webkit-scrollbar{display:none;width:0;height:0} *{scrollbar-width:none;-ms-overflow-style:none} .page-wrapper{margin:2px} .main-container{flex-direction:column;height:auto;margin-top:0;display:block;z-index:auto!important} .left-panel{width:100vw!important;position:fixed;left:-100%;top:0!important;bottom:0;right:0;border-radius:0;height:100vh!important;max-height:100vh!important;min-height:100vh!important;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:2000!important;transition:left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);border:none;box-shadow:none;display:flex;flex-direction:column;will-change:left;padding-bottom:calc(env(safe-area-inset-bottom,20px) + 30px);transform:none!important} .left-panel.open{left:0!important;width:100vw!important;height:100vh!important;z-index:2000!important;box-shadow:2px 0 20px rgba(0,0,0,0.3)} .left-panel::after{display:none} .left-panel::before{display:none} .panel-header{padding:clamp(12px,2.5vh,16px) clamp(15px,3vw,20px);justify-content:center;align-items:center;flex-direction:row;position:sticky;top:0;background:#0c1922;z-index:10;border-bottom:2px solid #14212a;border-top:none;border-left:none;border-right:none;position:relative;min-height:clamp(50px,10vh,65px);display:flex;flex-shrink:0;margin-top:20px} .panel-header h2{font-size:19px;text-align:center;flex:1;line-height:1.2;letter-spacing:1.2px;font-weight:800} .panel-header button:not(.panel-close-x){display:none!important} .panel-header .panel-close-x{position:absolute!important;top:50%!important;right:clamp(15px,3vw,20px)!important;transform:translateY(-50%) translateY(clamp(3px,0.6vh,5px))!important;cursor:pointer!important;width:clamp(36px,8vw,44px)!important;height:clamp(36px,8vw,44px)!important;background:rgba(255,255,255,0.1)!important;border:2px solid rgba(255,255,255,0.25)!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:all .3s!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;z-index:20!important;font-size:clamp(22px,5.5vw,28px)!important;color:#fff!important;line-height:1!important;-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important} .panel-header .panel-close-x:active{transform:translateY(-50%) translateY(clamp(3px,0.6vh,5px)) rotate(90deg) scale(0.9)!important;background:rgba(129,120,99,0.3)!important;border-color:rgba(129,120,99,0.6)!important} .projects-list{padding:clamp(10px,2vh,15px) clamp(15px,3vw,20px) clamp(10px,2vh,15px);gap:clamp(12px,2.5vh,18px);overflow-y:auto;flex:1 1 auto;min-height:0;max-height:none;background:linear-gradient(180deg,rgba(14,25,34,0.4) 0%,transparent 100%)} .proj{position:relative;flex-direction:column!important;align-items:stretch!important;text-align:left;padding:0!important;background:linear-gradient(135deg,rgba(20,33,42,0.95) 0%,rgba(12,25,34,0.98) 100%)!important;border-radius:clamp(18px,3.5vw,26px)!important;margin-bottom:clamp(14px,2.8vh,20px);gap:0!important;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.2)!important;transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1),box-shadow .35s,background .35s!important;-webkit-tap-highlight-color:transparent;border:1px solid rgba(255,255,255,0.05)} .proj:hover,.proj:active{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 48px rgba(129,120,99,0.5),0 8px 16px rgba(0,0,0,0.3)!important;background:linear-gradient(135deg,rgba(129,120,99,0.25) 0%,rgba(20,33,42,0.95) 100%)!important;border-color:rgba(129,120,99,0.3)} .proj>a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;text-indent:-9999px;overflow:hidden} .proj-img-wrapper{position:relative;width:100%;aspect-ratio:16/10;min-height:clamp(150px,30vh,200px);overflow:hidden;border-radius:clamp(18px,3.5vw,26px) clamp(18px,3.5vw,26px) clamp(12px,2.5vw,18px) clamp(12px,2.5vw,18px);transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 12px rgba(0,0,0,0.2)} .proj:hover .proj-img-wrapper,.proj:active .proj-img-wrapper{filter:brightness(1.15) contrast(1.05);transform:scale(1.02);box-shadow:0 6px 18px rgba(0,0,0,0.3)} .proj-img-wrapper::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,0.6) 0%,transparent 100%);z-index:1;pointer-events:none;opacity:0.7;transition:opacity .3s} .proj:hover .proj-img-wrapper::after,.proj:active .proj-img-wrapper::after{opacity:0.9} .proj img{width:100%!important;max-width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important;border-radius:clamp(18px,3.5vw,26px) clamp(18px,3.5vw,26px) clamp(12px,2.5vw,18px) clamp(12px,2.5vw,18px)!important;box-shadow:none!important;margin-bottom:0!important;flex-shrink:0;position:relative;z-index:0;display:block!important;transition:transform .35s cubic-bezier(0.4, 0, 0.2, 1)} .proj-badge{display:none!important} .proj-info{position:relative;bottom:auto;left:auto;right:auto;z-index:2;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:clamp(10px,2vw,14px);padding:clamp(14px,3vw,20px) clamp(16px,3.5vw,22px);background:linear-gradient(180deg,rgba(12,25,34,0.6) 0%,rgba(12,25,34,0.95) 100%);border-radius:0;transition:background .35s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .proj:hover .proj-info,.proj:active .proj-info{background:linear-gradient(180deg,rgba(129,120,99,0.3) 0%,rgba(129,120,99,0.25) 100%)} .proj-info-text{flex:1;display:flex;flex-direction:column;gap:clamp(3px,0.6vh,5px)} .proj h3{font-size:19px;color:#fff;font-weight:800;margin:0;letter-spacing:0.8px;line-height:1.3;text-shadow:0 2px 8px rgba(0,0,0,0.3);transition:all .3s} .proj:hover h3,.proj:active h3{color:#f5f5f5;text-shadow:0 2px 12px rgba(129,120,99,0.6);transform:translateX(2px)} .proj p{font-size:13px;color:rgba(255,255,255,0.75);margin:0;font-weight:600;text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 4px rgba(0,0,0,0.3)} .proj-arrow{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);background:linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(245,245,245,0.9) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 12px rgba(0,0,0,0.25),inset 0 1px 2px rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.2)} .proj-arrow::after{content:'→';font-size:clamp(18px,4.5vw,22px);color:#817863;font-weight:bold;transition:all .3s} .proj:hover .proj-arrow,.proj:active .proj-arrow{background:linear-gradient(135deg,rgb(129,120,99) 0%,rgb(149,140,119) 100%);transform:scale(1.15) rotate(0deg);box-shadow:0 6px 20px rgba(129,120,99,0.6),inset 0 1px 2px rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3)} .proj:hover .proj-arrow::after,.proj:active .proj-arrow::after{color:#fff;transform:translateX(2px)} .proj a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;cursor:pointer!important} .all-proj{padding:clamp(10px,2vh,15px) clamp(15px,3vw,20px) clamp(12px,2.5vh,18px);position:relative;background:linear-gradient(180deg,rgba(14,25,34,0.4) 0%,transparent 100%);border-top:2px solid #14212a;flex-shrink:0;z-index:11;width:100%;margin-bottom:clamp(15px,3vh,25px)} .all-proj button{padding:clamp(12px,2.5vh,15px) clamp(20px,4vw,25px);font-size:19px;width:100%;max-width:380px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.5vw,10px);background:rgb(129,120,99);border:2px solid rgba(255,255,255,0.1);border-radius:clamp(8px,2vw,12px);color:#fff;font-weight:700;letter-spacing:0.8px;transition:all .3s;cursor:pointer} .all-proj button:hover,.all-proj button:active{background:rgb(149,140,119);border-color:rgba(255,255,255,0.2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(129,120,99,0.5);color:#fff!important} .all-proj button .btn-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2px,0.5vw,3px)} .all-proj button .btn-dots span{width:clamp(3px,0.8vw,5px);height:clamp(3px,0.8vw,5px);background:#fff;border-radius:50%;transition:all .3s} .all-proj button:hover .btn-dots span{background:#fff!important} .hero{width:100vw;height:clamp(400px,60vh,600px);padding-top:clamp(55px,8vh,70px);position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;margin-top:0;overflow:hidden} .contact-page .hero{padding-top:clamp(55px,8vh,65px)} .slide{top:-48px;height:calc(100% + 48px);overflow:hidden} .slide:first-child{display:none!important} .slide:first-child img{object-fit:cover;-o-object-fit:cover;width:100%;height:100%;max-width:100%;max-height:100%;content:url('../../resimler/site/slogan_mobile.jpg')} nav{display:none} .mobile-menu-toggle{display:none!important} .mobile-menu-pull{display:flex} .mobile-menu-close{z-index:1101;position:fixed} .mobile-nav{display:block;left:-100%;transition:left .18s cubic-bezier(0.4, 0, 0.2, 1),opacity .18s ease;display:flex;justify-content:flex-start;width:100%;max-width:100%;height:100vh;position:fixed;top:0;right:0;bottom:0;visibility:hidden;pointer-events:none;padding-top:clamp(120px,16vh,150px);opacity:0;will-change:left,opacity} .mobile-nav-title{font-size:19px!important} .mobile-nav li a{font-size:19px!important} .mobile-nav li a::before{font-size:19px!important} .mobile-nav.open{left:0;visibility:visible;pointer-events:auto;opacity:1} .mobile-nav.open + * .mobile-menu-close{display:flex!important} .mobile-nav ul{padding:0 20px} nav{max-width:100%;padding:8px 5px;border-radius:6px;top:8px;display:none} nav ul{flex-wrap:wrap;gap:4px} nav li a{padding:10px 12px;font-size:9px;gap:6px} nav li a::before{font-size:10px} /* MOBİL: Karartma tamamen kaldırıldı */ .overlay{padding-left:5%;padding-right:5%;padding-bottom:clamp(40px,8vh,60px);background:transparent!important;align-items:flex-start!important} .hero-content{max-width:100%;padding:0 clamp(10px,3vw,20px);margin-top:clamp(80px,16vh,110px)} .hero-content h2{font-size:clamp(24px,8vw,36px);line-height:1.3;margin-bottom:15px;text-shadow:0 2px 8px rgba(0,0,0,0.65),0 1px 2px rgba(0,0,0,0.9)} .hero-content p{font-size:clamp(15px,3.5vw,18px);margin-bottom:15px;margin-top:15px;color:#ffffff;text-shadow:0 2px 6px rgba(0,0,0,0.7)} .hero-btns{display:none!important} .btn{display:none!important} .btn-submit{display:inline-flex!important} .slide-mobile-link{display:block!important;position:absolute;top:0;left:0;width:100%;height:100%;z-index:15!important;cursor:pointer!important} .arrow{display:none!important} .arr-l{display:none!important} .arr-r{display:none!important} .slide-thumbs{display:none!important} .thumb-arrow{display:none!important} .thumb-container{display:none!important} .thumb-item{display:none!important} .dots{display:flex!important;bottom:clamp(15px,3vh,25px);gap:clamp(8px,2vw,12px);z-index:15} .dot{width:clamp(8px,2vw,10px);height:clamp(8px,2vw,10px);border-radius:50%;background:rgba(255,255,255,0.5);border:0;transition:all .3s;cursor:pointer} .dot.active{background:#2b7fd6;width:clamp(24px,6vw,32px);border-radius:clamp(4px,1vw,6px);box-shadow:0 0 10px rgba(43,127,214,0.6)} .top-bar{height:clamp(55px,8vh,70px);min-height:clamp(55px,8vh,70px);flex-direction:row;padding:0;border:none;box-shadow:0 2px 12px rgba(0,0,0,0.25);background:linear-gradient(90deg,#2b7fd6 0%,#5ba8de 50%,#d4d4d4 100%)!important;overflow:visible;top:0;left:0;right:0;z-index:1000;align-items:center;justify-content:center;border-radius:0;position:relative} .top-bar::before,.top-bar::after{display:none} .top-bar-left{padding:clamp(5px,1vh,8px) clamp(10px,3vw,20px) clamp(10px,2vh,15px);flex:1;justify-content:flex-start;text-align:left;background:transparent;position:relative;z-index:2;min-height:100%;display:flex;align-items:flex-start;flex-direction:row;gap:clamp(80px,20vw,110px);overflow:visible;border-radius:0;box-shadow:none} .top-bar-left::before{display:none} .top-bar-left::after{display:none} .top-bar-left .logo{max-width:clamp(120px,30vw,160px);height:auto;display:block;margin-bottom:0;order:2;flex-shrink:0;margin-left:clamp(15px,3vw,22px);margin-top:clamp(5px,1.2vh,8px)} .top-bar h1{display:block!important;font-size:clamp(13px,3.3vw,19px)!important;text-align:left;line-height:1.3;max-width:fit-content;padding:clamp(5px,1.2vh,8px) 0 0 0;margin:3px 0 0 0;word-wrap:break-word;white-space:normal;hyphens:auto;flex:0 0 auto;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.4);letter-spacing:clamp(0.5px,0.14vw,0.7px);font-weight:700;position:relative;order:1;min-width:0} .top-bar h1 .mobile-br{display:inline} .top-bar-right{display:none} .top-bar-right::before,.top-bar-right::after{display:none} .top-bar-right .logo{display:none} .page-wrapper{margin:2px;box-sizing:border-box;max-width:calc(100vw - 4px)} footer{padding:0;overflow:hidden;margin:0;width:100%} .stats-section{background:linear-gradient(180deg,#0a1420 0%,#0c1922 50%,#0a1420 100%);padding:5px 3px;position:relative;overflow:hidden} .stats-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(43,127,214,0.08) 0%,transparent 70%);z-index:0;pointer-events:none} .stats-container{grid-template-columns:repeat(2,1fr);gap:clamp(8px,2vw,10px);max-width:100%;box-sizing:border-box;margin:0;width:100%} .stat-item{flex-direction:column;align-items:center;text-align:center;background:linear-gradient(135deg,rgba(43,127,214,0.12) 0%,rgba(43,127,214,0.08) 100%);padding:clamp(10px,2.5vw,12px) clamp(6px,1.5vw,8px);border-radius:clamp(8px,2vw,12px);box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:all .3s;box-sizing:border-box;min-width:0;width:100%;border-right:none!important} .stat-item::before{display:none} .stat-item:hover,.stat-item:active{transform:translateY(-3px);box-shadow:0 4px 12px rgba(43,127,214,0.25);background:linear-gradient(135deg,rgba(43,127,214,0.18) 0%,rgba(43,127,214,0.12) 100%)} .stat-icon{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);margin-bottom:clamp(6px,1.5vh,8px)} .stat-icon svg{width:clamp(28px,7vw,36px);height:clamp(28px,7vw,36px)} .stat-content{text-align:center} .stat-number{font-size:clamp(20px,5vw,26px);margin-bottom:clamp(3px,0.8vh,5px)} .stat-label{font-size:clamp(10px,2.5vw,12px);line-height:1.3;word-wrap:break-word;white-space:normal;overflow-wrap:break-word} .footer-wrap{grid-template-columns:repeat(2,1fr);gap:clamp(8px,2vw,10px);padding:5px 3px;justify-items:stretch;max-width:100%;box-sizing:border-box;margin:0;width:100%} .footer-item{flex-direction:column;align-items:center;text-align:center;background:linear-gradient(135deg,rgba(91,168,222,0.08) 0%,rgba(43,127,214,0.08) 100%);padding:clamp(10px,2.5vw,12px) clamp(6px,1.5vw,8px);border-radius:clamp(8px,2vw,12px);box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all .3s;box-sizing:border-box;min-width:0;width:100%} .footer-item:hover,.footer-item:active{transform:translateY(-3px);box-shadow:0 4px 12px rgba(43,127,214,0.15);background:linear-gradient(135deg,rgba(91,168,222,0.12) 0%,rgba(43,127,214,0.12) 100%)} .footer-icon{margin-bottom:clamp(6px,1.5vh,8px)} .footer-icon img{width:clamp(36px,9vw,44px);height:clamp(36px,9vw,44px);object-fit:contain} .footer-item h4{font-size:15px!important;margin-bottom:5px;line-height:1.3;word-wrap:break-word;white-space:normal;overflow-wrap:break-word;hyphens:auto;max-width:100%;font-weight:900!important} .footer-item p{font-size:13px!important;line-height:1.4;word-wrap:break-word;white-space:normal;overflow-wrap:break-word;font-weight:500!important} .footer-bottom-content{flex-direction:column;gap:8px;text-align:center;padding:3px;max-width:100%;box-sizing:border-box} .footer-location,.footer-contact,.footer-email{flex-direction:column;text-align:center;font-size:11px} .footer-social{flex-wrap:wrap;justify-content:center} .footer-social span{font-size:11px!important} .wa-float{display:flex!important;position:fixed!important;right:0!important;top:60%!important;transform:translateY(-50%)!important;width:clamp(38px,8vw,50px)!important;height:clamp(60px,12vh,75px)!important;background:linear-gradient(-90deg,#25D366 0%,#1ea855 100%)!important;border-top-left-radius:clamp(8px,2vw,12px)!important;border-bottom-left-radius:clamp(8px,2vw,12px)!important;box-shadow:-2px 0 15px rgba(37,211,102,0.4)!important;transition:width .3s ease,background .3s,box-shadow .3s!important;z-index:99999!important;overflow:hidden!important;align-items:center!important;justify-content:flex-start!important;padding:0!important;flex-direction:row-reverse!important} .wa-float::before{display:none!important} .wa-float:hover,.wa-float:active{background:linear-gradient(-90deg,#1ea855 0%,#25D366 100%)!important;box-shadow:-2px 0 20px rgba(37,211,102,0.6)!important} .toggle-projects{display:flex!important;position:fixed!important;left:0!important;top:60%!important;transform:translateY(-50%)!important;width:clamp(38px,8vw,50px)!important;height:240px!important;background:linear-gradient(90deg,#2b7fd6 0%,#1e5fa8 100%)!important;border-top-right-radius:clamp(8px,2vw,12px)!important;border-bottom-right-radius:clamp(8px,2vw,12px)!important;box-shadow:2px 0 15px rgba(43,127,214,0.4)!important;transition:background 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, visibility 0.3s ease, left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1)!important;z-index:99999!important;overflow:hidden!important;align-items:center!important;justify-content:center!important;padding:0!important;flex-direction:column!important;will-change:left,opacity} .left-panel.open ~ .hero .toggle-projects{opacity:0!important;visibility:hidden!important;pointer-events:none!important;left:-100%!important} .toggle-projects::before{display:none!important} .toggle-projects:hover,.toggle-projects:active{background:linear-gradient(90deg,#1e5fa8 0%,#2b7fd6 100%)!important;box-shadow:2px 0 20px rgba(43,127,214,0.6)!important} .toggle-arrow{display:none!important} .toggle-projects .text{display:block!important;writing-mode:vertical-rl!important;text-orientation:mixed!important;color:#fff!important;font-size:14px!important;font-weight:700!important;letter-spacing:2px!important;font-family:'Bahnschrift Condensed'!important;transform:rotate(-180deg)!important;white-space:nowrap!important;margin-top:0!important;margin-left:0!important;opacity:1!important;transition:opacity .3s!important;position:absolute!important;top:45%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} .toggle-projects:hover .text,.toggle-projects:active .text{display:block!important;opacity:1!important} .toggle-projects .dots{display:none!important} .wa-float a{width:100%!important;height:100%!important;border-radius:0!important;padding:0!important;border:none!important;min-height:auto!important;flex-direction:row!important;justify-content:center!important;align-items:center!important;z-index:99999!important;position:relative!important} .wa-float .wa-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:clamp(20px,5vw,26px)!important;height:clamp(20px,5vw,26px)!important;padding-right:clamp(4px,1vw,6px)!important;transform:translate(clamp(-6px,-1.5vw,-10px),clamp(-13px,-3vw,-19px))!important;z-index:99999!important} /* HIDE NEW WHATSAPP BUTTON ON MOBILE */ .wa-float-new{display:none!important} .wa-arrow{display:none!important} .wa-float .wa-icon svg{transform:none!important;width:100%!important;height:100%!important} .wa-float .text{display:none!important;writing-mode:horizontal-tb!important;color:#fff!important;font-size:clamp(10px,2.5vw,13px)!important;font-weight:700!important;letter-spacing:clamp(1px,0.2vw,1.5px)!important;font-family:'Bahnschrift Condensed'!important;transform:none!important;white-space:nowrap!important;margin-right:clamp(6px,1.5vw,10px)!important;opacity:0!important;transition:opacity .3s!important;position:static!important;top:auto!important} .wa-float:hover .text,.wa-float:active .text{display:none!important;opacity:0!important} .projects-list{padding:10px 15px;gap:8px} .proj{position:relative;padding:10px} .proj h3{font-size:12px} .proj p{font-size:9px} .proj a{font-size:10px} } @media(max-width:430px){ .panel-header{margin-top:15px} .panel-header h2{font-size:17px!important} .all-proj button{font-size:17px!important} .mobile-nav-title{font-size:17px!important} .mobile-nav li a{font-size:17px!important} .mobile-nav li a::before{font-size:17px!important} .proj h3{font-size:17px!important} .proj p{font-size:11px!important} .top-bar h1{font-size:clamp(12px,3vw,16px)!important;letter-spacing:clamp(0.4px,0.12vw,0.6px)} .top-bar-left{gap:clamp(70px,17vw,90px)} .top-bar-left .logo{max-width:clamp(110px,27vw,140px);margin-left:clamp(15px,3vw,22px)} .hero{height:clamp(350px,55vh,500px)} .hero-content{margin-top:clamp(55px,11vh,80px)} .hero-content h2{font-size:clamp(20px,7vw,28px)} nav li a{font-size:8px;padding:8px 10px} .dots{gap:clamp(7px,1.8vw,10px)} .dot{width:clamp(7px,1.8vw,9px);height:clamp(7px,1.8vw,9px)} .dot.active{width:clamp(20px,5vw,28px)} /* WIDER BUTTONS FOR MOBILE */ .toggle-projects{width:clamp(36px,7.5vw,48px)!important;height:220px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:42%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} .wa-float{width:clamp(36px,7.5vw,48px)!important;height:clamp(55px,11vh,70px)!important;top:60%!important} .wa-float .wa-icon{display:flex!important} .wa-arrow{display:none!important} .footer-social span{font-size:11px!important} .btn{width:55%;max-width:200px} .btn-submit{margin-left:auto!important;margin-right:auto!important} /* İletişim sayfası ortalanmış düzen */ .contact-header{text-align:center!important;margin-bottom:20px!important} .contact-header h1{text-align:center!important;font-size:32px!important;letter-spacing:2px!important} .about-section h2{text-align:center!important} .about-section p{text-align:center!important} .offices-container{display:flex!important;flex-direction:column!important;gap:20px!important} .offices-container .about-section{background:#ffffff!important;padding:20px!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(0,0,0,0.1)!important;text-align:center!important} .offices-container .about-section h2{font-size:20px!important;margin-bottom:15px!important;text-align:center!important} .offices-container .about-section p{font-size:14px!important;line-height:1.6!important;margin-bottom:10px!important;text-align:center!important} .contact-map h3{text-align:center!important;font-size:24px!important;margin-bottom:20px!important} .contact-form h2,.about-section h2{text-align:center!important} /* İletişim formu ayarları */ .contact-form{max-width:300px!important;margin:0 auto!important;padding:0!important;pointer-events:auto!important} /* Left panel after gizle */ .left-panel::after{display:none!important} .left-panel::before{display:none!important} /* İletişim container düzenlemeleri */ .contact-container{border-radius:0!important} .contact-content{padding:0!important} } @media(max-width:402px){ /* WIDER BUTTONS FOR MOBILE - 402px viewport */ .toggle-projects{width:clamp(35px,7.2vw,47px)!important;height:215px!important;top:60%!important} .toggle-projects .text{font-size:12.5px!important;position:absolute!important;top:48%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} /* İletişim sayfası ortalanmış düzen */ .contact-header{text-align:center!important;margin-bottom:20px!important} .contact-header h1{text-align:center!important;font-size:30px!important;letter-spacing:2px!important} .about-section h2{text-align:center!important} .about-section p{text-align:center!important} .offices-container{display:flex!important;flex-direction:column!important;gap:20px!important} .offices-container .about-section{background:#ffffff!important;padding:20px!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(0,0,0,0.1)!important;text-align:center!important} .offices-container .about-section h2{font-size:19px!important;margin-bottom:15px!important;text-align:center!important} .offices-container .about-section p{font-size:13px!important;line-height:1.6!important;margin-bottom:10px!important;text-align:center!important} .contact-map h3{text-align:center!important;font-size:22px!important;margin-bottom:20px!important} /* İletişim formu ayarları */ .contact-form{max-width:280px!important;margin:0 auto!important;padding:0!important;pointer-events:auto!important} /* Left panel after gizle */ .left-panel::after{display:none!important} .left-panel::before{display:none!important} } @media(max-width:375px){ .contact-content{padding:0 1px 3px;width:100%;margin:0 auto} .panel-header{margin-top:12px} .panel-header h2{font-size:16px!important} .all-proj button{font-size:16px!important} .mobile-nav-title{font-size:16px!important} .mobile-nav li a{font-size:16px!important} .mobile-nav li a::before{font-size:16px!important} .proj h3{font-size:16px!important} .proj p{font-size:10px!important} .top-bar h1{font-size:clamp(11px,2.8vw,14px)!important;letter-spacing:clamp(0.35px,0.11vw,0.55px);line-height:1.25} .top-bar-left{gap:clamp(65px,16vw,85px)} .top-bar-left .logo{max-width:clamp(100px,25vw,130px);margin-left:clamp(15px,3vw,22px)} .hero{height:clamp(320px,50vh,450px)} .hero-content{margin-top:clamp(60px,12vh,85px)} .hero-content h2{font-size:clamp(18px,6.5vw,24px)} .hero-content p{font-size:clamp(12px,3.2vw,14px)} nav li a{font-size:7px;padding:7px 8px} .btn{width:55%;max-width:200px;font-size:clamp(11px,3vw,13px);padding:10px 16px} .thumb-item{width:calc((100vw - 60px - 8px)/3);min-width:90px;max-width:105px} .thumb-container{max-width:calc(100vw - 60px);gap:4px} .thumb-arrow{width:26px;height:26px;font-size:12px;margin:0 1px} /* WIDER BUTTONS FOR MOBILE */ .toggle-projects{width:clamp(34px,7vw,46px)!important;height:210px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:40%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} .wa-float{width:clamp(34px,7vw,46px)!important;height:clamp(50px,10vh,65px)!important;top:60%!important} .wa-float .wa-icon{display:flex!important} .wa-arrow{display:none!important} .footer-social span{font-size:11px!important} .btn-submit{margin-left:auto!important;margin-right:auto!important} /* İletişim sayfası ortalanmış düzen */ .contact-header{text-align:center!important;margin-bottom:20px!important} .contact-header h1{text-align:center!important;font-size:28px!important;letter-spacing:2px!important} .about-section h2{text-align:center!important} .about-section p{text-align:center!important} .offices-container{display:flex!important;flex-direction:column!important;gap:20px!important} .offices-container .about-section{background:#ffffff!important;padding:18px!important;border-radius:8px!important;box-shadow:0 2px 8px rgba(0,0,0,0.1)!important;text-align:center!important} .offices-container .about-section h2{font-size:18px!important;margin-bottom:14px!important;text-align:center!important} .offices-container .about-section p{font-size:12px!important;line-height:1.6!important;margin-bottom:10px!important;text-align:center!important} .contact-map h3{text-align:center!important;font-size:20px!important;margin-bottom:18px!important} /* İletişim formu ayarları */ .contact-form{max-width:260px!important;margin:0 auto!important;padding:0!important;pointer-events:auto!important} /* Left panel after gizle */ .left-panel::after{display:none!important} .left-panel::before{display:none!important} } @media(max-width:375px) and (max-height:667px){ /* WIDER BUTTONS FOR MOBILE - 375x667px viewport (iPhone SE, iPhone 6/7/8) */ .toggle-projects{width:clamp(34px,7vw,46px)!important;height:205px!important;top:60%!important;left:1px!important} .toggle-projects .text{position:absolute!important;top:46%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:393px) and (min-height:851px){ /* WIDER BUTTONS FOR MOBILE - 393x851px viewport (Google Pixel 5, Samsung Galaxy S21) */ .toggle-projects{width:clamp(35px,7.1vw,47px)!important;height:218px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:47%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:390px) and (min-height:844px){ /* WIDER BUTTONS FOR MOBILE - 390x844px viewport (iPhone 12/13/14) */ .toggle-projects{width:clamp(35px,7.1vw,47px)!important;height:217px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:47%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:428px) and (min-height:926px){ /* WIDER BUTTONS FOR MOBILE - 428x926px viewport (iPhone 14 Plus, iPhone 13 Pro Max) */ .toggle-projects{width:clamp(36px,7.3vw,48px)!important;height:222px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:46%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:414px) and (min-height:896px){ /* WIDER BUTTONS FOR MOBILE - 414x896px viewport (iPhone 11, iPhone XR) */ .toggle-projects{width:clamp(36px,7.2vw,48px)!important;height:220px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:46%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:412px) and (min-height:915px){ /* WIDER BUTTONS FOR MOBILE - 412x915px viewport (Samsung Galaxy S20/S21) */ .toggle-projects{width:clamp(36px,7.2vw,48px)!important;height:219px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:46%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:360px) and (min-height:740px){ /* WIDER BUTTONS FOR MOBILE - 360x740px viewport (Samsung Galaxy S10, Moto G4) */ .toggle-projects{width:clamp(33px,6.9vw,45px)!important;height:208px!important;top:60%!important;left:1px!important} .toggle-projects .text{position:absolute!important;top:47%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:384px) and (min-height:854px){ /* WIDER BUTTONS FOR MOBILE - 384x854px viewport (OnePlus Nord) */ .toggle-projects{width:clamp(35px,7vw,47px)!important;height:216px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:47%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:360px) and (max-height:640px){ /* WIDER BUTTONS FOR MOBILE - 360x640px viewport (Samsung Galaxy S5, older devices) */ .toggle-projects{width:clamp(33px,6.9vw,45px)!important;height:200px!important;top:60%!important;left:1px!important} .toggle-projects .text{position:absolute!important;top:48%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(max-width:320px) and (max-height:568px){ /* WIDER BUTTONS FOR MOBILE - 320x568px viewport (iPhone SE 1st gen, older iPhones) */ .toggle-projects{width:clamp(32px,6.8vw,44px)!important;height:195px!important;top:60%!important} .toggle-projects .text{position:absolute!important;top:48%!important;left:50%!important;transform:translate(-50%, -50%) rotate(-180deg)!important;z-index:10!important} } @media(min-width:1441px){ .page-wrapper{max-width:1920px;margin:10px 5px} .top-bar{height:160px} .top-bar h1{font-size:clamp(18px,2.2vw,24px)} nav li a{font-size:clamp(15px,1.2vw,18px);padding:14px 24px} .hero-content{max-width:750px} .hero-content h2{font-size:clamp(27px,5vw,55px);line-height:1.15} .hero-content p{font-size:clamp(19px,1.8vw,23px)} .btn{font-size:clamp(18px,1.6vw,20px);padding:14px 32px} .arrow{font-size:24px} .toggle-projects .text{font-size:clamp(13px,1.1vw,16px)} .wa-float .text{font-size:clamp(13px,1.1vw,16px)} .all-proj button{font-size:13px} .thumb-title{font-size:19px} .stat-number{font-size:clamp(28px,3vw,36px)} .stat-label{font-size:clamp(15px,1.2vw,17px)} .footer-wrap{max-width:1600px;padding:40px 50px 40px 180px;gap:50px} .footer-item h4{font-size:clamp(18px,1.6vw,20px)} .footer-item p{font-size:clamp(16px,1.3vw,18px)} .contact-header h1{font-size:clamp(36px,5vw,52px)} .contact-subtitle{font-size:clamp(18px,2vw,22px)} .company-info h2{font-size:clamp(24px,3vw,30px)} .company-subtitle{font-size:clamp(16px,1.5vw,18px)} .office-content h3{font-size:clamp(20px,2.5vw,24px)} .office-content p{font-size:clamp(17px,1.8vw,19px)} .contact-item{font-size:clamp(17px,1.8vw,19px)} .contact-email a{font-size:clamp(18px,2vw,22px)} .contact-form-section h3{font-size:clamp(24px,3vw,28px)} .contact-map h3{font-size:clamp(24px,3vw,30px)} .form-group label{font-size:clamp(17px,1.8vw,19px)} .form-group input,.form-group textarea{font-size:clamp(17px,1.8vw,19px)} .btn-submit{font-size:clamp(18px,2vw,20px);margin-left:auto!important;margin-right:auto!important} .about-intro h1{font-size:clamp(36px,5vw,52px)} .about-intro p{font-size:clamp(17px,1.8vw,19px)} .mvv-card h3{font-size:clamp(24px,3vw,28px)} .mvv-card p{font-size:clamp(17px,1.8vw,19px)} .job-card h3{font-size:clamp(24px,3vw,28px)} .job-card p{font-size:clamp(17px,1.8vw,19px)} .news-card h3{font-size:clamp(24px,3vw,28px)} .news-card p{font-size:clamp(17px,1.8vw,19px)} .news-content p{font-size:clamp(18px,1.6vw,20px)} .news-content h3{font-size:clamp(24px,2.5vw,30px)} .news-list li{font-size:clamp(18px,1.6vw,20px)} .breadcrumb{font-size:clamp(16px,1.5vw,18px)} } @media(min-width:1921px){ .page-wrapper{max-width:2400px;margin:10px 5px} .top-bar{height:180px} nav li a{font-size:clamp(17px,1.3vw,20px);padding:14px 24px} .hero-content{max-width:850px} .hero-content h2{font-size:clamp(31px,4.5vw,63px);line-height:1.15} .hero-content p{font-size:clamp(21px,2vw,25px)} .btn{font-size:clamp(20px,1.8vw,22px);padding:16px 36px} .arrow{font-size:26px} .toggle-projects .text{font-size:clamp(15px,1.2vw,18px)} .wa-float .text{font-size:clamp(15px,1.2vw,18px)} .all-proj button{font-size:15px} .thumb-title{font-size:21px} .stat-number{font-size:clamp(30px,3.2vw,38px)} .stat-label{font-size:clamp(17px,1.3vw,19px)} .footer-wrap{max-width:2000px;gap:60px} .footer-item h4{font-size:clamp(20px,1.8vw,22px)} .footer-item p{font-size:clamp(18px,1.5vw,20px)} .contact-header h1{font-size:clamp(40px,5vw,56px)} .contact-subtitle{font-size:clamp(20px,2vw,24px)} .company-info h2{font-size:clamp(26px,3vw,32px)} .company-subtitle{font-size:clamp(18px,1.5vw,20px)} .office-content h3{font-size:clamp(22px,2.5vw,26px)} .office-content p{font-size:clamp(19px,1.8vw,21px)} .contact-item{font-size:clamp(19px,1.8vw,21px)} .contact-email a{font-size:clamp(20px,2vw,24px)} .contact-form-section h3{font-size:clamp(26px,3vw,30px)} .contact-map h3{font-size:clamp(26px,3vw,32px)} .form-group label{font-size:clamp(19px,1.8vw,21px)} .form-group input,.form-group textarea{font-size:clamp(19px,1.8vw,21px)} .btn-submit{font-size:clamp(20px,2vw,22px)} .about-intro h1{font-size:clamp(40px,5vw,56px)} .about-intro p{font-size:clamp(19px,1.8vw,21px)} .mvv-card h3{font-size:clamp(26px,3vw,30px)} .mvv-card p{font-size:clamp(19px,1.8vw,21px)} .job-card h3{font-size:clamp(26px,3vw,30px)} .job-card p{font-size:clamp(19px,1.8vw,21px)} .news-card h3{font-size:clamp(26px,3vw,30px)} .news-card p{font-size:clamp(19px,1.8vw,21px)} .news-content p{font-size:clamp(20px,1.6vw,22px)} .news-content h3{font-size:clamp(26px,2.5vw,32px)} .news-list li{font-size:clamp(20px,1.6vw,22px)} .breadcrumb{font-size:clamp(18px,1.5vw,20px)} } /* Contact Page Styles */ .contact-page{background:#f5f5f5;padding:20px;overflow-y:visible;height:auto;min-height:calc(100vh - 145px);transition:opacity 0.2s ease;will-change:auto} .contact-content{width:100%;max-width:1250px;margin:0 auto;padding:clamp(80px,10vh,120px) 20px 2px} .contact-container{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.1);overflow:hidden;transition:opacity 0.2s ease;will-change:auto} .contact-header{background:linear-gradient(135deg,#2b7fd6 0%,#5ba8de 100%);color:#fff;padding:clamp(40px,6vh,60px) clamp(30px,5vw,50px);text-align:center} .contact-header h1{font-size:clamp(28px,5vw,42px);font-weight:700;margin:0 0 15px;letter-spacing:2px;font-family:'Bahnschrift Condensed'} .contact-subtitle{font-size:clamp(14px,2vw,18px);opacity:0.95;margin:0} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:clamp(40px,5vh,60px) clamp(30px,5vw,50px)} /* İletişim Bilgileri Bölümü */ .contact-info-section{display:flex;flex-direction:column;gap:30px} .company-info h2{font-size:clamp(20px,3vw,26px);color:#2b7fd6;font-weight:700;margin:0 0 10px;font-family:'Bahnschrift Condensed'} .company-subtitle{font-size:clamp(12px,1.5vw,14px);color:#666;font-weight:600;text-transform:uppercase;letter-spacing:0.5px} .office-card{background:linear-gradient(135deg,rgba(91,168,222,0.08) 0%,rgba(43,127,214,0.08) 100%);padding:25px;border-radius:12px;border-left:4px solid #2b7fd6;transition:all .3s} .office-card:hover{transform:translateX(5px);box-shadow:0 4px 15px rgba(43,127,214,0.15)} .office-icon{width:50px;height:50px;background:#2b7fd6;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px} .office-icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2} .office-content h3{font-size:clamp(16px,2.5vw,20px);color:#2b7fd6;font-weight:700;margin:0 0 15px;font-family:'Bahnschrift Condensed'} .office-content p{font-size:clamp(13px,1.8vw,15px);color:#333;line-height:1.6;margin:5px 0} .office-contact{margin-top:15px;display:flex;flex-direction:column;gap:10px} .contact-item{display:flex;align-items:center;gap:10px;font-size:clamp(13px,1.8vw,15px);color:#333} .contact-item svg{width:20px;height:20px;fill:#2b7fd6;flex-shrink:0} .contact-email{display:flex;align-items:center;gap:15px;padding:20px;background:linear-gradient(135deg,#2b7fd6 0%,#5ba8de 100%);border-radius:12px;margin-top:10px} .contact-email svg{width:28px;height:28px;fill:#fff;flex-shrink:0} .contact-email a{color:#fff;font-size:clamp(14px,2vw,18px);font-weight:600;text-decoration:none;transition:all .3s} .contact-email a:hover{letter-spacing:1px} /* İletişim Formu */ .contact-form-section h3{font-size:clamp(20px,3vw,24px);color:#2b7fd6;font-weight:700;margin:0 0 25px;font-family:'Bahnschrift Condensed';text-align:center} .contact-form{display:flex;flex-direction:column;gap:20px;pointer-events:auto!important} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;pointer-events:auto!important} .form-group{display:flex;flex-direction:column;gap:8px;pointer-events:auto!important;position:relative!important} .form-group label{font-size:clamp(13px,1.8vw,15px);color:#333;font-weight:600;font-family:'Bahnschrift Condensed';pointer-events:none!important;user-select:none;cursor:default!important} .form-group input,.form-group textarea,.form-group select{padding:12px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:clamp(13px,1.8vw,15px);font-family:'Bahnschrift Condensed';transition:all .3s;pointer-events:auto!important;cursor:text!important;z-index:999!important;position:relative!important;background:#fff!important} .form-group input:disabled{background:#f1f5f9!important;cursor:not-allowed!important} .form-group select{cursor:pointer!important} .form-group input[type="file"]{cursor:pointer!important} .form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#2b7fd6;box-shadow:0 0 0 3px rgba(43,127,214,0.1)} .form-group textarea{resize:vertical;min-height:120px} .btn-submit{width:100%;padding:15px 30px;font-size:clamp(14px,2vw,16px);font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px} .btn-submit svg{width:20px;height:20px;fill:#fff;transition:transform .3s} .btn-submit:hover svg{transform:translateX(5px)} /* Harita */ .contact-map{padding:clamp(40px,5vh,60px) clamp(30px,5vw,50px);background:#f9f9f9} .contact-map h3{font-size:clamp(20px,3vw,26px);color:#2b7fd6;font-weight:700;margin:0 0 25px;text-align:center;font-family:'Bahnschrift Condensed'} .map-wrapper{border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.15)} .map-wrapper iframe{width:100%;height:450px;border:0;display:block} /* Mobil Responsive */ @media(max-width:768px){ .contact-page{padding:0} .contact-content{padding:0 1px 3px;width:100%;margin:0 auto} .contact-grid{grid-template-columns:1fr;gap:15px;padding:12px 12px} .form-row{grid-template-columns:1fr;gap:15px} .contact-header{padding:12px 12px} .office-card{padding:20px} .contact-map{padding:30px 20px} .map-wrapper iframe{height:350px} .office-card:hover{transform:none} } @media(max-width:430px){ .contact-content{padding:0 1px 3px;width:100%;margin:0 auto} .contact-header h1{font-size:clamp(22px,6vw,28px)} .contact-subtitle{font-size:clamp(12px,3vw,14px)} .office-content h3{font-size:clamp(15px,4vw,18px)} .office-content p{font-size:clamp(12px,3.2vw,14px)} .map-wrapper iframe{height:300px} } /* İletişim Sayfası Stilleri */ .main-container.contact-main{height:auto;min-height:0;display:block;background:#363940 url('../../resimler/site/main_tbg.gif') no-repeat center center;background-size:cover} .contact-page{height:auto;min-height:auto;overflow-y:visible;position:relative;background:#363940 url('../../resimler/site/main_tbg.gif') no-repeat center center;background-size:cover;display:block} .contact-content{width:100%;padding:60px 5% 80px;background:transparent;clear:both} .contact-container{max-width:1280px;margin:0 auto;background:#fff;padding:50px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.4)} .contact-header{text-align:center;margin-bottom:60px;background:#f8f9fa;padding:40px 30px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08)} .contact-header h1{font-size:clamp(32px,5vw,48px);color:#0F172A;font-weight:700;margin-bottom:15px;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:2px} .contact-subtitle{font-size:clamp(14px,2vw,18px);color:#475569;font-weight:400;margin:0} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);margin-bottom:60px} /* Sol Taraf - İletişim Bilgileri */ .contact-info-section{display:flex;flex-direction:column;gap:30px} .company-info{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);border-left:4px solid #1E3A8A} .company-info h2{font-size:clamp(18px,2.5vw,24px);color:#0F172A;font-weight:700;margin-bottom:10px;font-family:'Bahnschrift Condensed'} .company-subtitle{font-size:clamp(11px,1.3vw,14px);color:#475569;font-weight:500;line-height:1.5} .office-card{background:#fff;padding:25px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);display:flex;gap:20px;transition:all .3s} .office-card:hover{box-shadow:0 6px 20px rgba(43,127,214,0.2);transform:translateY(-2px)} .office-icon{flex-shrink:0;width:50px;height:50px;background:linear-gradient(135deg,#1E3A8A 0%,#0F172A 100%);border-radius:8px;display:flex;align-items:center;justify-content:center} .office-icon svg{width:28px;height:28px;stroke:#fff;stroke-width:2;fill:none} .office-content{flex:1} .office-content h3{font-size:clamp(14px,1.8vw,18px);color:#0F172A;font-weight:700;margin-bottom:10px;font-family:'Bahnschrift Condensed'} .office-content p{font-size:clamp(12px,1.4vw,14px);color:#475569;margin:5px 0;line-height:1.6} .office-contact{display:flex;flex-direction:column;gap:8px;margin-top:15px} .contact-item{display:flex;align-items:center;gap:10px} .contact-item svg{width:18px;height:18px;fill:#1E3A8A;flex-shrink:0} .contact-item span{font-size:clamp(12px,1.4vw,14px);color:#475569;font-weight:500} .contact-email{background:#fff;padding:20px 25px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);display:flex;align-items:center;gap:15px;transition:all .3s} .contact-email:hover{box-shadow:0 6px 20px rgba(43,127,214,0.2);transform:translateY(-2px)} .contact-email svg{width:24px;height:24px;fill:#1E3A8A;flex-shrink:0} .contact-email a{font-size:clamp(14px,1.8vw,18px);color:#2b7fd6;font-weight:600;transition:color .3s} .contact-email a:hover{color:#5ba8de} /* Sağ Taraf - İletişim Formu */ .contact-form-section{background:#fff;padding:35px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1)} .contact-form-section h3{font-size:clamp(18px,2.5vw,24px);color:#0F172A;font-weight:700;margin-bottom:25px;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:1px} .contact-form{display:flex;flex-direction:column;gap:20px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px} .form-group{display:flex;flex-direction:column;gap:8px} .form-group label{font-size:clamp(12px,1.4vw,14px);color:#0F172A;font-weight:600;font-family:'Bahnschrift Condensed'} .form-group input,.form-group textarea{padding:12px 15px;border:2px solid #e0e0e0;border-radius:6px;font-size:clamp(13px,1.5vw,15px);font-family:'Bahnschrift Condensed';transition:all .3s;background:#fafafa} .form-group input:focus,.form-group textarea:focus{outline:none;border-color:#2b7fd6;background:#fff;box-shadow:0 0 0 3px rgba(43,127,214,0.1)} .form-group textarea{resize:vertical;min-height:120px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 35px;font-size:clamp(13px,1.5vw,15px);font-weight:700;text-transform:uppercase;border-radius:6px;transition:all .3s;cursor:default;letter-spacing:1px;font-family:'Bahnschrift Condensed';border:none} .btn-blue{background:#817863;color:#fff;box-shadow:0 4px 12px rgba(129,120,99,0.3)} .btn-blue:hover{background:#6d6554;box-shadow:0 6px 16px rgba(129,120,99,0.4);transform:translateY(-2px)} .btn-blue:active{transform:translateY(0);box-shadow:0 2px 8px rgba(129,120,99,0.3)} .btn-submit{width:100%;margin-top:10px} .btn-submit svg{width:20px;height:20px;fill:#fff} /* Harita Bölümü */ .contact-map{margin-top:60px;text-align:left} .contact-map h3{font-size:clamp(20px,3vw,28px);color:#0F172A;font-weight:700;margin-bottom:20px;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:1px;text-align:left} .map-wrapper{border-radius:8px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);background:#fff;padding:10px;text-align:left;margin:0} .map-wrapper iframe{display:block;width:100%;border-radius:6px;max-width:600px} /* Active Link Stil */ nav li a.active{background:linear-gradient(180deg,rgba(58,92,127,0.6) 0%,rgba(42,61,82,0.6) 100%);color:#4a90d6} nav li a.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:#4a90d6;box-shadow:0 0 10px rgba(74,144,214,0.8)} /* Responsive - Tablet */ @media(max-width:1024px){ .contact-grid{grid-template-columns:1fr;gap:40px} .form-row{grid-template-columns:1fr} .contact-page .main-container{height:auto;min-height:0} } /* Responsive - Mobil */ @media(max-width:768px){ .contact-content{padding:0 1px 3px;background:transparent;width:100%;margin:0 auto} .contact-container{padding:15px 12px} .contact-header{margin-bottom:40px} .contact-grid{gap:30px} .office-card{flex-direction:column;text-align:center;padding:20px} .office-icon{margin:0 auto} .office-contact{align-items:center} .contact-email{flex-direction:column;text-align:center} .contact-form-section{padding:25px 20px} .contact-map{margin-top:40px} .map-wrapper iframe{height:350px} .contact-page{min-height:0;background:#363940 url('../../resimler/site/main_tbg.gif') no-repeat center center;background-size:cover;padding:0} .contact-page .main-container{height:auto;background:#363940 url('../../resimler/site/main_tbg.gif') no-repeat center center;background-size:cover} } @media(max-width:480px){ .contact-header h1{font-size:28px} .company-info{padding:20px} .office-card{padding:15px} .contact-form-section{padding:20px 15px} .form-group input,.form-group textarea{padding:10px 12px} .btn{padding:12px 25px} .contact-container{padding:12px 2px;border-radius:8px} } /* İletişim Sayfası için Left Panel Düzeltmesi */ .contact-page ~ .left-panel, .contact-main .left-panel{position:fixed;z-index:999} .contact-page .toggle-projects, .contact-main ~ .toggle-projects{z-index:1500} /* Footer Copyright */ .footer-copyright{background:#0c1922;padding:20px;text-align:center;border-top:1px solid #1a2a35} @media(max-width:768px){ .footer-copyright{padding:5px} .footer-copyright p{font-size:11px!important;margin:0;color:#ccc;font-weight:400;letter-spacing:0.5px} } /* Office Icon Letter Style */ .office-icon-letter{position:relative} .office-icon-letter span{font-size:clamp(24px,3vw,32px);font-weight:800;color:#fff;font-family:'Bahnschrift Condensed';letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,0.2)} .office-icon-letter svg{display:none} @media(max-width:768px){ .office-icon-letter span{font-size:28px} } /* Kariyer Sayfası Stilleri */ .career-section{margin-bottom:60px} .career-section-title{font-size:clamp(22px,3vw,32px);color:#0F172A;font-weight:700;margin-bottom:30px;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:1.5px;text-align:center;position:relative;padding-bottom:15px} .career-section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,#2b7fd6 0%,#5ba8de 100%)} /* İş İlanları Cards */ .job-listings{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:25px;margin-bottom:50px} .job-card{background:#fff;padding:30px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);display:flex;gap:20px;transition:all .3s;border-left:4px solid transparent} .job-card:hover{box-shadow:0 8px 25px rgba(43,127,214,0.2);transform:translateY(-5px);border-left-color:#2b7fd6} .job-icon{flex-shrink:0;width:60px;height:60px;background:linear-gradient(135deg,#1E3A8A 0%,#0F172A 100%);border-radius:8px;display:flex;align-items:center;justify-content:center} .job-icon svg{width:32px;height:32px;stroke:#fff;stroke-width:2;fill:none} .job-content{flex:1} .job-content h4{font-size:clamp(18px,2.2vw,22px);color:#0F172A;font-weight:700;margin-bottom:12px;font-family:'Bahnschrift Condensed'} .job-description{font-size:clamp(13px,1.5vw,15px);color:#475569;line-height:1.6;margin-bottom:15px} .job-meta{display:flex;flex-wrap:wrap;gap:15px;font-size:clamp(12px,1.3vw,13px);color:#475569} .job-location,.job-type{display:flex;align-items:center;gap:5px} /* Kariyer Form */ .career-form-section{background:#f8f9fa;padding:40px;border-radius:8px;margin-top:40px} .form-intro{font-size:clamp(13px,1.5vw,15px);color:#475569;text-align:center;margin-bottom:30px;line-height:1.6} .career-form select{padding:12px 15px;border:2px solid #e0e0e0;border-radius:6px;font-size:clamp(13px,1.5vw,15px);font-family:'Bahnschrift Condensed';transition:all .3s;background:#fafafa;width:100%;cursor:pointer} .career-form select:focus{outline:none;border-color:#2b7fd6;background:#fff;box-shadow:0 0 0 3px rgba(43,127,214,0.1)} /* File Upload Custom Style */ .file-upload-wrapper{position:relative} .file-upload-wrapper input[type="file"]{position:absolute;left:-9999px;opacity:0} .file-upload-label{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 20px;border:2px dashed #e0e0e0;border-radius:6px;background:#fafafa;cursor:pointer;transition:all .3s;font-size:clamp(13px,1.5vw,15px);color:#475569;font-weight:500} .file-upload-label:hover{border-color:#2b7fd6;background:#f0f7ff;color:#2b7fd6} .file-upload-label svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none} .file-upload-wrapper input[type="file"]:focus + .file-upload-label{border-color:#2b7fd6;background:#fff;box-shadow:0 0 0 3px rgba(43,127,214,0.1)} .file-name{display:block;margin-top:10px;font-size:clamp(12px,1.3vw,13px);color:#0F172A;font-weight:600} .file-name:empty{display:none} /* Responsive - Kariyer Sayfası */ @media(max-width:768px){ .job-listings{grid-template-columns:1fr} .job-card{flex-direction:column;text-align:center;padding:25px} .job-icon{margin:0 auto} .job-meta{justify-content:center} .career-form-section{padding:30px 20px} } @media(max-width:480px){ .job-card{padding:20px} .job-icon{width:50px;height:50px} .job-icon svg{width:28px;height:28px} .career-form-section{padding:25px 15px} .career-section-title{font-size:24px} } /* Hakkımızda Sayfası Stilleri */ .about-section{margin-bottom:50px} .about-intro{background:#fff;padding:35px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);border-left:4px solid #1E3A8A} .about-intro p{font-size:clamp(14px,1.6vw,16px);color:#475569;line-height:1.8;margin:0} .about-intro strong{color:#0F172A;font-weight:700} /* Misyon Vizyon Değerler Grid */ .mvv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:50px} .mvv-card{background:#fff;padding:35px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all .3s;text-align:center} .mvv-card:hover{box-shadow:0 8px 25px rgba(43,127,214,0.2);transform:translateY(-5px)} .mvv-icon{width:80px;height:80px;background:linear-gradient(135deg,#1E3A8A 0%,#0F172A 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px} .mvv-icon svg{width:40px;height:40px;stroke:#fff;stroke-width:2;fill:none} .mvv-card h3{font-size:clamp(18px,2.2vw,22px);color:#0F172A;font-weight:700;margin-bottom:15px;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:1px} .mvv-card p{font-size:clamp(13px,1.5vw,15px);color:#475569;line-height:1.7} .values-list{list-style:none;padding:0;margin:0;text-align:left} .values-list li{font-size:clamp(13px,1.5vw,15px);color:#475569;line-height:1.7;padding:8px 0 8px 30px;position:relative} .values-list li::before{content:'✓';position:absolute;left:0;color:#2b7fd6;font-weight:700;font-size:18px} /* Politika Bölümü */ .section-title{font-size:clamp(22px,3vw,32px);color:#0F172A;font-weight:700;margin-bottom:30px;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:1.5px;text-align:center;position:relative;padding-bottom:15px} .section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:80px;height:3px;background:linear-gradient(90deg,#2b7fd6 0%,#5ba8de 100%)} .policy-section{margin-bottom:50px} .policy-content{background:#fff;padding:40px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1)} .policy-intro{font-size:clamp(14px,1.6vw,16px);color:#475569;text-align:center;margin-bottom:30px;font-weight:600} .policy-items{display:grid;grid-template-columns:1fr;gap:20px} .policy-item{background:#f8f9fa;padding:20px 25px;border-radius:6px;display:flex;align-items:flex-start;gap:20px;transition:all .3s;border-left:3px solid transparent} .policy-item:hover{background:#fff;border-left-color:#2b7fd6;box-shadow:0 4px 12px rgba(43,127,214,0.15)} .policy-number{flex-shrink:0;width:45px;height:45px;background:linear-gradient(135deg,#1E3A8A 0%,#0F172A 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;font-family:'Bahnschrift Condensed'} .policy-item p{margin:0;font-size:clamp(13px,1.5vw,15px);color:#475569;line-height:1.7;padding-top:10px} /* ISO Belgeleri */ .certificates-section{margin-top:50px} .certificates-intro{font-size:clamp(13px,1.5vw,15px);color:#475569;text-align:center;margin-bottom:30px} .certificates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto} .certificate-card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s;border:2px solid transparent;text-align:center} .certificate-card:hover{border-color:#2b7fd6;box-shadow:0 8px 25px rgba(43,127,214,0.2);transform:translateY(-5px)} .certificate-icon{flex-shrink:0;width:60px;height:60px;background:linear-gradient(135deg,#1E3A8A 0%,#0F172A 100%);border-radius:8px;display:flex;align-items:center;justify-content:center} .certificate-icon svg{width:32px;height:32px;stroke:#fff;stroke-width:2;fill:none} .certificate-content{flex:1} .certificate-content h4{font-size:clamp(16px,1.8vw,18px);color:#0F172A;font-weight:700;margin-bottom:5px;font-family:'Bahnschrift Condensed'} .certificate-content p{font-size:clamp(12px,1.4vw,14px);color:#475569;margin-bottom:8px} .certificate-status{display:inline-block;padding:4px 12px;background:#28a745;color:#fff;font-size:11px;font-weight:600;border-radius:12px;text-transform:uppercase;letter-spacing:0.5px} /* Responsive - Hakkımızda */ @media(max-width:1024px){ .mvv-grid{grid-template-columns:1fr} .certificates-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:768px){ .about-intro{padding:25px 20px} .mvv-card{padding:25px 20px} .mvv-icon{width:70px;height:70px} .mvv-icon svg{width:35px;height:35px} .policy-content{padding:30px 20px} .policy-item{flex-direction:column;text-align:center;padding:20px} .policy-number{margin:0 auto} .certificates-grid{grid-template-columns:1fr} .certificate-card{flex-direction:column;text-align:center;padding:25px} .certificate-icon{margin:0 auto} } @media(max-width:480px){ .about-intro{padding:20px 15px} .mvv-card{padding:20px 15px} .policy-content{padding:25px 15px} .policy-item{padding:15px} .certificate-card{padding:20px} } /* Haber Detay Sayfası Stilleri */ .breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:30px;font-size:clamp(12px,1.3vw,14px);padding:15px 20px;background:#f8f9fa;border-radius:6px} .breadcrumb a{color:#817863;text-decoration:none;transition:color .3s} .breadcrumb a:hover{color:#1e6bb8;text-decoration:underline} .breadcrumb .separator{color:#475569;font-weight:400} .breadcrumb .current{color:#475569;font-weight:600} /* Haber Header */ .news-header{margin-bottom:40px} .news-meta{display:flex;align-items:center;gap:20px;margin-bottom:15px;flex-wrap:wrap} .news-category{display:inline-block;padding:6px 16px;background:linear-gradient(135deg,#1E3A8A 0%,#0F172A 100%);color:#fff;font-size:clamp(11px,1.2vw,12px);font-weight:700;border-radius:20px;text-transform:uppercase;letter-spacing:1px} .news-date{display:flex;align-items:center;gap:8px;font-size:clamp(12px,1.4vw,14px);color:#475569;font-weight:500} .news-date svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none} .news-header h1{font-size:clamp(28px,4vw,42px);color:#0F172A;font-weight:700;margin-bottom:15px;font-family:'Bahnschrift Condensed';line-height:1.3} .news-lead{font-size:clamp(16px,1.8vw,20px);color:#475569;line-height:1.6;font-weight:500} /* Öne Çıkan Görsel */ .news-featured-image{margin-bottom:40px;border-radius:12px;overflow:hidden;display:flex;justify-content:center;align-items:center;background:#fff} .news-featured-image img{max-width:600px;width:100%;height:auto;display:block;margin:0 auto} /* Haber İçeriği */ .news-content{margin-bottom:50px} .news-content article{background:#fff;padding:40px;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.08)} .news-content p{font-size:clamp(14px,1.6vw,16px);color:#475569;line-height:1.8;margin-bottom:20px} .news-content p strong{color:#0F172A;font-weight:700} .news-content h3{font-size:clamp(20px,2.5vw,26px);color:#0F172A;font-weight:700;margin:30px 0 15px;font-family:'Bahnschrift Condensed';border-left:4px solid #2b7fd6;padding-left:15px} .news-list{margin:20px 0;padding-left:0;list-style:none} .news-list li{font-size:clamp(14px,1.6vw,16px);color:#475569;line-height:1.8;padding:10px 0 10px 35px;position:relative} .news-list li::before{content:'▸';position:absolute;left:0;color:#2b7fd6;font-weight:700;font-size:20px} /* Galeri */ .news-gallery{margin-bottom:50px} .gallery-title{font-size:clamp(20px,2.5vw,26px);color:#0F172A;font-weight:700;margin-bottom:25px;font-family:'Bahnschrift Condensed';text-align:center;text-transform:uppercase;letter-spacing:1.5px} .gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .gallery-item{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all .3s;cursor:pointer} .gallery-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.2)} .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10;transition:transform .3s} .gallery-item:hover img{transform:scale(1.05)} /* Paylaşım Butonları */ .news-share{background:#f8f9fa;padding:30px;border-radius:8px;margin-bottom:40px} .news-share h4{font-size:clamp(15px,1.7vw,17px);color:#0F172A;font-weight:700;margin-bottom:15px;font-family:'Bahnschrift Condensed'} .share-buttons{display:flex;gap:12px;flex-wrap:wrap} .share-btn{display:flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:6px;font-size:clamp(12px,1.4vw,14px);font-weight:600;cursor:default;transition:all .3s;font-family:'Bahnschrift Condensed'} .share-btn svg{width:20px;height:20px;fill:#fff} .share-btn.facebook{background:#3b5998;color:#fff} .share-btn.facebook:hover{background:#2d4373;transform:translateY(-2px)} .share-btn.twitter{background:#1da1f2;color:#fff} .share-btn.twitter:hover{background:#0c85d0;transform:translateY(-2px)} .share-btn.linkedin{background:#0077b5;color:#fff} .share-btn.linkedin:hover{background:#005582;transform:translateY(-2px)} .share-btn.whatsapp{background:#25d366;color:#fff} .share-btn.whatsapp:hover{background:#1faa52;transform:translateY(-2px)} /* Geri Dön Butonu */ .news-back{text-align:center;margin-top:40px} .btn-back{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;background:#fff;color:#0F172A;border:2px solid #e0e0e0;border-radius:6px;font-size:clamp(13px,1.5vw,15px);font-weight:700;text-transform:uppercase;transition:all .3s;text-decoration:none} .btn-back svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none} .btn-back:hover{background:#0F172A;color:#fff;border-color:#0F172A;transform:translateY(-2px)} /* Responsive - Haber Detay */ @media(max-width:768px){ .breadcrumb{font-size:11px;padding:6px 12px;gap:6px;margin-bottom:10px} .news-meta{gap:12px} .news-content article{padding:25px 20px} .news-gallery{margin-bottom:40px} .gallery-grid{grid-template-columns:1fr;gap:15px} .news-share{padding:25px 20px} .share-buttons{gap:10px} .share-btn{padding:10px 15px;font-size:12px} } @media(max-width:480px){ .breadcrumb{padding:5px 10px;margin-bottom:8px} .news-header h1{font-size:24px} .news-content article{padding:20px 15px} .news-share{padding:20px 15px} .share-buttons{flex-direction:column} .share-btn{width:100%;justify-content:center} } /* Haberler Kategori Sayfası Stilleri */ .news-filters{display:flex;gap:12px;margin-bottom:40px;flex-wrap:wrap;justify-content:center;padding:20px;background:#f8f9fa;border-radius:8px} .filter-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:#fff;border:2px solid #e0e0e0;border-radius:6px;font-size:clamp(12px,1.4vw,14px);font-weight:600;color:#475569;cursor:default;transition:all .3s;font-family:'Bahnschrift Condensed';text-transform:uppercase;letter-spacing:0.5px} .filter-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none} .filter-btn:hover{border-color:#817863;color:#817863;transform:translateY(-2px);box-shadow:0 4px 12px rgba(129,120,99,0.2)} .filter-btn.active{background:#817863;border-color:#817863;color:#fff;box-shadow:0 4px 12px rgba(129,120,99,0.3)} .filter-btn.active svg{stroke:#fff} /* Haberler Grid */ .news-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:30px;margin-bottom:40px;align-content:start} .news-item{opacity:1;transition:opacity .3s,transform .3s} .news-item.hidden{display:none} .news-link{display:block;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all .3s;text-decoration:none;height:100%;display:flex;flex-direction:column} .news-link:not(.news-placeholder):hover{transform:translateY(-8px);box-shadow:0 8px 30px rgba(43,127,214,0.25)} .news-placeholder{cursor:default;opacity:0.7} .news-placeholder:hover{transform:none;box-shadow:0 4px 15px rgba(0,0,0,0.1)} /* Haber Görseli */ .news-image{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#f0f0f0} .news-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .news-link:not(.news-placeholder):hover .news-image img{transform:scale(1.1)} .news-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 50%);display:flex;align-items:flex-end;padding:15px} .news-category-badge{display:inline-block;padding:6px 14px;background:#817863;color:#fff;font-size:clamp(10px,1.1vw,11px);font-weight:700;border-radius:16px;text-transform:uppercase;letter-spacing:0.8px;backdrop-filter:blur(10px)} /* Placeholder Görsel */ .placeholder-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e0e0e0 0%,#f0f0f0 100%)} .placeholder-image svg{width:80px;height:80px;stroke:#999;stroke-width:1.5;opacity:0.5} /* Haber İçeriği */ .news-body{padding:25px;flex:1;display:flex;flex-direction:column} .news-date-small{display:flex;align-items:center;gap:6px;font-size:clamp(11px,1.2vw,12px);color:#475569;margin-bottom:12px;font-weight:500} .news-date-small svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0} .news-body h3{font-size:clamp(17px,2vw,20px);color:#0F172A;font-weight:700;margin-bottom:12px;font-family:'Bahnschrift Condensed';line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .news-body p{font-size:clamp(13px,1.5vw,15px);color:#475569;line-height:1.6;margin-bottom:15px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-read-more{display:flex;align-items:center;gap:8px;font-size:clamp(12px,1.4vw,14px);color:#817863;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-top:auto} .news-read-more svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none;transition:transform .3s} .news-link:not(.news-placeholder):hover .news-read-more svg{transform:translateX(5px)} /* Boş Durum */ .news-empty{text-align:center;padding:60px 20px;background:#f8f9fa;border-radius:8px;margin-top:40px} .news-empty svg{width:80px;height:80px;stroke:#999;stroke-width:2;fill:none;margin:0 auto 20px} .news-empty h3{font-size:clamp(18px,2.2vw,22px);color:#0F172A;font-weight:700;margin-bottom:10px;font-family:'Bahnschrift Condensed'} .news-empty p{font-size:clamp(13px,1.5vw,15px);color:#475569;max-width:500px;margin:0 auto} /* Responsive - Haberler Kategori */ @media(max-width:1024px){ .news-grid{grid-template-columns:repeat(2,1fr) !important;gap:25px} } @media(max-width:768px){ .news-filters{padding:8px;gap:8px} .filter-btn{padding:8px 12px;font-size:11px} .filter-btn svg{width:18px;height:18px} .news-grid{grid-template-columns:1fr;gap:15px;padding:0 2px} .news-body{padding:12px} } @media(max-width:480px){ .news-filters{flex-direction:column;align-items:stretch;padding:6px} .filter-btn{justify-content:center;padding:8px 12px} .news-body{padding:10px} .news-body h3{font-size:16px} } /* CURSOR FIX - Contact pages should have default cursor */ .contact-page, .contact-page .hero, .contact-content, .contact-container { cursor: default !important; } .contact-form input:not([type="file"]):not([type="hidden"]), .contact-form textarea, .contact-form select, .career-form input:not([type="file"]):not([type="hidden"]), .career-form textarea, .career-form select { cursor: text !important; } .contact-form button, .career-form button, .btn, .btn-submit, .btn-apply { cursor:pointer!important; } /* Image Modal */ .image-modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn 0.3s ease} .image-modal.active{display:flex;align-items:center;justify-content:center} .image-modal-content{max-width:95%;max-height:95%;position:relative;animation:zoomIn 0.3s ease} .image-modal-content img{width:100%;height:auto;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 0 50px rgba(255,255,255,0.1)} .image-modal-close{position:absolute;top:-50px;right:-50px;color:#fff;font-size:45px;font-weight:300;cursor:pointer;transition:all .3s;width:45px;height:45px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border-radius:50%;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .image-modal-close:hover{background:rgba(255,255,255,0.2);transform:rotate(90deg)} .image-modal-caption{position:absolute;bottom:-50px;left:0;right:0;text-align:center;color:#fff;font-size:16px;padding:10px;background:rgba(0,0,0,0.5);border-radius:8px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .news-content img,.news-featured-image img,.gallery-item img{cursor:pointer;transition:opacity .3s} .news-content img:hover,.news-featured-image img:hover,.gallery-item img:hover{opacity:0.9} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes zoomIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}} @media (max-width:768px){.image-modal-close{top:-40px;right:0;font-size:35px}.image-modal-caption{position:relative;bottom:0;margin-top:10px}} /* ============================================= PAGINATION STİLLERİ ============================================= */ .pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 50px; padding: 20px 0; } .pagination-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; background: #fff; border: 2px solid #e0e0e0; border-radius: 8px; color: #333; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .pagination-btn:hover:not(:disabled) { background: #817863; border-color: #817863; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(129,120,99,0.3); } .pagination-btn:disabled { background: #f5f5f5; border-color: #e0e0e0; color: #999; cursor: not-allowed; opacity: 0.5; } .pagination-btn svg { width: 18px; height: 18px; } .pagination-numbers { display: flex; gap: 8px; } .pagination-number { min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid #e0e0e0; border-radius: 8px; color: #333; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .pagination-number:hover { background: #f5f5f5; border-color: #817863; color: #817863; transform: translateY(-2px); } .pagination-number.active { background: #817863; border-color: #817863; color: #fff; box-shadow: 0 4px 12px rgba(129, 120, 99, 0.3); } @media (max-width: 768px) { .pagination { gap: 10px; margin-top: 30px; } .pagination-btn { padding: 10px 16px; font-size: 14px; } .pagination-btn span { display: none; } .pagination-number { min-width: 42px; height: 42px; font-size: 14px; } } /* ======================================== AVANGART PROJESİ DETAY SAYFA STİLLERİ ======================================== */ .project-hero { background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); padding: 40px 20px; margin-bottom: 40px; } .project-title-section { max-width: 1200px; margin: 0 auto; } .project-title { font-size: clamp(28px, 4vw, 42px); color: #1a1a1a; font-weight: 700; margin-bottom: 15px; font-family: 'Bahnschrift Condensed'; text-transform: uppercase; letter-spacing: 1px; } .project-subtitle { font-size: clamp(16px, 2vw, 20px); color: #666; margin-bottom: 25px; line-height: 1.6; } .project-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; } .stat-box { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-box:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); } .stat-icon { font-size: 32px; color: #817863; margin-bottom: 10px; } .stat-value { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; } .stat-label { font-size: 14px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; } .content-section { max-width: 1200px; margin: 0 auto 50px; padding: 0 20px; } .section-title { font-size: clamp(24px, 3vw, 32px); color: #1a1a1a; font-weight: 700; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 3px solid #817863; font-family: 'Bahnschrift Condensed'; text-transform: uppercase; } .info-box { background: #f9f9f9; border-left: 4px solid #817863; padding: 25px; margin-bottom: 30px; border-radius: 8px; } .info-box h3 { font-size: 20px; color: #817863; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .info-box p { font-size: 16px; line-height: 1.8; color: #444; margin-bottom: 10px; } .highlight-text { background: #fff3cd; padding: 20px; border-radius: 8px; border: 2px solid #ffc107; margin: 25px 0; font-size: 15px; line-height: 1.7; color: #856404; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 25px; } .feature-item { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; align-items: flex-start; gap: 15px; transition: all 0.3s ease; } .feature-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-3px); } .feature-icon { font-size: 28px; color: #817863; flex-shrink: 0; } .feature-text { font-size: 15px; color: #333; line-height: 1.6; } .properties-section { background: #f5f5f5; padding: 40px 20px; margin: 50px 0; } .property-category { background: #fff; padding: 25px; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .property-category h3 { font-size: 22px; color: #817863; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e0e0e0; display: flex; align-items: center; gap: 10px; } .property-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .property-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: #f9f9f9; border-radius: 8px; transition: background 0.3s ease; color: #333; font-weight: 500; } .property-item:hover { background: #f0f0f0; } .property-item::before { content: "✓"; color: #817863; font-weight: 700; font-size: 18px; } .vaziyet-image { width: 100%; max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); margin: 25px 0; } /* Galeri ve Video Stilleri (Screenshot_1 Tasarımı) */ .gallery-video-container { width: 100%; max-width: 1200px; margin: 0 auto 20px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.15); background: #000; } .gallery-video-container video { width: 100%; height: auto; display: block; } .gallery-video-container img { width: 100%; height: auto; display: block; cursor: pointer; pointer-events: auto; } .gallery-thumbnails { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; } .thumb-more .thumb-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; } .more-count { font-size: 48px; font-weight: 700; line-height: 1; } .more-text { font-size: 16px; font-weight: 600; text-align: center; line-height: 1.3; } /* Lightbox Modal (Screenshot_2 Tasarımı) */ .lightbox-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); overflow: hidden; } .lightbox-modal.active { display: flex; flex-direction: column; } /* Body scroll lock when modal is open */ body.lightbox-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } /* WhatsApp butonlarını ve header'ı gizle */ body.lightbox-open .wa-float, body.lightbox-open .wa-float-new, body.lightbox-open .wa-float-btn, body.lightbox-open .top-bar, body.lightbox-open .left-panel, body.lightbox-open nav, body.lightbox-open .mobile-nav { display: none !important; } .lightbox-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 48px; font-weight: 300; cursor: pointer; z-index: 10005; transition: color 0.3s ease; line-height: 1; pointer-events: auto !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .lightbox-close:hover { color: #817863; } /* Lightbox Tab Butonları (Üstte) */ .lightbox-tabs { display: flex; justify-content: center; gap: 15px; padding: 25px 20px; background: rgba(0,0,0,0.8); z-index: 10002; pointer-events: auto !important; position: relative; } .lightbox-tab { padding: 10px 20px; background: transparent; border: 2px solid rgba(255,255,255,0.3); border-radius: 6px; color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 600; cursor: pointer !important; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: auto !important; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .lightbox-tab:hover { border-color: rgba(255,255,255,0.6); color: rgba(255,255,255,0.9); } .lightbox-tab.active { background: rgba(129,120,99,0.9); border-color: #817863; color: #fff; } /* Lightbox Ana Görsel Alanı */ .lightbox-content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 20px; overflow: hidden; } .lightbox-image { max-width: 90%; max-height: 100%; object-fit: contain; user-select: none; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: #fff; border: none; font-size: 48px; width: 60px; height: 60px; cursor: pointer; z-index: 10001; transition: all 0.3s ease; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 300; backdrop-filter: blur(10px); } .lightbox-nav:hover { background: rgba(129,120,99,0.8); } .lightbox-prev { left: 30px; } .lightbox-next { right: 30px; } /* Lightbox Sayaç */ .lightbox-counter { position: absolute; top: 30px; left: 30px; color: #fff; font-size: 16px; font-weight: 600; background: rgba(0,0,0,0.6); padding: 8px 16px; border-radius: 20px; z-index: 10001; } /* Lightbox Alt Thumbnail Kaydırma */ .lightbox-thumbnails-wrapper { background: rgba(0,0,0,0.8); padding: 15px 10px; overflow-x: auto; overflow-y: hidden; z-index: 10001; } .lightbox-thumbnails-wrapper::-webkit-scrollbar { height: 8px; } .lightbox-thumbnails-wrapper::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); } .lightbox-thumbnails-wrapper::-webkit-scrollbar-thumb { background: rgba(129,120,99,0.8); border-radius: 4px; } .lightbox-thumbnails { display: flex; gap: 10px; padding: 0 20px; } .lightbox-thumb { flex-shrink: 0; width: 120px; height: 80px; cursor: pointer; border-radius: 6px; overflow: hidden; border: 3px solid transparent; transition: all 0.3s ease; opacity: 0.6; } .lightbox-thumb:hover { opacity: 0.9; transform: scale(1.05); } .lightbox-thumb.active { border-color: #817863; opacity: 1; } .lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Harita ve İletişim */ .contact-map-section { background: #f5f5f5; padding: 50px 20px; margin: 50px 0; } .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-bottom: 40px; } .contact-info-card { background: #fff; padding: 30px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.3s ease; } .contact-info-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); } .contact-icon { font-size: 48px; margin-bottom: 15px; } .contact-info-card h3 { font-size: 18px; color: #817863; font-weight: 700; margin-bottom: 12px; } .contact-info-card p { font-size: 15px; color: #666; line-height: 1.6; margin: 5px 0; } .contact-info-card a { color: #817863; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .contact-info-card a:hover { color: #5a5444; } /* İletişim Formu */ .callback-form-wrapper { max-width: 600px; margin: 0 auto; background: #f9f9f9; padding: 40px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); } .form-description { text-align: center; color: #666; margin-bottom: 30px; font-size: 16px; line-height: 1.6; } .callback-form .form-group { margin-bottom: 25px; } .callback-form label { display: block; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 8px; } .callback-form input, .callback-form textarea { width: 100%; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; color: #333; transition: all 0.3s ease; font-family: inherit; } .callback-form input:focus, .callback-form textarea:focus { outline: none; border-color: #817863; box-shadow: 0 0 0 3px rgba(129,120,99,0.1); } .callback-form textarea { resize: vertical; min-height: 100px; } .btn-submit-callback { width: 100%; padding: 16px 32px; background: #817863; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; } .btn-submit-callback:hover { background: #6a5f52; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(129,120,99,0.3); } .btn-submit-callback:active { transform: translateY(0); } /* Masaüstü Görünüm - Büyük Ekranlar (1441px - 1920px) */ @media (min-width: 1441px) and (max-width: 1920px) { html { font-size: 19px !important; } body { font-size: 19px !important; } .project-title { font-size: 44px !important; } .project-subtitle { font-size: 21px !important; } .stat-value { font-size: 30px !important; } .stat-label { font-size: 15px !important; } .section-title { font-size: 34px !important; } .info-box h3 { font-size: 21px !important; } .info-box p, .feature-text, p { font-size: 19px !important; } .highlight-text { font-size: 18px !important; } .property-category h3 { font-size: 23px !important; } .property-item { font-size: 17px !important; } .lightbox-tab { font-size: 16px !important; } .lightbox-counter { font-size: 18px !important; } .contact-info-card h3 { font-size: 20px !important; } .contact-info-card p { font-size: 18px !important; } .form-description { font-size: 19px !important; } .callback-form label { font-size: 16px !important; } .callback-form input, .callback-form textarea { font-size: 18px !important; } .btn-submit-callback { font-size: 18px !important; } .more-count { font-size: 52px !important; } .more-text { font-size: 18px !important; } } /* Masaüstü Görünüm - Orta Ekranlar (1200px - 1440px) */ @media (min-width: 1200px) and (max-width: 1440px) { html { font-size: 17px !important; } body { font-size: 17px !important; } .project-title { font-size: 40px !important; } .project-subtitle { font-size: 19px !important; } .stat-value { font-size: 28px !important; } .section-title { font-size: 30px !important; } p { font-size: 17px !important; } } /* Masaüstü Görünüm - Küçük Ekranlar (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199px) { html { font-size: 16px !important; } body { font-size: 16px !important; } .project-title { font-size: 36px !important; } .project-subtitle { font-size: 18px !important; } .stat-value { font-size: 26px !important; } .section-title { font-size: 28px !important; } p { font-size: 16px !important; } } /* Tablet Görünüm (769px - 991px) */ @media (min-width: 769px) and (max-width: 991px) { html { font-size: 15px !important; } body { font-size: 15px !important; } .project-title { font-size: 32px !important; } .gallery-thumbnails { grid-template-columns: repeat(2, 1fr); } p { font-size: 15px !important; } } @media (max-width: 768px) { .project-stats { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .property-list { grid-template-columns: 1fr; } /* Galeri Mobil */ .gallery-thumbnails { display: grid !important; grid-template-columns: 1fr !important; gap: 15px; } .gallery-thumbnails .thumb-item { display: block !important; width: 100% !important; max-width: none !important; min-width: auto !important; aspect-ratio: 16/9; height: auto !important; } .gallery-video-container { border-radius: 8px; margin-bottom: 15px; } .more-count { font-size: 36px !important; } .more-text { font-size: 14px !important; } /* Lightbox Mobil */ .lightbox-modal { background: rgba(0,0,0,1) !important; overflow: hidden !important; } .lightbox-modal.active { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden !important; } .lightbox-tabs { flex-wrap: wrap; gap: 8px; padding: 60px 10px 15px 10px !important; flex-shrink: 0; } .lightbox-tab { font-size: 12px !important; padding: 8px 12px; flex: 1 1 45%; min-width: 120px; } .lightbox-content { padding: 10px; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; } .lightbox-image { max-width: 100%; max-height: 60vh; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-select: none; } .lightbox-nav { width: 45px !important; height: 45px !important; font-size: 28px !important; } .lightbox-prev { left: 10px !important; } .lightbox-next { right: 10px !important; } .lightbox-close { top: 15px !important; right: 15px !important; font-size: 40px !important; z-index: 10005 !important; pointer-events: auto !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .lightbox-counter { top: 20px !important; left: 15px !important; font-size: 14px !important; padding: 6px 12px; z-index: 10003 !important; } .lightbox-thumbnails-wrapper { padding: 15px 5px; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; max-height: 100px; } .lightbox-thumb { width: 80px !important; height: 54px !important; } .contact-info-grid { grid-template-columns: 1fr; } .callback-form-wrapper { padding: 25px; } } /* Video Modal (Mobil için) */ .video-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); overflow: hidden; } .video-modal.active { display: flex; flex-direction: column; align-items: center; justify-content: center; } .video-modal-content { width: 90%; max-width: 1200px; position: relative; } .video-modal-close { position: absolute; top: -50px; right: 0; color: #fff; font-size: 40px; font-weight: 300; cursor: pointer; z-index: 10002; transition: color 0.3s ease; line-height: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .video-modal-close:hover { color: #817863; } .video-modal video { width: 100%; height: auto; border-radius: 8px; } /* Body scroll lock when video modal is open */ body.video-modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } body.video-modal-open .wa-float, body.video-modal-open .wa-float-new, body.video-modal-open .top-bar, body.video-modal-open .left-panel, body.video-modal-open nav, body.video-modal-open .mobile-nav { display: none !important; } /* Mobil Video Container'a click pointer ekle */ @media (max-width: 768px) { .gallery-video-container { cursor: pointer; position: relative; -webkit-tap-highlight-color: rgba(0,0,0,0.1); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; pointer-events: auto; } /* Video'nun üzerine şeffaf overlay ekle */ .gallery-video-container::before { content: '▶ Tam Ekran'; position: absolute; top: 10px; right: 10px; background: rgba(129,120,99,0.9); color: #fff; padding: 8px 15px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; z-index: 10; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .gallery-video-container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0); z-index: 5; transition: background 0.3s ease; pointer-events: none; } .gallery-video-container:active::after { background: rgba(0,0,0,0.1); } .video-modal-content { width: 95%; padding: 0 10px; } .video-modal-close { top: -60px; right: 10px; font-size: 36px; width: 40px; height: 40px; } } /* Image Modal (Vaziyet Planı için) */ .image-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); overflow: hidden; } .image-modal.active { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .image-modal-content { max-width: 95%; max-height: 95%; position: relative; display: flex; align-items: center; justify-content: center; } .image-modal-close { position: absolute; top: 20px; right: 20px; color: #fff; font-size: 48px; font-weight: 300; cursor: pointer; z-index: 10002; transition: color 0.3s ease; line-height: 1; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); border-radius: 50%; } .image-modal-close:hover { color: #817863; background: rgba(0,0,0,0.7); } .image-modal img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); } /* Body scroll lock when image modal is open */ body.image-modal-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } body.image-modal-open .wa-float, body.image-modal-open .wa-float-new, body.image-modal-open .top-bar, body.image-modal-open .left-panel, body.image-modal-open nav, body.image-modal-open .mobile-nav { display: none !important; } /* Vaziyet image'a click pointer ekle */ .vaziyet-image { cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .vaziyet-image:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,0.2); } @media (max-width: 768px) { .image-modal-close { top: 15px; right: 15px; font-size: 40px; width: 44px; height: 44px; } .image-modal img { max-height: 85vh; } } /* Avangart Proje Detay - Durum Badge'leri */ .avangart-project-status-badge { display: inline-block; padding: 8px 20px; border-radius: 25px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-family: 'Bahnschrift Condensed'; } .avangart-badge-devam-eden { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%); color: #fff; border: 2px solid #45a049; } .avangart-badge-tamamlanan { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); color: #fff; border: 2px solid #1976D2; } /* Responsive Badge */ @media (max-width: 768px) { .avangart-project-status-badge { font-size: 12px; padding: 6px 16px; } } /* Masaüstü Görünüm - Büyük Ekranlar (1441px - 1920px) */ @media (min-width: 1441px) and (max-width: 1920px) { .avangart-project-status-badge { font-size: 16px !important; padding: 10px 24px !important; } } /* Masaüstü Görünüm - Orta Ekranlar (1200px - 1440px) */ @media (min-width: 1200px) and (max-width: 1440px) { .avangart-project-status-badge { font-size: 15px !important; padding: 9px 22px !important; } } /* Masaüstü Görünüm - Küçük Ekranlar (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199px) { .avangart-project-status-badge { font-size: 14px !important; padding: 8px 20px !important; } } /* Tablet Görünüm (769px - 991px) */ @media (min-width: 769px) and (max-width: 991px) { .avangart-project-status-badge { font-size: 13px !important; padding: 7px 18px !important; } } /* ======================================== KONUT VE TİCARİ YAPILAR SAYFA STİLLERİ ======================================== */ /* Konut Filtreleri */ .konut-filters { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; margin: 40px 0; padding: 0 20px; } .konut-filter-btn { display: flex; align-items: center; gap: 10px; padding: 14px 28px; background: #fff; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #666; cursor: pointer; transition: all 0.3s ease; font-family: 'Bahnschrift Condensed'; } .konut-filter-btn svg { width: 20px; height: 20px; stroke-width: 2; } .konut-filter-btn:hover { border-color: #817863; color: #817863; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(129,120,99,0.2); } .konut-filter-btn.active { background: #817863; border-color: #817863; color: #fff; box-shadow: 0 4px 12px rgba(129,120,99,0.3); } /* Konut Projeler Grid */ .konut-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; margin: 40px 0; padding: 0 20px; } .konut-project-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: all 0.3s ease; opacity: 1; transform: translateY(0); } .konut-project-item:hover { transform: translateY(-8px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); } .konut-project-link { display: block; text-decoration: none; color: inherit; } .konut-project-image { position: relative; width: 100%; height: 250px; overflow: hidden; } .konut-project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .konut-project-item:hover .konut-project-image img { transform: scale(1.05); } .konut-project-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); display: flex; align-items: flex-start; justify-content: flex-end; padding: 15px; } .konut-project-status-badge { padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-family: 'Bahnschrift Condensed'; box-shadow: 0 2px 8px rgba(0,0,0,0.2); background: #817863; color: #fff; } .konut-project-status-badge.konut-badge-devam-eden { background: #817863; color: #fff; } .konut-project-status-badge.konut-badge-tamamlanan { background: #817863; color: #fff; } .konut-project-body { padding: 25px; } .konut-project-location { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #817863; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .konut-project-location svg { width: 16px; height: 16px; stroke-width: 2; } .konut-project-body h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; font-family: 'Bahnschrift Condensed'; text-transform: uppercase; letter-spacing: 0.5px; } .konut-project-body p { font-size: 15px; line-height: 1.6; color: #666; margin-bottom: 20px; } .konut-project-specs { display: flex; gap: 20px; margin-bottom: 20px; padding-top: 15px; border-top: 1px solid #e0e0e0; } .konut-spec-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #555; } .konut-spec-item svg { width: 18px; height: 18px; stroke-width: 2; color: #817863; } .konut-project-read-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #817863; text-transform: uppercase; letter-spacing: 0.5px; transition: gap 0.3s ease; text-decoration: none; } .konut-project-read-more:hover { gap: 12px; color: #6a5f52; } .konut-project-read-more svg { width: 18px; height: 18px; stroke-width: 2.5; } /* Proje Bulunamadı Mesajı */ .konut-no-projects { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; gap: 20px; } .konut-no-projects svg { width: 80px; height: 80px; stroke-width: 1.5; color: #ccc; } .konut-no-projects h3 { font-size: 24px; font-weight: 700; color: #666; font-family: 'Bahnschrift Condensed'; text-transform: uppercase; } .konut-no-projects p { font-size: 16px; color: #999; max-width: 400px; } /* Responsive - Tablet */ @media (max-width: 768px) { .konut-filters { gap: 10px; } .konut-filter-btn { padding: 12px 20px; font-size: 12px; flex: 1 1 auto; min-width: 140px; justify-content: center; } .konut-filter-btn svg { width: 18px; height: 18px; } .konut-projects-grid { grid-template-columns: 1fr; gap: 25px; } .konut-project-image { height: 220px; } .konut-project-body { padding: 20px; } .konut-project-body h3 { font-size: 20px; } .konut-project-specs { flex-direction: column; gap: 10px; } } /* Responsive - Büyük Ekranlar */ @media (min-width: 1441px) and (max-width: 1920px) { .konut-filter-btn { font-size: 16px !important; padding: 16px 32px !important; } .konut-projects-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } .konut-project-body h3 { font-size: 24px !important; } .konut-project-body p { font-size: 17px !important; } } @media (min-width: 1200px) and (max-width: 1440px) { .konut-filter-btn { font-size: 15px !important; } .konut-project-body h3 { font-size: 23px !important; } .konut-project-body p { font-size: 16px !important; } } /* Konut Lightbox Modal */ .konut-lightbox-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); overflow: hidden; } .konut-lightbox-modal.active { display: flex; align-items: center; justify-content: center; padding: 20px; } .konut-lightbox-close { position: absolute; top: 20px; right: 40px; color: #fff; font-size: 48px; font-weight: 300; cursor: pointer; z-index: 10002; transition: color 0.3s ease; line-height: 1; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); border-radius: 50%; } .konut-lightbox-close:hover { color: #817863; background: rgba(0,0,0,0.7); } .konut-lightbox-content { max-width: 95%; max-height: 95%; display: flex; align-items: center; justify-content: center; } .konut-lightbox-image { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); } /* Body scroll lock when lightbox is open */ body.konut-lightbox-open { overflow: hidden; position: fixed; width: 100%; height: 100%; } body.konut-lightbox-open .wa-float, body.konut-lightbox-open .wa-float-new, body.konut-lightbox-open .top-bar, body.konut-lightbox-open .left-panel, body.konut-lightbox-open nav, body.konut-lightbox-open .mobile-nav { display: none !important; } /* Proje resmine cursor pointer ekle */ .konut-project-image { cursor: pointer !important; transition: opacity 0.3s ease; } .konut-project-image:hover { opacity: 0.95; } /* Responsive Lightbox */ @media (max-width: 768px) { .konut-lightbox-close { top: 15px; right: 15px; font-size: 40px; width: 44px; height: 44px; } .konut-lightbox-image { max-height: 85vh; } } /* TÜM PROJELER GÖRÜNTÜLE Butonu - Link için */ .all-proj a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; background: #817863; color: #fff !important; font-size: 15px; font-weight: 700; letter-spacing: 0.8px; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 8px; transition: all 0.3s ease; cursor: pointer !important; text-decoration: none; width: 100%; max-width: 350px; margin: 0 auto; } .all-proj a:hover { background: #958c77; border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(129, 120, 99, 0.4); color: #fff !important; } .all-proj a:active { transform: translateY(0); } /* 9 Nokta konu */ .all-proj .btn-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-left: 6px; } .all-proj .btn-dots span { width: 4px; height: 4px; background: #fff; border-radius: 50%; transition: all 0.3s; } .all-proj a:hover .btn-dots span { background: #fff; transform: scale(1.1); } /* TÜM PROJELER GÖRÜNTÜLE - Mobil Görünüm */ @media (max-width: 768px) { .all-proj { padding: 12px 15px; } .all-proj a { padding: 12px 20px; font-size: 13px; max-width: 100%; gap: 6px; } .all-proj .btn-dots { gap: 1.5px; margin-left: 4px; } .all-proj .btn-dots span { width: 3px; height: 3px; } } /* Tablet Görünüm */ @media (min-width: 769px) and (max-width: 1024px) { .all-proj a { padding: 13px 22px; font-size: 14px; max-width: 320px; } } /* Büyük Ekran */ @media (min-width: 1025px) { .all-proj a { font-size: 16px; padding: 15px 26px; max-width: 380px; } .all-proj .btn-dots span { width: 5px; height: 5px; } .all-proj .btn-dots { gap: 2.5px; margin-left: 8px; } } /* ======================================================= LEFT-PANEL ALT EĞİMLİ KUYRUK (2. RESİM BİREBİR TASARIMI) ======================================================= */ /* 1. Panelin taşmasını kesin olarak açın ve paint containment'ı iptal edin */ .left-panel { overflow: visible !important; contain: none !important; border-bottom: none !important; border-bottom-right-radius: 0 !important; } /* 2. Buton alanı: Panel zemin rengini korur, kuyruğun üst köşesini örter */ .all-proj { background: #0c1922 !important; border-bottom-right-radius: 0 !important; position: relative !important; z-index: 3 !important; /* Buton kuyruğun üstünde kalır */ } /* 3. Eğimli kuyruk (Skew -7deg) */ .left-panel::after { content: '' !important; display: block !important; position: absolute !important; top: calc(100% - 15px) !important; /* Butonla birleştiği yerde boşluk kalmaz */ bottom: auto !important; left: 0 !important; width: 100% !important; height: 80px !important; background: #0c1922 !important; /* Panel ile aynı koyu lacivert renk */ transform-origin: top left !important; transform: skewY(-7deg) !important; border-right: 1px solid #505a63 !important; border-bottom: 1px solid #505a63 !important; border-bottom-right-radius: 20px !important; z-index: 1 !important; /* Panelin altında kaybolmaz */ pointer-events: none !important; } /* 4. Panel açıldığında slider/hero arkasında kalmaması için */ .left-panel.open { z-index: 9999 !important; } /* ============================================ BOZÜYÜK OFİS FOOTER - FONT BOYUTU ARTIRMA Tüm ekran boyutları için +2px ============================================ */ /* Varsayılan (mobil ve üzeri) */ .footer-bottom-content .footer-location:nth-child(2), .footer-bottom-content .footer-location:nth-child(2) strong, .footer-bottom-content .footer-location:nth-child(2) div { font-size: calc(1em + 2px) !important; } /* Tablet (768px ve üzeri) */ @media (min-width: 768px) { .footer-bottom-content .footer-location:nth-child(2), .footer-bottom-content .footer-location:nth-child(2) strong, .footer-bottom-content .footer-location:nth-child(2) div { font-size: calc(1em + 2px) !important; } } /* Desktop (1024px ve üzeri) */ @media (min-width: 1024px) { .footer-bottom-content .footer-location:nth-child(2), .footer-bottom-content .footer-location:nth-child(2) strong, .footer-bottom-content .footer-location:nth-child(2) div { font-size: calc(1em + 2px) !important; } } /* Büyük ekran (1440px ve üzeri) */ @media (min-width: 1440px) { .footer-bottom-content .footer-location:nth-child(2), .footer-bottom-content .footer-location:nth-child(2) strong, .footer-bottom-content .footer-location:nth-child(2) div { font-size: calc(1em + 2px) !important; } } /* ============================================ SERTİFİKA RESİMLERİ - YÜKSEKLÜK DÜZENLEMESİ Tüm sertifika kartlarındaki resimleri aynı yükseklikte tut ============================================ */ .certificate-image img { max-width: 150px !important; height: 200px !important; /* Sabit yükseklik - tüm sertifika resimleri aynı boyutta */ object-fit: contain !important; /* Resim oranını koru, taşmayı önle */ object-position: center top !important; /* Resmi üstten hizala */ border: none !important; /* Kenarlıkları kaldır */ border-radius: 0 !important; /* Köşe yuvarlaklığını kaldır */ display: block !important; /* Block element yap - hizalama için */ } /* ============================================ YAZILIM LOGOLARI - YÜKSEKLIK DÜZENLEMESİ VE HIZALAMA Kullanılan Lisanslı Yazılımlar bölümündeki resimleri daha küçük yap Kenarlıkları kaldır ve aynı hizadan başlat/bitir NOT: Modal resimleri bu kuralın dışında tutulmuştur ============================================ */ /* Sadece "Kullanılan Lisanslı Yazılımlar" başlığından sonraki resimleri hedefle */ h2:has-text("Kullanılan Lisanslı Yazılımlar") ~ .certificates-grid .certificate-image img, .certificates-section:nth-child(2) .certificate-image img { height: 100px !important; /* Yazılım logoları için daha küçük yükseklik */ } /* Alternatif: Tüm yazılım logolarını küçült - SADECE certificate-image içindekiler */ .certificate-image img[src*="kullanilan-lisansli-yazilimlar"] { height: 100px !important; /* Yazılım logoları 100px */ max-height: 100px !important; border: none !important; /* Kenarlıkları kaldır */ border-radius: 0 !important; /* Köşe yuvarlaklığını kaldır */ width: 100% !important; /* Genişliği %100 yap - hizalama için */ max-width: 150px !important; /* Maksimum genişlik sınırla */ object-fit: contain !important; /* Resim oranını koru */ display: block !important; /* Block element yap - hizalama için */ } /* Modal içindeki yazılım logoları - tam boyutta göster */ #certificateModalImage[src*="kullanilan-lisansli-yazilimlar"] { height: auto !important; /* Otomatik yükseklik */ max-height: 85vh !important; /* Maksimum ekran yüksekliğinin %85'i */ width: auto !important; /* Otomatik genişlik */ max-width: 90vw !important; /* Maksimum ekran genişliğinin %90'ı */ object-fit: contain !important; /* Resim oranını koru */ } /* ============================================ 20 FARKLI TELEFON VIEWPORT MEDIA QUERY'LERİ Toggle-projects otomatik ayarlama ile ============================================ */ /* 1. iPhone 14 Pro Max, 15 Pro Max (430x932) */ @media(max-width:430px) and (min-width:415px){ .toggle-projects{width:30px!important;height:260px!important;left:2px!important} .toggle-projects .text{font-size:15px!important;letter-spacing:0.8px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.5px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.5px!important;height:2.5px!important} } /* 2. iPhone 14, 14 Plus, 13, 13 Pro (390x844) */ @media(max-width:414px) and (min-width:391px){ .toggle-projects{width:29px!important;height:255px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* 3. iPhone 12, 12 Pro, 13 Mini (375x812) */ @media(max-width:390px) and (min-width:376px){ .toggle-projects{width:28px!important;height:250px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 4. iPhone SE (2020, 2022), 8, 7, 6s (375x667) */ @media(max-width:375px) and (min-width:361px){ .toggle-projects{width:27px!important;height:245px!important;left:1px!important} .toggle-projects .text{font-size:13.5px!important;letter-spacing:0.65px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.2px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.2px!important;height:2.2px!important} } /* 5. Samsung Galaxy S21+, S22+, S23+ (384x824) */ @media(max-width:384px) and (min-width:361px) and (min-height:800px){ .toggle-projects{width:28px!important;height:252px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 6. Samsung Galaxy S21, S22, S23 (360x800) */ @media(max-width:360px) and (min-width:345px){ .toggle-projects{width:26px!important;height:240px!important;left:1px!important} .toggle-projects .text{font-size:13px!important;letter-spacing:0.6px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.1px)!important;gap:1.4px!important;bottom:8px!important} .toggle-projects .dots span{width:2.1px!important;height:2.1px!important} } /* 7. Samsung Galaxy A Series (412x915) */ @media(max-width:412px) and (min-width:391px) and (min-height:900px){ .toggle-projects{width:29px!important;height:258px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* 8. Google Pixel 7, 7 Pro (412x892) */ @media(max-width:412px) and (min-width:391px) and (min-height:850px) and (max-height:900px){ .toggle-projects{width:29px!important;height:256px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* 9. Google Pixel 6, 6 Pro (411x891) */ @media(max-width:411px) and (min-width:391px) and (min-height:850px){ .toggle-projects{width:29px!important;height:255px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* 10. OnePlus 9, 10, 11 (412x919) */ @media(max-width:412px) and (min-width:391px) and (min-height:915px){ .toggle-projects{width:29px!important;height:258px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* 11. Xiaomi Mi 11, 12, 13 (392x872) */ @media(max-width:392px) and (min-width:376px) and (min-height:850px){ .toggle-projects{width:28px!important;height:253px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 12. Xiaomi Redmi Note Series (393x873) */ @media(max-width:393px) and (min-width:376px) and (min-height:850px){ .toggle-projects{width:28px!important;height:253px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 13. Huawei P Series (360x780) */ @media(max-width:360px) and (min-width:345px) and (min-height:750px) and (max-height:800px){ .toggle-projects{width:26px!important;height:238px!important;left:1px!important} .toggle-projects .text{font-size:13px!important;letter-spacing:0.6px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.1px)!important;gap:1.4px!important;bottom:8px!important} .toggle-projects .dots span{width:2.1px!important;height:2.1px!important} } /* 14. Oppo Find X Series (394x873) */ @media(max-width:394px) and (min-width:376px) and (min-height:850px){ .toggle-projects{width:28px!important;height:253px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 15. Vivo X Series (393x851) */ @media(max-width:393px) and (min-width:376px) and (min-height:800px) and (max-height:860px){ .toggle-projects{width:28px!important;height:252px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 16. Realme GT Series (395x877) */ @media(max-width:395px) and (min-width:376px) and (min-height:850px){ .toggle-projects{width:28px!important;height:254px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 17. Sony Xperia Series (411x960) */ @media(max-width:411px) and (min-width:391px) and (min-height:950px){ .toggle-projects{width:29px!important;height:260px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* 18. Motorola Edge Series (398x884) */ @media(max-width:398px) and (min-width:376px) and (min-height:850px){ .toggle-projects{width:28px!important;height:254px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 19. Asus ROG Phone Series (395x912) */ @media(max-width:395px) and (min-width:376px) and (min-height:900px){ .toggle-projects{width:28px!important;height:257px!important;left:1px!important} .toggle-projects .text{font-size:14px!important;letter-spacing:0.7px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.3px)!important;gap:1.5px!important;bottom:9px!important} .toggle-projects .dots span{width:2.3px!important;height:2.3px!important} } /* 20. Nothing Phone Series (412x915) */ @media(max-width:412px) and (min-width:391px) and (min-height:910px){ .toggle-projects{width:29px!important;height:258px!important;left:2px!important} .toggle-projects .text{font-size:14.5px!important;letter-spacing:0.75px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2.4px)!important;gap:1.5px!important;bottom:10px!important} .toggle-projects .dots span{width:2.4px!important;height:2.4px!important} } /* ============================================ GENEL MOBİL FALLBACK (345px ve altı) Çok küçük ekranlar için ============================================ */ @media(max-width:344px){ .toggle-projects{width:25px!important;height:235px!important;left:1px!important} .toggle-projects .text{font-size:12.5px!important;letter-spacing:0.55px!important} .toggle-projects .dots{grid-template-columns:repeat(3,2px)!important;gap:1.3px!important;bottom:8px!important} .toggle-projects .dots span{width:2px!important;height:2px!important} } /* ============================================ YATAY YÖNLENDME (LANDSCAPE) DÜZELTMELERİ Tüm mobil cihazlar için ============================================ */ @media(max-width:900px) and (orientation:landscape){ .toggle-projects{height:clamp(180px,28vh,220px)!important} .toggle-projects .text{font-size:13px!important} .toggle-projects .dots{bottom:8px!important} } /* ========================================================================== SLOGAN SLAYTI (sloganbos.webp) - TÜM CİHAZ VE MEDYA SORGULARI ========================================================================== */ /* 1. MASAÜSTÜ ANA STİL VE YERLEŞİM */ .slide-slogan { position: relative; width: 100%; height: 100%; overflow: hidden; } .slide-slogan img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .slogan-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Slider kaydırma hareketlerini engellemez */ z-index: 15; } .slogan-text { position: absolute; color: #ffffff; /* Windows'ta yerleşik Arial Narrow, telefon ve Mac'te Roboto Condensed */ font-family: 'Arial Narrow', 'Roboto Condensed', -apple-system, sans-serif; font-weight: 600; font-stretch: condensed; font-size: clamp(28px, 3.2vw, 52px); line-height: 1.25; letter-spacing: 0.3px; margin: 0; white-space: nowrap; /* Beyaz bulutlar üzerinde net okunması için 4 yönlü koyu harf konturu */ text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.85), 1px -1px 2px rgba(0, 0, 0, 0.85), -1px 1px 2px rgba(0, 0, 0, 0.85), 1px 1px 2px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.95); } .text-1 { top: 16%; left: 4%; } .text-2 { top: 28%; left: 34%; } .text-3 { top: 40%; right: 4%; } .text-4 { bottom: 22%; left: 12%; } .text-5 { bottom: 12%; left: 28%; } /* MASAÜSTÜ ÖZEL BÜYÜK FONT (769px ve üzeri) */ @media (min-width: 769px) { .slogan-text { font-size: clamp(24px, 2.8vw, 44px) !important; letter-spacing: 0.3px !important; font-weight: 700 !important; } } /* 2. TABLET VE GENİŞ MOBİL (768px ve altı) */ @media (max-width: 768px) { .slide-slogan { height: clamp(350px, 55vh, 500px) !important; top: clamp(-70px, -10vh, -48px) !important; } .slide-slogan img { height: 100% !important; object-fit: cover !important; } .slide-slogan .overlay { display: none !important; } .slogan-text { font-size: clamp(12.5px, 2.6vw, 15px); letter-spacing: 0.15px; } .text-1 { top: 14%; left: 4%; } .text-2 { top: 25%; left: 26%; } .text-3 { top: 38%; right: 4%; } .text-4 { bottom: 28%; left: 12%; } .text-5 { bottom: 16%; left: 20%; } } /* 3. BÜYÜK TELEFONLAR (iPhone Pro Max, Plus serileri - 430px ve altı) */ @media (max-width: 430px) { .slide-slogan { height: clamp(350px, 55vh, 500px) !important; top: clamp(-70px, -10vh, -48px) !important; } .slide-slogan img { height: 100% !important; object-fit: cover !important; } .slide-slogan .overlay { display: none !important; } .slogan-text { font-size: clamp(11px, 2.8vw, 13px); } .text-1 { top: 13%; left: 4%; } .text-2 { top: 24%; left: 22%; } .text-3 { top: 37%; right: 3%; } .text-4 { bottom: 27%; left: 10%; } .text-5 { bottom: 15%; left: 16%; } } /* 4. STANDART TELEFONLAR (iPhone 12/13/14, Galaxy S serisi - 390px ve altı) */ @media (max-width: 390px) { .slide-slogan { height: clamp(350px, 55vh, 500px) !important; top: clamp(-70px, -10vh, -48px) !important; } .slide-slogan img { height: 100% !important; object-fit: cover !important; } .slide-slogan .overlay { display: none !important; } .slogan-text { font-size: clamp(10.5px, 2.7vw, 12px); } .text-1 { top: 12.5%; left: 3%; } .text-2 { top: 23.5%; left: 19%; } .text-3 { top: 36.5%; right: 3%; } .text-4 { bottom: 26.5%; left: 9%; } .text-5 { bottom: 14.5%; left: 14%; } } /* 5. KÜÇÜK TELEFONLAR (iPhone SE, 7/8 serisi - 375px ve altı) */ @media (max-width: 375px) { .slide-slogan { height: clamp(320px, 50vh, 450px) !important; top: clamp(-70px, -10vh, -48px) !important; } .slide-slogan img { height: 100% !important; object-fit: cover !important; } .slide-slogan .overlay { display: none !important; } .slogan-text { font-size: clamp(9.5px, 2.6vw, 11px); letter-spacing: 0.1px; } .text-1 { top: 12%; left: 3%; } .text-2 { top: 23%; left: 16%; } .text-3 { top: 36%; right: 2%; } .text-4 { bottom: 25.5%; left: 8%; } .text-5 { bottom: 14%; left: 12%; } } /* 6. ÇOK KÜÇÜK VE DAR EKRANLAR (344px ve altı - Fallback) */ @media (max-width: 344px) { .slide-slogan { height: clamp(320px, 50vh, 450px) !important; top: clamp(-70px, -10vh, -48px) !important; } .slide-slogan img { height: 100% !important; object-fit: cover !important; } .slide-slogan .overlay { display: none !important; } .slogan-text { font-size: 9px !important; letter-spacing: 0; } .text-1 { top: 11%; left: 2%; } .text-2 { top: 22%; left: 14%; } .text-3 { top: 35%; right: 2%; } .text-4 { bottom: 25%; left: 7%; } .text-5 { bottom: 13.5%; left: 10%; } } /* 7. YATAY YÖNLENDİRME (Landscape Modu) */ @media (max-width: 900px) and (orientation: landscape) { .slide-slogan { height: 100vh !important; } .slide-slogan img { height: 100% !important; object-fit: cover !important; } .slogan-text { font-size: clamp(10px, 1.8vw, 13px); } .text-1 { top: 10%; left: 4%; } .text-2 { top: 22%; left: 30%; } .text-3 { top: 35%; right: 4%; } .text-4 { bottom: 20%; left: 8%; } .text-5 { bottom: 8%; left: 30%; } } /* İLETİŞİM SAYFASI MOBİL DÜZENLEME - ORTALANMIŞ BAŞLIK VE İÇERİK */ @media (max-width: 768px) { /* İletişim başlığı ortalanmış */ .contact-header { text-align: center !important; margin-bottom: 20px !important; } .contact-header h1 { text-align: center !important; font-size: 32px !important; letter-spacing: 2px !important; } /* Alt açıklama metni ortalanmış */ .contact-header + .about-section { text-align: center !important; } .contact-header + .about-section p { text-align: center !important; max-width: 90% !important; margin-left: auto !important; margin-right: auto !important; } /* Tüm about-section başlıkları ortalanmış */ .about-section h2 { text-align: center !important; } /* Tüm about-section içerikleri ortalanmış */ .about-section p { text-align: center !important; } /* Ofis container düzeni */ .offices-container { display: flex !important; flex-direction: column !important; gap: 20px !important; } .offices-container .about-section { background: #ffffff !important; padding: 20px !important; border-radius: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; text-align: center !important; } .offices-container .about-section h2 { font-size: 20px !important; margin-bottom: 15px !important; text-align: center !important; } .offices-container .about-section p { font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 10px !important; text-align: center !important; } /* Harita başlığı ortalanmış */ .contact-map h3 { text-align: center !important; font-size: 24px !important; margin-bottom: 20px !important; } /* Form başlığı ortalanmış */ .contact-form h2, .about-section h2 { text-align: center !important; } } /* ============================================ TÜM MOBİL CİHAZLAR İÇİN GENEL KURALLAR Left panel pseudo elementleri gizle İletişim sayfası container düzenlemeleri ============================================ */ @media (max-width: 900px) { .left-panel::after { display: none !important; } .left-panel::before { display: none !important; } /* İletişim sayfası container düzenlemeleri */ .contact-container { border-radius: 0 !important; } .contact-content { padding: 0 !important; } }