/* ================================================================
MOBIL TEMA v2.0.0 — "MODERN KURUMSAL"
Baştan tasarlandı. Marka renkleri: krem #f5f2ea, lacivert #102b59,
kırmızı #b52c24 / #e03820. Amaç: "1987" / "ilkokul projesi" hissini
tamamen kaldırıp, bir tercüme bürosunun güven veren, sade ve
profesyonel kurumsal kimliğini mobilde de yansıtmak.
Masaüstü header/hero/services-honeycomb (>=1025px) dokunulmadı.
================================================================ */
:root{
--mc-cream:#f5f2ea;
--mc-navy:#102b59;
--mc-navy-deep:#0a1730;
--mc-red:#b52c24;
--mc-red-bright:#e03820;
--mc-ink:#1c2430;
--mc-muted:#5b6572;
--mc-line:#e6e9ee;
--mc-bg:#f4f5f8;
--mc-radius:16px;
--mc-shadow:0 6px 22px rgba(16,43,89,.10);
--mc-shadow-lg:0 14px 34px rgba(16,43,89,.16);
}
.mobile-appbar,
.mobile-bottom-nav,
.pwa-install-btn{display:none}
@media (max-width:1024px){
html{background:var(--mc-bg)}
body{
background:var(--mc-bg);
padding-bottom:80px;
-webkit-tap-highlight-color:transparent;
overscroll-behavior-y:contain;
color:var(--mc-ink);
}
.header .head{display:none!important}
/* ---------------------------------------------------------------
1) ÜST BAR
Beyaz zemin, ince lacivert-tonlu gölge, alt kenarda markanın
kırmızısıyla ince bir çizgi. Sıra: [☰] [logo] .... [dil] [ara]
--------------------------------------------------------------- */
.mobile-appbar{
display:flex!important;
align-items:center!important;
gap:10px!important;
min-height:66px!important;
padding:0 14px!important;
position:sticky!important;
top:0!important;
z-index:3000!important;
background:#fff!important;
box-shadow:var(--mc-shadow)!important;
padding-top:env(safe-area-inset-top);
}
.mobile-appbar:after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:3px;
background:linear-gradient(90deg,var(--mc-red),#ff8a68 55%,var(--mc-red));
}
.mobile-appbar{position:relative!important}
.mobile-menu-toggle{
order:-2!important;
flex:0 0 42px!important;
width:42px!important;height:42px!important;
font-size:0!important;
background:var(--mc-cream)!important;
border:1px solid var(--mc-line)!important;
border-radius:12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
transition:background .15s ease!important;
}
.mobile-menu-toggle:active{background:#ece7d8!important}
.mobile-menu-toggle:before{
content:"";
display:block;
width:19px;height:13px;
background:var(--mc-navy);
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.mobile-appbar .mobile-logo{
order:-1!important;
flex:0 0 60px!important;
width:60px!important;height:60px!important;
display:flex!important;
align-items:center!important;
}
.mobile-appbar .mobile-logo img{
width:60px!important;height:60px!important;
max-height:none!important;
object-fit:contain!important;
}
.mobile-app-title{display:none!important}
.lang-switcher-mobile{
order:1!important;
flex:0 0 auto!important;
margin-left:auto!important;
position:static!important;
}
.lang-switcher-mobile .lang-trigger{
min-width:0!important;
padding:0 9px!important;
height:38px!important;
border-radius:10px!important;
background:var(--mc-cream)!important;
border:1px solid var(--mc-line)!important;
}
.lang-switcher-mobile .lang-current-code{display:none!important}
.lang-switcher-mobile .lang-dropdown{
position:fixed!important;
left:50%!important;right:auto!important;
top:74px!important;
transform:translateX(-50%)!important;
width:min(92vw,380px)!important;
max-width:min(92vw,380px)!important;
max-height:calc(100vh - 100px)!important;
overflow-y:auto!important;
border-radius:var(--mc-radius)!important;
box-shadow:var(--mc-shadow-lg)!important;
border:1px solid var(--mc-line)!important;
}
.pwa-install-btn{display:none!important}
.mobile-call-btn{
order:2!important;
flex:0 0 42px!important;
width:42px!important;height:42px!important;
margin-left:auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:50%!important;
background:linear-gradient(155deg,var(--mc-red-bright),var(--mc-red))!important;
box-shadow:0 4px 12px rgba(181,44,36,.35)!important;
transition:transform .15s ease!important;
text-decoration:none!important;
}
.mobile-call-btn:active{transform:scale(.92)!important}
.mobile-call-btn svg{width:18px!important;height:18px!important;fill:#fff!important}
/* ---------------------------------------------------------------
2) ÇEKMECE MENÜ — kurumsal, lacivert vurgulu
--------------------------------------------------------------- */
.header{position:relative!important;z-index:2800!important;height:0}
.menubg{
position:fixed!important;
z-index:2800!important;
left:0!important;top:66px!important;bottom:80px!important;
width:min(86vw,380px)!important;
height:auto!important;
overflow-y:auto!important;overflow-x:hidden!important;
transform:translateX(-105%);
transition:transform .24s ease;
background:#fff!important;
box-shadow:16px 0 44px rgba(10,23,48,.20);
padding:14px 0 24px;
border-right:1px solid var(--mc-line);
}
body.mobile-menu-open .menubg{transform:translateX(0)}
body.mobile-menu-open:after{
content:"";position:fixed;z-index:2700;
inset:66px 0 80px 0;
background:rgba(10,23,48,.45);
}
.menubg #wrapper,.header #wrapper{width:100%!important}
.menuAc{display:none!important}
.menu{width:100%!important;float:none!important;margin:0!important}
.menu>ul{display:block!important;width:100%!important;float:none!important;margin:0!important;padding:0 10px!important}
.menu li{width:100%!important;float:none!important;position:relative!important}
.menu li>a{
width:100%!important;float:none!important;
min-height:54px;padding:0 14px!important;
display:flex!important;align-items:center!important;
color:var(--mc-ink)!important;
background:transparent!important;border:0!important;
border-bottom:1px solid var(--mc-line)!important;
font-size:15.5px!important;line-height:1.25!important;font-weight:700!important;
text-align:left!important;
border-radius:10px!important;
}
.menu li>a:active{background:var(--mc-cream)!important}
.menu li.has-children>a:after{
content:"›";margin-left:auto;font-size:24px;
transition:transform .18s ease;color:var(--mc-muted);
}
.menu li.has-children.mobile-sub-open>a:after{transform:rotate(90deg);color:var(--mc-red)}
.menu ul li ul,.menu ul li ul li ul{
position:static!important;display:none!important;width:100%!important;
float:none!important;margin:0!important;padding:0 0 0 12px!important;
background:var(--mc-cream)!important;border-radius:10px;
}
.menu li.mobile-sub-open>ul{display:block!important}
.menu ul li ul li>a{
min-height:46px!important;font-size:14px!important;font-weight:600!important;
padding:0 14px!important;color:var(--mc-navy)!important;border-bottom:1px solid rgba(16,43,89,.08)!important;
}
/* ---------------------------------------------------------------
3) HERO SLIDER — tek net katman (çift bulanık katman düzeltmesi
korunuyor), kurumsal koyu-lacivert geçişli overlay
--------------------------------------------------------------- */
.hero{height:300px!important;min-height:300px;border-radius:0 0 26px 26px;overflow:hidden;background-position:center!important}
.hero .inner{width:auto!important;margin:0!important;padding:80px 22px 0!important}
.hero h1{font-size:28px!important;line-height:1.14}
.hero p{font-size:15px!important;line-height:1.55;max-width:92%}
#largeredbtn{padding:11px 22px!important;font-size:15px!important;border-radius:12px!important}
.pro-hero-slider{height:370px!important;min-height:0!important;max-height:none!important}
.pro-hero-backdrop,
.pro-hero-slide.fit-contain .pro-hero-backdrop,
.pro-hero-slide.fit-cover .pro-hero-backdrop{display:none!important;opacity:0!important}
.pro-hero-bg,
.pro-hero-slide.fit-contain .pro-hero-bg,
.pro-hero-slide.fit-cover .pro-hero-bg{
position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
object-fit:cover!important;object-position:var(--slide-position,center)!important;transform:none!important;
}
.pro-hero-slide:before{
background:linear-gradient(180deg,rgba(10,23,48,.18) 0%,rgba(10,23,48,.68) 100%)!important;
}
.pro-hero-content{padding-top:0!important;align-items:flex-end!important;padding-bottom:24px!important}
.pro-hero-copy{width:100%!important;padding:0 18px!important}
.pro-hero-copy h1{font-size:25px!important;line-height:1.14!important;letter-spacing:-.6px!important;max-width:100%!important}
.pro-hero-copy p{font-size:13.5px!important;line-height:1.5!important;max-width:100%!important;color:#eef1f6!important}
.pro-hero-actions{margin-top:16px!important;display:flex!important;gap:10px!important}
.pro-hero-btn{
min-height:44px!important;padding:0 18px!important;font-size:13px!important;
border-radius:12px!important;font-weight:800!important;
}
.pro-hero-btn:first-child{
background:linear-gradient(155deg,var(--mc-red-bright),var(--mc-red))!important;
box-shadow:0 8px 18px rgba(181,44,36,.35)!important;border:0!important;
}
.pro-slider-dots{right:14px!important}
.pro-slider-dots span{background:rgba(255,255,255,.5)!important}
.pro-slider-dots span.active{background:var(--mc-red-bright)!important}
.pro-slider-arrow{display:none!important}
/* ---------------------------------------------------------------
4) GENEL SAYFA DÜZENİ — kartlar, başlıklar, istatistikler
--------------------------------------------------------------- */
.section{padding:32px 16px!important}
.section>#wrapper,.stats>#wrapper,.callbar>#wrapper,.footer>#wrapper,.page-head>#wrapper{width:100%!important}
.section-title{
font-size:22px!important;
font-weight:800!important;
color:var(--mc-navy)!important;
margin-bottom:20px!important;
padding-bottom:12px!important;
position:relative!important;
border-bottom:0!important;
}
.section-title:after{
content:"";
position:absolute;left:0;bottom:0;
width:42px;height:3px;
background:linear-gradient(90deg,var(--mc-red),#ff8a68);
border-radius:3px;
}
.grid{gap:16px!important}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important}
.home-about,.product-detail,.footer .cols{grid-template-columns:1fr!important}
.home-about{gap:20px!important}
.card{
border:1px solid var(--mc-line)!important;
border-radius:var(--mc-radius)!important;
box-shadow:var(--mc-shadow)!important;
background:#fff!important;
overflow:hidden!important;
}
.card img{height:200px!important}
.card-body{padding:18px!important}
.card-body h3,.card-body h4{color:var(--mc-navy)!important}
.feature{
background:#fff;
border:1px solid var(--mc-line);
border-radius:var(--mc-radius);
padding:24px 16px;
box-shadow:var(--mc-shadow);
text-align:center;
}
.feature-circle{
height:86px!important;width:86px!important;line-height:86px!important;font-size:32px!important;
background:linear-gradient(155deg,var(--mc-navy),var(--mc-navy-deep))!important;
color:#fff!important;
box-shadow:0 8px 18px rgba(16,43,89,.28)!important;
}
.stats{
padding:30px 16px!important;
border-radius:26px 26px 0 0;
background:linear-gradient(135deg,var(--mc-navy),var(--mc-navy-deep))!important;
}
.stats .grid{grid-template-columns:repeat(2,1fr)!important}
.stat{padding:16px 6px;text-align:center}
.stat strong{font-size:28px!important;color:#fff!important}
.stat span{color:rgba(255,255,255,.75)!important}
.page-head{
padding:26px 18px!important;
border-radius:0 0 24px 24px;
background:linear-gradient(135deg,var(--mc-navy),var(--mc-navy-deep))!important;
}
.page-head h1{font-size:25px!important;color:#fff!important}
.page-head p{color:rgba(255,255,255,.8)!important}
.product-detail{gap:20px!important}
.product-detail img{max-height:320px!important;border-radius:var(--mc-radius)}
.btn,.public-form button{
min-height:48px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:12px!important;
font-weight:800;
}
.btn.btn-primary,#largeredbtn{
background:linear-gradient(155deg,var(--mc-red-bright),var(--mc-red))!important;
box-shadow:0 8px 18px rgba(181,44,36,.32)!important;
border:0!important;
}
.public-form input,.public-form textarea,.public-form select{
min-height:48px;
border-radius:12px!important;
border:1px solid var(--mc-line)!important;
font-size:16px!important; /* iOS zoom engeli */
}
.public-form input:focus,.public-form textarea:focus,.public-form select:focus{
border-color:var(--mc-navy)!important;
box-shadow:0 0 0 3px rgba(16,43,89,.12)!important;
}
.callbar{
padding:26px 18px!important;text-align:center;
background:linear-gradient(135deg,var(--mc-navy),var(--mc-navy-deep))!important;
color:#fff!important;
}
.callbar .wrap{display:block!important}
.callbar .btn{
margin-top:16px!important;
background:linear-gradient(155deg,var(--mc-red-bright),var(--mc-red))!important;
color:#fff!important;border:0!important;
}
.footer{padding:34px 18px 0!important;background:var(--mc-cream)!important}
.footer .cols{gap:24px!important}
.footer h4{color:var(--mc-navy)!important}
.altfooter{
margin-left:-18px;margin-right:-18px;
padding-bottom:calc(20px + env(safe-area-inset-bottom));
background:var(--mc-navy-deep)!important;color:rgba(255,255,255,.7)!important;
}
/* ---------------------------------------------------------------
5) ALT UYGULAMA NAVİGASYONU
--------------------------------------------------------------- */
.mobile-bottom-nav{
position:fixed;z-index:3100;left:0;right:0;bottom:0;
height:74px;
padding-bottom:env(safe-area-inset-bottom);
display:grid;grid-template-columns:repeat(5,1fr);
background:rgba(255,255,255,.98);
border-top:1px solid var(--mc-line);
box-shadow:0 -8px 26px rgba(16,43,89,.10);
backdrop-filter:blur(12px);
}
.mobile-bottom-nav a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
color:var(--mc-muted);text-decoration:none;font-size:10px;font-weight:700;
}
.mobile-bottom-nav a .mi{font-size:22px;line-height:1}
.mobile-bottom-nav a:active,.mobile-bottom-nav a.active{color:var(--mc-red)!important}
@media (display-mode:standalone){
.mobile-appbar{padding-top:max(env(safe-area-inset-top),6px);height:calc(66px + env(safe-area-inset-top))}
.menubg{top:calc(66px + env(safe-area-inset-top))!important}
}
/* ---------------------------------------------------------------
6) HİZMETLER / SERVICES-HONEYCOMB — petek şekli korunuyor,
krem çerçeve + lacivert gölge (marka renkleri)
--------------------------------------------------------------- */
.services-honeycomb-cluster{
position:static!important;left:auto!important;top:auto!important;
width:100%!important;height:auto!important;zoom:1!important;
display:grid!important;grid-template-columns:repeat(2,1fr)!important;
column-gap:10px!important;row-gap:34px!important;padding:0 4px 34px!important;
}
.services-honeycomb-cell{
position:relative!important;left:auto!important;top:auto!important;
width:100%!important;height:auto!important;aspect-ratio:0.87/1!important;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)!important;
background:var(--mc-cream)!important;
filter:drop-shadow(0 10px 16px rgba(16,43,89,.20))!important;
box-shadow:none!important;overflow:visible!important;
transition:transform .25s ease,filter .25s ease!important;
}
.services-honeycomb-cell:nth-child(2n){transform:translateY(38%)!important}
.services-honeycomb-cell:active{transform:scale(.96)!important;filter:drop-shadow(0 14px 20px rgba(16,43,89,.28))!important}
.services-honeycomb-cell:nth-child(2n):active{transform:translateY(38%) scale(.96)!important}
.services-honeycomb-inner{
position:absolute!important;inset:5px!important;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)!important;
display:block!important;overflow:hidden!important;background:var(--mc-navy-deep)!important;
}
.services-honeycomb-inner img{
position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
object-fit:cover!important;filter:grayscale(.35) brightness(.82) contrast(1.04)!important;
}
.services-honeycomb-cell:active .services-honeycomb-inner img{filter:grayscale(0) brightness(.9) contrast(1.03)!important}
.services-honeycomb-shade{
position:absolute!important;inset:0!important;
background:radial-gradient(circle at 50% 52%,rgba(8,28,58,.78) 0%,rgba(8,28,58,.32) 45%,rgba(8,28,58,.58) 100%)!important;
}
.services-honeycomb-label{
position:absolute!important;left:20%!important;right:20%!important;
top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;text-align:center!important;
}
.services-honeycomb-label strong{
display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
overflow:hidden!important;font-size:11.5px!important;line-height:1.2!important;
text-shadow:0 2px 6px rgba(0,0,0,.85)!important;
}
.services-honeycomb-intro h2{font-size:25px!important;letter-spacing:-.8px!important;color:var(--mc-navy)!important}
.services-honeycomb-intro p{font-size:13.5px!important;color:var(--mc-muted)!important}
.services-honeycomb-wrap{width:calc(100% - 24px)!important;display:block!important}
.services-honeycomb{padding-bottom:56px!important}
}
/* Çok küçük telefonlar: tek sütun, hexagon yerine yuvarlatılmış kart */
@media (max-width:360px){
.services-honeycomb-cluster{grid-template-columns:1fr!important;row-gap:16px!important}
.services-honeycomb-cell{aspect-ratio:1.6/1!important;clip-path:none!important;border-radius:14px!important}
.services-honeycomb-cell:nth-child(2n){transform:none!important}
.services-honeycomb-cell:nth-child(2n):active{transform:scale(.97)!important}
.services-honeycomb-inner{clip-path:none!important}
.services-honeycomb-label{text-align:left!important}
}
/* ================================================================
v2.1.0 — YAPISAL YENİLEME (sadece renk değil)
Bu blok yukarıdaki tanımların ÜZERİNE yazar (dosyanın sonunda,
aynı seçiciler için CSS her zaman en sona yazılanı uygular).
Amaç: sayfa artık "üst üste dizilmiş kutular" gibi değil, gerçek
bir mobil UYGULAMA gibi hissetsin — kaydırmalı kart rayları,
hero'nun içeriğin üzerine "yaprak gibi" binmesi, yüzen (floating)
pill alt navigasyon, ikon rozetli bölüm başlıkları.
================================================================ */
@media (max-width:1024px){
/* ---- A) Hero artık altındaki içeriğin ÜZERİNE biniyor (sheet/kart
efekti) — düz "resim + kutu kutu" hissi yerine katmanlı, modern
bir görünüm. ---- */
.hero,
.pro-hero-slider{
border-radius:0 0 30px 30px!important;
margin-bottom:-26px!important;
position:relative!important;
z-index:1!important;
}
body>.section:first-of-type,
body>.services-honeycomb:first-of-type,
.header+.hero+.section,
.pro-hero-slider+.section,
.pro-hero-slider+.services-honeycomb{
position:relative!important;
z-index:2!important;
background:#fff!important;
border-radius:26px 26px 0 0!important;
padding-top:34px!important;
box-shadow:0 -18px 30px -18px rgba(16,43,89,.18)!important;
}
/* ---- B) Bölüm başlıkları: soldaki kırmızı çizgi yerine artık
lacivert bir ikon rozeti + başlık ikilisi — daha "uygulama gibi". ---- */
.section-title{
display:flex!important;
align-items:center!important;
gap:10px!important;
border-bottom:0!important;
}
.section-title:before{
content:"";
flex:0 0 8px;width:8px;height:26px;
border-radius:5px;
background:linear-gradient(180deg,var(--mc-red-bright),var(--mc-red));
}
.section-title:after{display:none!important}
/* Çift/tek bölümler hafif zemin farkıyla ayrışsın — düz beyaz
tekrarı yerine katmanlı bir ritim oluşsun. */
.section:nth-of-type(even){background:var(--mc-cream)!important}
/* ---- C) Kart ızgaraları (hizmet/ürün kartları) artık alt alta
yığılmıyor — yatayda parmakla kaydırılan bir "ray" (carousel).
Bu, en görünür yapısal fark: liste değil, kaydırmalı raf. ---- */
.grid-3,.grid-4{
display:flex!important;
grid-template-columns:none!important;
overflow-x:auto!important;
scroll-snap-type:x mandatory!important;
gap:14px!important;
margin:0 -16px!important;
padding:4px 16px 10px!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
.grid-3::-webkit-scrollbar,.grid-4::-webkit-scrollbar{display:none!important}
.grid-3>*,.grid-4>*{
flex:0 0 76%!important;
max-width:76%!important;
scroll-snap-align:start!important;
}
/* ---- D) İstatistikler: 2x2 sabit kutu yerine yatay kaydırmalı
kapsüller — lacivert zemin üstünde cam efektli (glass) kartlar. ---- */
.stats .grid{
display:flex!important;
grid-template-columns:none!important;
overflow-x:auto!important;
scroll-snap-type:x mandatory!important;
gap:12px!important;
padding-bottom:4px!important;
scrollbar-width:none!important;
}
.stats .grid::-webkit-scrollbar{display:none!important}
.stat{
flex:0 0 46%!important;
scroll-snap-align:start!important;
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:16px!important;
backdrop-filter:blur(6px)!important;
}
/* ---- E) Alt navigasyon artık ekrana yapışık düz bir çubuk değil —
kenarlardan boşluklu, tamamen yuvarlak, yüzen bir "pill" bar.
Aktif sekme kırmızı bir kapsül rozetiyle vurgulanıyor. ---- */
body{padding-bottom:112px!important}
.mobile-bottom-nav{
left:14px!important;right:14px!important;bottom:14px!important;
height:66px!important;
border-radius:24px!important;
border:1px solid var(--mc-line)!important;
box-shadow:0 16px 34px rgba(16,43,89,.22)!important;
}
.mobile-bottom-nav a{position:relative!important;z-index:1!important}
.mobile-bottom-nav a.active:before{
content:"";
position:absolute;
inset:6px 10px auto 10px;
top:4px;height:34px;
background:rgba(181,44,36,.10);
border-radius:16px;
z-index:-1;
}
/* ---- F) Hizmetler peteği artık düz bir kutunun içinde değil —
üst bölümle aynı "üste binen sheet" diline uyması için üst
köşeleri yuvarlatılmış zemin üstünde duruyor. Zemin masaüstüyle
aynı bal peteği desenini kullanıyor (v3.9.9) ama mobilde daha
açık/yumuşak: desen yukarıda belirgin, aşağı doğru soluyor. ---- */
.services-honeycomb,
body>.services-honeycomb:first-of-type,
.pro-hero-slider+.services-honeycomb{
position:relative!important;
z-index:2!important;
background-color:#f2ede3!important;
background-image:
linear-gradient(to bottom,rgba(242,237,227,0) 58%,rgba(242,237,227,.95) 100%),
url('hex-pattern.svg'),
linear-gradient(180deg,#f8f4ec 0%,#efe8da 100%)!important;
background-repeat:no-repeat,repeat,no-repeat!important;
background-size:auto,185px 321px,auto!important;
background-position:center,center top,center!important;
}
}
/* ================================================================
v3.0.0 — "UYGULAMA TARZI" (alt navigasyon ön planda)
Kullanıcının seçtiği yön: Instagram/WhatsApp gibi, esas gezinme
ekranın altındaki sabit ikon çubuğunda; üstteki hamburger artık
ikincil (sadece nadir sayfalar/dil için). Metin karakteri ikonlar
(⌂ ⚙ ? i ✉) gerçek çizgisel SVG ikonlarla değiştirildi — "1987"
hissinin en büyük sebeplerinden biri buydu. footer.php'ye eklenen
küçük bir script şu an hangi sayfada olunduğunu tespit edip
ilgili sekmeye .active sınıfını ekliyor (öncesinde hiçbir şey bunu
yapmıyordu, aktif sekme vurgusu hiç çalışmıyordu).
================================================================ */
@media (max-width:1024px){
/* ---- Üst bar artık ikincil: daha alçak, daha sade, gölgesi
hafifletildi; asıl dikkat alt navigasyona kayıyor. ---- */
.mobile-appbar{
min-height:58px!important;
box-shadow:0 2px 10px rgba(16,43,89,.06)!important;
}
.mobile-appbar:after{height:0!important} /* alt kırmızı çizgi kalktı, o vurgu artık alt navigasyonda */
.mobile-menu-toggle{
width:36px!important;height:36px!important;flex:0 0 36px!important;
background:transparent!important;border:0!important;box-shadow:none!important;
}
.mobile-appbar .mobile-logo{width:52px!important;height:52px!important;flex:0 0 52px!important}
.mobile-appbar .mobile-logo img{width:52px!important;height:52px!important}
/* ---- Alt navigasyon: artık uygulamanın ASIL gezinme aracı.
Tam genişlik, dock edilmiş, üst köşeleri yuvarlak, belirgin
ikon+etiket, aktif sekme dolgulu kapsül. ---- */
body{padding-bottom:84px!important}
.mobile-bottom-nav{
left:0!important;right:0!important;bottom:0!important;
height:72px!important;
border-radius:22px 22px 0 0!important;
border:0!important;
border-top:1px solid var(--mc-line,#e6e9ee)!important;
box-shadow:0 -10px 28px rgba(16,43,89,.14)!important;
background:#fff!important;
}
.mobile-bottom-nav a{
gap:4px!important;
font-size:10.5px!important;
font-weight:800!important;
color:var(--mc-muted,#5b6572)!important;
padding:6px 2px 0!important;
}
.mobile-bottom-nav a.active{color:var(--mc-red,#b52c24)!important}
.mobile-bottom-nav a.active .mi{
background:rgba(181,44,36,.12)!important;
border-radius:14px!important;
}
/* İkon karakterlerini gizle, yerine gerçek SVG çizgi ikon koy.
Teknik: mask ile şekil kesiliyor, arkaplan rengi currentColor'dan
geliyor — böylece aktif/pasif renk otomatik uyuyor. */
.mobile-bottom-nav a .mi{
font-size:0!important;
width:44px!important;height:26px!important;
display:flex!important;align-items:center!important;justify-content:center!important;
color:inherit!important;
transition:background .15s ease!important;
}
.mobile-bottom-nav a .mi:before{
content:"";
display:block;
width:21px;height:21px;
background:currentColor;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:contain;mask-size:contain;
}
.mobile-bottom-nav a[href="index.php"] .mi:before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.mobile-bottom-nav a[href="services.php"] .mi:before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.mobile-bottom-nav a[href="faq.php"] .mi:before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.mobile-bottom-nav a[href="help.php"] .mi:before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
.mobile-bottom-nav a[href="contact.php"] .mi:before{
-webkit-mask-image:url('data:image/svg+xml;utf8,');
mask-image:url('data:image/svg+xml;utf8,');
}
/* Çekmece menüyü (hamburger) açan üst çubuk artık ikincil olduğu
için çekmece penceresi de biraz daha sadeleşti. */
.menubg{top:58px!important}
body.mobile-menu-open:after{inset:58px 0 84px 0!important}
}
@media (display-mode:standalone){
.mobile-bottom-nav{padding-bottom:calc(env(safe-area-inset-bottom) + 4px)!important}
}
/* ================================================================
v3.2.0 — ÜST BAR: AÇIK/UYUMLU (v3.1.0'daki koyu lacivert zemin
geri alındı — kullanıcı "koyu değil, siteyle UYUMLU olsun" dedi).
Site genelinde zemin krem/beyaz, vurgu rengi kırmızı+lacivert.
Üst bar da aynı dile dönüyor: açık krem zemin, lacivert ikon/yazı,
kırmızı sadece "Ara" CTA'sında — v3.1.0'ın yapısal iyileştirmeleri
(rozet logo, yazılı Ara butonu, çip görünümlü dil seçici) korunuyor,
sadece renk şeması siteyle uyumlu hale getirildi.
================================================================ */
@media (max-width:1024px){
.mobile-appbar{
background:var(--mc-cream,#f5f2ea)!important;
box-shadow:0 4px 16px rgba(16,43,89,.10)!important;
border-radius:0 0 18px 18px!important;
padding:0 12px!important;
border-bottom:1px solid rgba(16,43,89,.08)!important;
}
.mobile-appbar:after{
content:"";
position:absolute;left:0;right:0;bottom:-1px;height:3px;
background:linear-gradient(90deg,var(--mc-red,#b52c24),#ff8a68 55%,var(--mc-red,#b52c24));
}
.mobile-menu-toggle{
background:#fff!important;
border:1px solid var(--mc-line,#e6e9ee)!important;
border-radius:10px!important;
}
.mobile-menu-toggle:before{background:var(--mc-navy,#102b59)!important}
.mobile-menu-toggle:active{background:var(--mc-line,#e6e9ee)!important}
.mobile-appbar .mobile-logo{
background:#fff!important;
border-radius:12px!important;
padding:3px!important;
box-shadow:0 2px 8px rgba(16,43,89,.10)!important;
}
.lang-switcher-mobile .lang-trigger{
background:#fff!important;
border:1px solid var(--mc-line,#e6e9ee)!important;
border-radius:10px!important;
}
.lang-switcher-mobile .lang-trigger,
.lang-switcher-mobile .lang-trigger *{color:var(--mc-navy,#102b59)!important}
.mobile-call-btn{
width:auto!important;
border-radius:20px!important;
padding:0 14px 0 10px!important;
gap:6px!important;
background:linear-gradient(155deg,var(--mc-red-bright,#e03820),var(--mc-red,#b52c24))!important;
box-shadow:0 4px 12px rgba(181,44,36,.30)!important;
}
.mobile-call-btn svg{fill:#fff!important}
.mobile-call-btn:after{
content:"Ara";
color:#fff;
font-weight:800;
font-size:12.5px;
letter-spacing:.2px;
}
.menubg{
border-top:3px solid var(--mc-red,#b52c24)!important;
}
}
/* ================================================================
v3.2.1 — düzeltme: logo büyütüldü, sağdaki dil+ara butonu artık
ortada boşlukta "ayrı" durmuyor, tek bir grup gibi sıkı duruyor.
================================================================ */
@media (max-width:1024px){
.mobile-appbar{gap:8px!important}
.mobile-appbar .mobile-logo{
width:64px!important;height:64px!important;flex:0 0 64px!important;
}
.mobile-appbar .mobile-logo img{
width:58px!important;height:58px!important;
}
/* dil seçici ve ara butonu artık tek bir sağ grup gibi bitişik */
.lang-switcher-mobile{margin-left:auto!important;margin-right:6px!important}
.mobile-call-btn{margin-left:0!important}
}
/* ================================================================
v3.3.0 — SADELEŞTİRME: logo ve dil seçici etrafındaki beyaz
"kutu/rozet" kartlar tamamen kaldırıldı (kalabalık/dağınık
duruyordu). Artık hiçbiri kutu içinde değil, doğrudan krem
barın üstünde duruyorlar — tek vurgulu eleman sadece kırmızı
"Ara" butonu (gerçek bir aksiyon olduğu için).
================================================================ */
@media (max-width:1024px){
.mobile-appbar .mobile-logo{
background:transparent!important;
box-shadow:none!important;
padding:0!important;
}
.lang-switcher-mobile .lang-trigger{
background:transparent!important;
border:0!important;
}
.mobile-menu-toggle{
background:transparent!important;
border:0!important;
}
.mobile-menu-toggle:active{background:rgba(16,43,89,.06)!important}
}
/* v3.3.2 — sadece logo büyüdü, bar yüksekliği sabit kaldı */
@media (max-width:1024px){
.mobile-appbar .mobile-logo{
width:78px!important;height:78px!important;flex:0 0 78px!important;
overflow:visible!important;
}
.mobile-appbar .mobile-logo img{
width:74px!important;height:74px!important;
max-height:none!important;
}
}
/* v3.4.0 — üst bar tek başına logo ile "boş" duruyordu, site adı
yazısı geri getirildi (logonun yanında, marka lacivertinde). */
@media (max-width:1024px){
.mobile-app-title{
display:block!important;
order:0!important;
flex:1!important;
min-width:0!important;
color:var(--mc-navy,#102b59)!important;
font-weight:800!important;
font-size:15px!important;
line-height:1.2!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
/* ================================================================
v3.5.0 — "Ara" butonu masaüstündeki kırmızı "Bizi Arayın (0212)…"
banner'ının mobil karşılığına dönüştü: ikon + iki satır yazı
(küçük etiket + kalın numara), kırmızı gradyan kapsül içinde.
Eskiden sadece ikon+"Ara" yazan CSS pseudo-content'i kaldırıldı,
yerine header.php'de eklenen gerçek yazı kullanılıyor.
================================================================ */
@media (max-width:1024px){
.mobile-call-btn:after{content:none!important}
.mobile-call-btn{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
width:auto!important;
max-width:148px!important;
height:auto!important;
padding:7px 13px!important;
border-radius:16px!important;
background:linear-gradient(120deg,var(--mc-red-bright,#e03820),var(--mc-red,#b52c24))!important;
box-shadow:0 5px 14px rgba(181,44,36,.32)!important;
}
.mobile-call-btn svg{
width:17px!important;height:17px!important;flex:0 0 17px!important;
}
.mobile-call-text{
display:flex!important;
flex-direction:column!important;
line-height:1.15!important;
min-width:0!important;
overflow:hidden!important;
}
.mobile-call-text em{
font-style:normal!important;
font-size:8.5px!important;
font-weight:700!important;
color:rgba(255,255,255,.82)!important;
text-transform:uppercase!important;
letter-spacing:.3px!important;
white-space:nowrap!important;
}
.mobile-call-text b{
font-weight:800!important;
font-size:11.5px!important;
color:#fff!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* Küçük ekranlarda site adı yazısı biraz kısılıp arama bloğuna yer açıyor */
.mobile-app-title{font-size:13.5px!important}
}
@media (max-width:360px){
.mobile-call-text em{display:none!important} /* çok dar ekranda sadece numara kalsın */
}
/* ================================================================
v3.6.0 — site adı yazısı tekrar kaldırıldı (sadece logo büyük
kalsın istendi), bar zemini kırmızı/beyaz ikilisine döndü
(soluk gri-mavi krem tonu istenmiyordu).
================================================================ */
@media (max-width:1024px){
.mobile-app-title{display:none!important}
.mobile-appbar .mobile-logo{
flex:1 1 auto!important;
width:auto!important;
max-width:none!important;
}
.mobile-appbar .mobile-logo img{
width:84px!important;height:84px!important;
}
.mobile-appbar{
background:#fff!important;
}
.mobile-appbar:after{
background:linear-gradient(90deg,var(--mc-red-bright,#e03820),var(--mc-red,#b52c24))!important;
height:4px!important;
}
}
/* v3.6.1 — arama butonu kalp atışı gibi nabız atıyor (dikkat çeksin) */
@keyframes mcHeartbeat{
0%{transform:scale(1);box-shadow:0 5px 14px rgba(181,44,36,.32)}
20%{transform:scale(1.08);box-shadow:0 5px 18px rgba(181,44,36,.5)}
40%{transform:scale(1);box-shadow:0 5px 14px rgba(181,44,36,.32)}
60%{transform:scale(1.08);box-shadow:0 5px 18px rgba(181,44,36,.5)}
80%{transform:scale(1);box-shadow:0 5px 14px rgba(181,44,36,.32)}
100%{transform:scale(1);box-shadow:0 5px 14px rgba(181,44,36,.32)}
}
@media (max-width:1024px){
.mobile-call-btn{
animation:mcHeartbeat 2.4s ease-in-out infinite!important;
}
.mobile-call-btn:active{animation:none!important;transform:scale(.94)!important}
}
/* v3.6.2 — soldaki hamburger menü ikonu büyütüldü */
@media (max-width:1024px){
.mobile-menu-toggle{
width:48px!important;height:48px!important;flex:0 0 48px!important;
}
.mobile-menu-toggle:before{
width:26px!important;height:18px!important;
}
}
/* v3.6.3 — dil seçicinin (bayrak) etrafına tekrar çerçeve eklendi,
düz/sınırsız duruyordu ve dikkat çekmiyordu. */
@media (max-width:1024px){
.lang-switcher-mobile .lang-trigger{
border:1.5px solid var(--mc-line,#e6e9ee)!important;
border-radius:10px!important;
background:#fff!important;
padding:5px 9px!important;
box-shadow:0 2px 6px rgba(16,43,89,.08)!important;
}
}
/* v3.6.4 — hamburger tekrar büyütüldü */
@media (max-width:1024px){
.mobile-menu-toggle{
width:56px!important;height:56px!important;flex:0 0 56px!important;
}
.mobile-menu-toggle:before{
width:30px!important;height:21px!important;
}
}
/* v3.6.5 — dil seçici ile arama butonunun köşe yuvarlaklığı eşitlendi
(arama butonunki abartılı/aşırı yuvarlaktı) */
@media (max-width:1024px){
.mobile-call-btn{border-radius:10px!important}
}
/* v3.7.1 — üst bar artık ekranın tepesine yapışık (sticky) kalmıyor,
sayfa kaydırıldığında header da birlikte yukarı kayıp gidiyor.
(Not: bu sürüm numarası zorla değiştirildi çünkü panel "zaten
yüklü" diyip 3.7.0'ı tekrar kopyalamamıştı.) */
@media (max-width:1024px){
.mobile-appbar{
position:static!important;
top:auto!important;
}
}
/* ================================================================
v3.9.5 — MOBİL "TERCÜME SÜRECİ" (.translation-quote) DÜZELTME
Mobilde kadın fotoğrafının başı kesiliyordu (ortadan kırpma),
yanlarda açık bantlar vardı ve koyu adımlar kutusuyla geçiş
bozuktu. Fotoğraf tam genişlik + üstten hizalı (baş görünür),
koyu kutu fotoğrafın üzerine yuvarlak köşeli temiz bir kart
gibi biniyor.
================================================================ */
@media (max-width:1024px){
.translation-quote{display:flex!important;flex-direction:column!important;background:#fff!important}
.translation-quote-photo-left{
position:relative!important;
width:100%!important;
min-height:0!important;
height:auto!important;
aspect-ratio:3/4!important;
max-height:420px!important;
overflow:hidden!important;
}
.translation-quote-photo-left img{
width:100%!important;height:100%!important;
object-fit:cover!important;
object-position:center top!important; /* baş görünsün, tepeden kırpma */
}
.translation-quote-photo-right{display:none!important}
.translation-quote-steps{
position:relative!important;z-index:3!important;
margin:-30px 12px 0!important;
padding:26px 20px 22px!important;
background:#111a47!important;
border-radius:20px!important;
box-shadow:0 -10px 30px rgba(16,26,67,.22)!important;
}
.translation-quote-kicker{display:block!important;margin-bottom:16px!important}
.translation-quote-steps ol:before{left:23px!important}
.translation-quote-steps li{grid-template-columns:44px 1fr!important;gap:16px!important;padding:12px 0!important}
.translation-quote-steps li b{width:44px!important;height:44px!important}
.translation-quote-form-wrap{padding:34px 18px 44px!important}
}
/* ================================================================
v3.10.0 — MOBİLDE KÖŞE YARIÇAPI UYUMSUZLUĞU GİDERİLDİ
Üç ayrı yarıçap üst üste biniyordu: üst bar 18px, hero 30px
(üstelik -26px negatif taşmayla), hizmetler bölümü 26px. Bu
yüzden kenarlarda "çift kıvrım / üste binmiş" çıkıntılar
oluşuyordu. Artık bölümler kenardan kenara, hizalı ve düz.
================================================================ */
@media (max-width:1024px){
.mobile-appbar{border-radius:0!important}
.hero,
.pro-hero-slider{
border-radius:0!important;
margin-bottom:0!important;
}
body>.section:first-of-type,
body>.services-honeycomb:first-of-type,
.header+.hero+.section,
.pro-hero-slider+.section,
.pro-hero-slider+.services-honeycomb,
.services-honeycomb{
border-radius:0!important;
box-shadow:none!important;
}
.page-head{border-radius:0!important}
.stats{border-radius:0!important}
}
/* ================================================================
v3.10.1 — ÜST BAR AŞAĞI KAYDIRIRKEN EKRANDA KALSIN
v3.7.x'te yanlış anlaşılma sonucu üst bar "position:static"
yapılmıştı, yani kaydırınca gözden kayboluyordu. Kullanıcının
istediği bunun tersi: hamburger + logo + dil + telefon barı
sayfayla birlikte gelsin, hep elinin altında olsun.
================================================================ */
@media (max-width:1024px){
.mobile-appbar{
position:sticky!important;
top:0!important;
z-index:3000!important;
}
}
/* v3.10.3 — mobilde de petek gorselleri acildi (cok koyuydu) */
@media (max-width:1024px){
.services-honeycomb-inner img{filter:grayscale(.15) brightness(1) contrast(1.03)!important}
.services-honeycomb-cell:active .services-honeycomb-inner img{filter:grayscale(0) brightness(1.06) contrast(1.02)!important}
.services-honeycomb-shade{
background:radial-gradient(circle at 50% 52%,rgba(8,28,58,.60) 0%,rgba(8,28,58,.22) 46%,rgba(8,28,58,.44) 100%)!important;
}
}