html {
scroll-behavior: smooth;
}
:root{
--navy:#102331;
--navy-2:#173548;
--ink:#1b2931;
--muted:#6e777b;
--cream:#f7f5ef;
--cream-2:#eee9dc;
--paper:#fffdfa;
--white:#fff;
--line:#e4e0d5;
--gold:#E7B633;
--gold-soft:#f3e9c6;
--gold-dark:#9c791d;
--max:1180px;
--radius:16px;
--shadow:
0 18px 45px rgba(16,35,49,.08);
}
/* =========================================================
RESET
========================================================= */
*{
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
"Segoe UI",
sans-serif;
line-height:1.5;
}
a{
text-decoration:none;
color:inherit;
}
img{
max-width:100%;
display:block;
}
button,
input,
textarea{
font:inherit;
}
.container{
width:
min(
var(--max),
calc(100% - 42px)
);
margin:auto;
}
/* =========================================================
HEADER
========================================================= */
.site-header{
height:108px;
background:
rgba(16,35,49,.98);
position:sticky;
top:0;
z-index:100;
border-bottom:
1px solid rgba(255,255,255,.08);
box-shadow:
0 8px 30px rgba(0,0,0,.10);
}
.nav-wrap{
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}
.brand{
display:flex;
align-items:center;
min-width:205px;
}
.brand img{
width:262px;
height:auto;
display:block;
filter:
drop-shadow(
0 2px 5px rgba(0,0,0,.25)
);
transition:
transform .25s ease;
}
.brand img:hover{
transform:scale(1.025);
}
.nav{
display:flex;
align-items:center;
gap:27px;
color:#fff;
font-size:14px;
font-weight:650;
}
.nav a{
position:relative;
opacity:.82;
padding:5px 0;
transition:
opacity .2s ease,
color .2s ease;
}
.nav a:hover,
.nav a.active{
opacity:1;
}
/* Menü altın çizgisi */
.nav a:not(.nav-cta)::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-2px;
height:1px;
background:var(--gold);
transform:scaleX(0);
transform-origin:center;
transition:
transform .25s ease;
}
.nav a:not(.nav-cta):hover::after,
.nav a:not(.nav-cta).active::after{
transform:scaleX(1);
}
.nav .nav-cta{
background:var(--gold);
color:#182832;
padding:11px 18px;
border-radius:999px;
font-size:11px;
font-weight:850;
opacity:1;
transition:
transform .2s ease,
box-shadow .2s ease;
}
.nav .nav-cta:hover{
transform:translateY(-2px);
box-shadow:
0 7px 18px rgba(231,182,51,.20);
}
.menu-toggle{
display:none;
background:none;
border:0;
color:#fff;
font-size:27px;
cursor:pointer;
}
/* =========================================================
KAYAN DUYURU ŞERİDİ
========================================================= */
.announcement-ticker{
position:relative;
overflow:hidden;
background:var(--gold-dark);
color:#1a1408;
white-space:nowrap;
}
.announcement-track{
display:flex;
width:max-content;
animation:
announcement-scroll 60s linear infinite;
}
.announcement-group{
display:flex;
flex-shrink:0;
}
.announcement-item{
display:inline-flex;
align-items:center;
flex-shrink:0;
white-space:nowrap;
font-size:12.5px;
font-weight:600;
letter-spacing:.01em;
padding:9px 26px;
}
.announcement-item strong{
font-weight:800;
margin-right:6px;
}
.announcement-ticker:hover .announcement-track{
animation-play-state:paused;
}
@keyframes announcement-scroll{
from{
transform:translateX(0);
}
to{
transform:translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce){
.announcement-track{
animation:none;
}
}
@media (max-width:680px){
.announcement-item{
font-size:11px;
padding:9px 18px;
}
}
/* =========================================================
HERO
========================================================= */
.hero{
position:relative;
overflow:hidden;
color:#fff;
min-height:500px;
background:var(--navy);
}
.hero-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(
90deg,
rgba(8,23,34,.97) 0%,
rgba(10,27,39,.91) 34%,
rgba(10,27,39,.58) 64%,
rgba(10,27,39,.34) 100%
),
url('assets/hero/hero-device-clean.jpg');
background-size:cover;
background-position:right center;
transform:scale(1.02);
}
.hero-bg:after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at 82% 50%,
rgba(231,182,51,.08),
transparent 28%
),
linear-gradient(
180deg,
rgba(255,255,255,.03),
transparent 55%
);
}
/* =========================================================
HERO SLIDER — çerçeveli görsel kutusu (Seçenek A)
========================================================= */
.hero-visual{
position:relative;
width:62%;
max-width:760px;
height:440px;
flex-shrink:0;
border-radius:18px;
overflow:hidden;
background:var(--navy-2);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 25px 55px rgba(0,0,0,.35);
}
.hero-slider{
position:absolute;
inset:0;
z-index:0;
}
.hero-slide{
position:absolute;
inset:0;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
opacity:0;
transition:opacity 0.7s ease;
}
.hero-slide.active{
opacity:1;
z-index:1;
}
.hero-slide-1{
background-image:url('assets/services/tomo1.jpeg');
}
.hero-slide-2{
background-image:url('assets/services/pano.jpg');
}
.hero-slide-3{
background-image:url('assets/services/sef1.jpg');
}
.hero-slide-4{
background-image:url('assets/services/tomo2.jpeg');
}
.hero-dots{
position:absolute;
left:50%;
bottom:14px;
transform:translateX(-50%);
z-index:3;
display:flex;
align-items:center;
gap:9px;
}
.hero-dot{
width:8px;
height:8px;
border-radius:50%;
background:rgba(255,255,255,.4);
cursor:pointer;
transition:.25s ease;
}
.hero-dot:hover{
background:rgba(255,255,255,.7);
}
.hero-dot.active{
width:24px;
border-radius:5px;
background:var(--gold);
}
.hero-inner{
position:relative;
z-index:2;
min-height:500px;
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:44px 0;
}
.hero-copy{
width:34%;
max-width:400px;
}
.hero-btn-group{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:12px;
margin-top:6px;
}
.hero-whatsapp-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:#25D366;
color:#fff !important;
padding:13px 22px;
border-radius:999px;
text-decoration:none;
font-size:16px;
font-weight:650;
box-shadow:0 8px 20px rgba(37,211,102,.28);
transition:
transform .2s ease,
background-color .2s ease;
}
.hero-whatsapp-btn:hover{
background-color:#20bd5a;
transform:translateY(-2px);
}
.hero-whatsapp-btn .wp-icon{
width:20px;
height:20px;
fill:#fff;
flex-shrink:0;
}
.hero-randevu-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:var(--gold);
color:#182832 !important;
padding:13px 22px;
border-radius:999px;
text-decoration:none;
font-size:16px;
font-weight:650;
box-shadow:0 8px 20px rgba(231,182,51,.28);
transition:
transform .2s ease,
background-color .2s ease;
}
.hero-randevu-btn:hover{
background-color:var(--gold-dark);
color:#fff !important;
transform:translateY(-2px);
}
.hero-randevu-btn .randevu-icon{
width:18px;
height:18px;
fill:#182832;
flex-shrink:0;
transition:fill .2s ease;
}
.hero-randevu-btn:hover .randevu-icon{
fill:#fff;
}
.eyebrow{
font-size:11px;
letter-spacing:.15em;
text-transform:uppercase;
color:var(--gold);
font-weight:850;
}
.hero h1{
font-size:
clamp(
42px,
5vw,
65px
);
line-height:1.01;
letter-spacing:-.052em;
margin:12px 0 18px;
max-width:650px;
}
.hero h1 span{
display:block;
font-weight:400;
}
.hero p{
font-size:16px;
line-height:1.7;
color:rgba(255,255,255,.77);
max-width:510px;
margin:0 0 25px;
}
.actions{
display:flex;
gap:11px;
flex-wrap:wrap;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:999px;
padding:11px 18px;
font-size:11px;
font-weight:850;
border:1px solid transparent;
transition:
transform .22s ease,
box-shadow .22s ease,
background-color .22s ease;
}
.btn:hover{
transform:translateY(-2px);
}
.btn-gold{
background:var(--gold);
color:#182832;
}
.btn-outline{
border-color:
rgba(255,255,255,.72);
color:#fff;
background:
rgba(16,35,49,.12);
}
.hero-note{
position:absolute;
right:28px;
bottom:25px;
background:
rgba(16,35,49,.7);
border:
1px solid rgba(255,255,255,.13);
border-radius:11px;
padding:9px 12px;
font-size:10px;
color:#edf2f3;
backdrop-filter:blur(8px);
}
/* =========================================================
İSTATİSTİKLER
========================================================= */
.stats{
background:var(--navy);
color:#fff;
}
.stats-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
}
.stat{
min-height:72px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border-right:
1px solid rgba(255,255,255,.1);
}
.stat:last-child{
border-right:0;
}
.stat-icon{
width:34px;
height:34px;
border:
1px solid rgba(231,182,51,.45);
border-radius:10px;
color:var(--gold);
display:grid;
place-items:center;
font-size:17px;
}
.stat strong{
font-size:14px;
display:block;
}
.stat span{
font-size:11px;
color:rgba(255,255,255,.62);
display:block;
}
/* =========================================================
GENEL BÖLÜMLER
========================================================= */
.section{
padding:72px 0;
}
.section-head{
text-align:center;
max-width:720px;
margin:
0 auto 32px;
}
.section-head h2{
font-size:35px;
line-height:1.1;
letter-spacing:-.04em;
margin:8px 0;
}
.section-head p{
margin:0;
color:var(--muted);
font-size:14px;
}
.section-head .eyebrow{
color:var(--gold-dark);
}
/* =========================================================
GÖRÜNTÜLEME HİZMETLERİ
========================================================= */
.services{
background:
linear-gradient(
180deg,
#fffdfa 0%,
#f7f5ef 100%
);
}
.services .section-head{
max-width:760px;
margin-bottom:38px;
}
.services .section-head h2{
font-size:41px;
letter-spacing:-.045em;
margin:9px 0 12px;
}
.services .section-head p{
max-width:620px;
margin:auto;
line-height:1.7;
}
/* Hizmet grid */
.service-grid{
display:grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap:16px;
}
/* Hizmet kartı */
.service-card{
position:relative;
overflow:hidden;
background:var(--navy);
border:
1px solid rgba(16,35,49,.08);
border-radius:16px;
min-height:230px;
padding:0;
box-shadow:
0 8px 25px rgba(16,35,49,.07);
transition:
transform .32s cubic-bezier(.2,.7,.2,1),
box-shadow .32s ease;
}
.service-card:hover{
transform:translateY(-7px);
box-shadow:
0 18px 38px rgba(16,35,49,.15);
}
/* Görsel */
.service-img-wrap{
position:relative;
width:100%;
height:230px;
overflow:hidden;
background:#e9e5da;
}
.service-img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
transition:
transform .55s cubic-bezier(.2,.7,.2,1);
}
.service-card:hover .service-img{
transform:scale(1.055);
}
/* Görsel karartması */
.service-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to bottom,
rgba(16,35,49,0) 25%,
rgba(16,35,49,.08) 42%,
rgba(16,35,49,.88) 100%
);
transition:
background .3s ease;
}
.service-card:hover .service-overlay{
background:
linear-gradient(
to bottom,
rgba(16,35,49,.03) 10%,
rgba(16,35,49,.22) 42%,
rgba(16,35,49,.94) 100%
);
}
/* Hizmet yazıları */
.service-content{
position:absolute;
left:17px;
right:17px;
bottom:15px;
z-index:2;
}
.service-number{
display:block;
font-size:10px;
font-weight:800;
letter-spacing:.15em;
color:var(--gold);
margin-bottom:5px;
}
.service-card h3{
margin:0;
padding:0;
color:#fff;
font-size:17px;
line-height:1.25;
font-weight:700;
letter-spacing:-.015em;
}
.service-card p{
display:block;
max-width:260px;
margin:8px 0 0;
color:
rgba(255,255,255,.76);
font-size:11px;
line-height:1.55;
opacity:0;
transform:translateY(8px);
max-height:0;
overflow:hidden;
transition:
opacity .3s ease,
transform .3s ease,
max-height .3s ease;
}
.service-card:hover p{
opacity:1;
transform:translateY(0);
max-height:70px;
}
.service-detail{
display:flex;
align-items:center;
gap:6px;
margin-top:9px;
color:#fff;
font-size:10px;
font-weight:800;
opacity:.82;
transition:
color .2s ease,
gap .2s ease;
}
.service-detail strong{
font-size:15px;
font-weight:500;
}
.service-card:hover .service-detail{
color:var(--gold);
gap:9px;
}
/* Hizmetler butonu */
.all-btn{
display:flex;
justify-content:center;
margin-top:25px;
}
.all-btn a{
display:inline-flex;
align-items:center;
gap:8px;
background:var(--navy);
color:#fff;
padding:11px 21px;
border-radius:999px;
font-size:11px;
font-weight:800;
transition:
transform .2s ease,
background .2s ease;
}
.all-btn a:hover{
background:var(--navy-2);
transform:translateY(-2px);
}
/* =========================================================
GÖRÜNTÜLEME ALANLARI
========================================================= */
.features{
background:var(--cream);
padding:
18px 0 72px;
}
.feature-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:12px;
}
.feature{
text-align:center;
padding:8px 14px;
}
.feature-icon{
width:40px;
height:40px;
margin:
0 auto 8px;
border:
1px solid #e7ddbb;
border-radius:12px;
background:#fbf7e8;
display:grid;
place-items:center;
color:var(--gold-dark);
font-size:20px;
}
.feature h3{
font-size:14px;
margin:0 0 5px;
}
.feature p{
font-size:11px;
color:var(--muted);
margin:0;
}
/* =========================================================
HAKKIMIZDA
========================================================= */
.about{
background:var(--paper);
}
.about-grid{
display:grid;
grid-template-columns:
1fr 1.15fr;
gap:58px;
align-items:center;
}
.about-visual{
height:330px;
border-radius:20px;
position:relative;
overflow:hidden;
background:
#dfe4e4
url('assets/hero/hero-device-clean.jpg')
right center/
cover
no-repeat;
border:
1px solid var(--line);
box-shadow:var(--shadow);
}
.about-visual:after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(247,245,239,.88),
rgba(247,245,239,.28) 60%,
rgba(16,35,49,.18)
);
}
.about-stat{
position:absolute;
z-index:2;
left:25px;
top:25px;
}
.about-stat strong{
font-size:78px;
line-height:.9;
color:var(--gold);
letter-spacing:-.08em;
}
.about-stat span{
display:block;
font-size:11px;
text-transform:uppercase;
letter-spacing:.12em;
color:#667076;
}
.about-copy h2{
font-size:41px;
line-height:1.06;
letter-spacing:-.045em;
margin:9px 0 15px;
}
.about-copy h2 em{
font-style:normal;
color:var(--gold-dark);
}
.about-copy p{
font-size:14px;
color:var(--muted);
max-width:650px;
}
.value-grid{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:14px;
margin-top:23px;
}
.value{
border-top:
1px solid var(--line);
padding-top:10px;
}
.value b{
font-size:10px;
color:var(--gold-dark);
}
.value h3{
font-size:14px;
margin:4px 0;
}
.value p{
font-size:11px;
margin:0;
}
/* =========================================================
EKİP
========================================================= */
.team{
background:var(--cream);
}
.team-grid{
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:12px;
}
.team-card{
background:#fff;
border:
1px solid var(--line);
border-radius:14px;
padding:10px;
transition:
transform .3s cubic-bezier(.2,.7,.2,1),
box-shadow .3s ease;
}
.team-card:hover{
transform:translateY(-5px);
box-shadow:
0 15px 30px rgba(16,35,49,.10);
}
.team-photo{
aspect-ratio:1/1.04;
border-radius:10px;
background:
linear-gradient(
145deg,
#ece7db,
#f8f5ed
);
display:grid;
place-items:center;
font-size:28px;
font-weight:850;
color:#aa8a2d;
border:
1px solid #e5dfd0;
overflow:hidden;
}
.team-photo img{
width:100%;
height:100%;
object-fit:cover;
}
.team-card h3{
font-size:14px;
margin:10px 3px 2px;
}
.team-card p{
font-size:10px;
color:var(--muted);
margin:0 3px 5px;
min-height:26px;
}
/* =========================================================
SSS
========================================================= */
.faq{
background:var(--paper);
}
.faq-wrap{
max-width:760px;
margin:auto;
}
.faq-wrap details{
border-top:
1px solid var(--line);
}
.faq-wrap details:last-child{
border-bottom:
1px solid var(--line);
}
.faq-wrap summary{
list-style:none;
display:flex;
justify-content:space-between;
gap:20px;
cursor:pointer;
padding:14px 4px;
font-size:14px;
font-weight:750;
}
.faq-wrap summary::-webkit-details-marker{
display:none;
}
.faq-wrap summary span{
color:var(--gold-dark);
font-size:20px;
}
.faq-wrap p{
font-size:12px;
color:var(--muted);
padding:
0 4px 14px;
margin:0;
}
/* =========================================================
YENİ İLETİŞİM BÖLÜMÜ
========================================================= */
.contact{
background:
linear-gradient(
180deg,
#f7f5ef 0%,
#eee9dc 100%
);
}
.contact .container{
width:
min(
1480px,
calc(100% - 42px)
);
}
.contact .section-head{
max-width:720px;
margin-bottom:42px;
}
.contact .section-head h2{
font-size:43px;
letter-spacing:-.05em;
margin:9px 0 12px;
}
.contact .section-head p{
max-width:590px;
margin:auto;
line-height:1.7;
}
/* Ana iletişim grid */
.contact-main-grid{
display:grid;
grid-template-columns:
.82fr 1.18fr;
gap:18px;
align-items:stretch;
}
/* =========================================================
SOL İLETİŞİM PANELİ
========================================================= */
.contact-info-panel{
position:relative;
overflow:hidden;
background:var(--navy);
color:#fff;
border-radius:20px;
padding:30px;
box-shadow:
0 15px 35px rgba(16,35,49,.12);
}
.contact-info-panel::after{
content:"";
position:absolute;
width:230px;
height:230px;
right:-90px;
bottom:-100px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(231,182,51,.18),
transparent 70%
);
pointer-events:none;
}
.contact-panel-label{
position:relative;
z-index:2;
font-size:10px;
font-weight:850;
letter-spacing:.16em;
color:var(--gold);
text-transform:uppercase;
margin-bottom:12px;
}
.contact-info-panel h3,
.contact-branches-panel h3{
position:relative;
z-index:2;
margin:0;
font-size:28px;
line-height:1.15;
letter-spacing:-.035em;
}
.contact-panel-text{
position:relative;
z-index:2;
color:
rgba(255,255,255,.68);
font-size:12px;
line-height:1.65;
max-width:390px;
margin:14px 0 24px;
}
/* =========================================================
TELEFON / E-POSTA
========================================================= */
.contact-info-item{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:13px;
padding:14px 0;
border-top:
1px solid rgba(255,255,255,.11);
color:#fff;
transition:
transform .25s ease,
padding-left .25s ease;
}
.contact-info-item:hover{
transform:translateX(4px);
padding-left:4px;
}
.contact-info-icon{
width:39px;
height:39px;
flex-shrink:0;
display:grid;
place-items:center;
border:
1px solid rgba(231,182,51,.35);
border-radius:11px;
color:var(--gold);
font-size:19px;
}
.contact-info-text{
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}
.contact-info-label{
color:
rgba(255,255,255,.52);
font-size:9px;
text-transform:uppercase;
letter-spacing:.11em;
}
.contact-info-text strong{
font-size:14px;
font-weight:650;
word-break:break-word;
}
.contact-info-arrow{
margin-left:auto;
color:
rgba(255,255,255,.45);
font-size:19px;
transition:
color .2s ease,
transform .2s ease;
}
.contact-info-item:hover .contact-info-arrow{
color:var(--gold);
transform:translateX(3px);
}
/* =========================================================
WHATSAPP
========================================================= */
.contact-whatsapp-small{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:12px;
margin-top:18px;
padding:13px 15px;
background:
rgba(37,211,102,.10);
border:
1px solid rgba(37,211,102,.28);
border-radius:12px;
color:#fff;
transition:
transform .25s ease,
background .25s ease;
}
.contact-whatsapp-small:hover{
transform:translateY(-3px);
background:
rgba(37,211,102,.16);
}
.contact-whatsapp-icon{
width:32px;
height:32px;
flex-shrink:0;
display:grid;
place-items:center;
color:#25D366;
}
.contact-whatsapp-icon svg{
width:25px;
height:25px;
}
.contact-whatsapp-small > span:nth-child(2){
display:flex;
flex-direction:column;
min-width:0;
}
.contact-whatsapp-label{
color:#25D366;
font-size:9px;
font-weight:850;
letter-spacing:.09em;
text-transform:uppercase;
}
.contact-whatsapp-small strong{
font-size:11px;
font-weight:600;
color:
rgba(255,255,255,.82);
}
.contact-whatsapp-arrow{
margin-left:auto;
color:#25D366;
font-size:18px;
}
/* =========================================================
SAĞ ŞUBELER PANELİ
========================================================= */
.contact-branches-panel{
background:#fff;
border:
1px solid var(--line);
border-radius:20px;
padding:30px;
box-shadow:
0 10px 30px rgba(16,35,49,.05);
}
.contact-branches-panel .contact-panel-label{
color:var(--gold-dark);
}
.contact-branches-panel h3{
color:var(--navy);
}
/* =========================================================
ŞUBE KARTLARI
========================================================= */
.branch-mini-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:11px;
margin-top:22px;
}
.branch-modern-card{
position:relative;
overflow:hidden;
padding:16px;
background:#faf8f2;
border:
1px solid var(--line);
border-radius:14px;
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
.branch-modern-card:hover{
transform:translateY(-4px);
border-color:#d8c88e;
box-shadow:
0 12px 25px rgba(16,35,49,.08);
}
.branch-card-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:13px;
}
.branch-number{
font-size:10px;
font-weight:850;
letter-spacing:.12em;
color:var(--gold-dark);
}
.branch-pin{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:9px;
background:#f1e7c7;
color:var(--gold-dark);
font-size:17px;
}
.branch-card-label{
display:block;
font-size:8px;
letter-spacing:.14em;
font-weight:850;
color:#8a8f91;
margin-bottom:4px;
}
.branch-modern-card h4{
margin:0 0 7px;
color:var(--navy);
font-size:16px;
line-height:1.2;
}
.branch-modern-card p{
margin:0;
min-height:47px;
color:var(--muted);
font-size:10px;
line-height:1.5;
}
.branch-modern-link{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:13px;
padding-top:10px;
border-top:
1px solid var(--line);
color:var(--navy);
font-size:10px;
font-weight:800;
}
.branch-modern-link span{
color:var(--gold-dark);
font-size:16px;
transition:
transform .2s ease;
}
.branch-modern-link:hover span{
transform:translateX(4px);
}
/* =========================================================
HARİTA
========================================================= */
.contact-map{
position:relative;
height:210px;
margin-top:14px;
overflow:hidden;
border-radius:14px;
border:
1px solid var(--line);
background:#e8e4d9;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.contact-map-pane{
position:relative;
height:100%;
overflow:hidden;
}
.contact-map-pane + .contact-map-pane{
border-left:
1px solid var(--line);
}
.contact-map-pane iframe{
width:100%;
height:100%;
border:0;
display:block;
}
.contact-map iframe{
width:100%;
height:100%;
border:0;
display:block;
}
.map-overlay-badge{
position:absolute;
left:13px;
bottom:13px;
display:flex;
align-items:center;
gap:9px;
padding:9px 12px;
background:
rgba(255,255,255,.94);
border:
1px solid rgba(255,255,255,.7);
border-radius:10px;
box-shadow:
0 5px 15px rgba(16,35,49,.14);
backdrop-filter:blur(8px);
color:var(--navy);
font-size:10px;
font-weight:800;
}
.map-overlay-badge small{
display:block;
color:var(--muted);
font-size:8px;
font-weight:500;
margin-top:1px;
}
.map-badge-icon{
width:25px;
height:25px;
display:grid;
place-items:center;
border-radius:8px;
background:#f3e9c6;
color:var(--gold-dark);
font-size:16px;
}
/* =========================================================
ESKİ İLETİŞİM SINIFLARI
=========================================================
Başka sayfalarda kullanılıyorsa bozulmaması için
uyumluluk amacıyla bırakıldı.
========================================================= */
.channel{
display:flex;
gap:14px;
align-items:center;
padding:22px 20px;
border:
1px solid var(--line);
background:#fff;
border-radius:12px;
text-decoration:none;
transition:
transform .2s ease,
box-shadow .2s ease;
}
a.channel:hover{
transform:translateY(-2px);
box-shadow:
0 8px 20px rgba(16,35,49,.06);
}
.channel .ic{
width:24px;
height:24px;
font-size:25px;
color:var(--gold-dark);
display:flex;
align-items:center;
justify-content:center;
}
.channel .l{
display:block;
font-size:11px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:.08em;
}
.channel .v{
font-size:16px;
font-weight:650;
}
.contact-grid-custom{
display:flex;
flex-direction:column;
gap:12px;
max-width:900px;
margin:0 auto;
}
.contact-row{
display:grid;
grid-template-columns:
1fr 1fr;
gap:12px;
}
.contact-row-center{
display:flex;
justify-content:center;
margin-top:4px;
}
.sub-tel{
display:block;
font-size:14px;
color:var(--gold-dark);
font-weight:700;
margin-top:6px;
}
.channel-branch{
align-items:flex-start;
}
.branch-map-link{
display:inline-block;
margin-top:12px;
font-size:12px;
font-weight:700;
padding:9px 18px;
border-radius:999px;
background:var(--gold);
color:#182832;
text-decoration:none;
transition:
transform .2s ease,
opacity .2s ease;
}
.branch-map-link:hover{
opacity:.88;
transform:translateY(-2px);
}
/* Eski WhatsApp */
.whatsapp-btn{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
width:100%;
background:#25D366;
color:#fff !important;
padding:22px 24px;
border-radius:14px;
text-decoration:none;
transition:
transform .2s ease,
background-color .2s ease;
box-shadow:
0 4px 12px rgba(37,211,102,.2);
}
.whatsapp-btn:hover{
background-color:#20bd5a;
transform:translateY(-2px);
}
.wp-icon{
width:34px;
height:34px;
fill:#fff;
flex-shrink:0;
}
.wp-text{
display:flex;
flex-direction:column;
}
.wp-text .l{
font-size:11px;
letter-spacing:.08em;
opacity:.9;
text-transform:uppercase;
}
.wp-text .v{
font-size:18px;
font-weight:750;
}
/* =========================================================
ESKİ ŞUBE / HARİTA UYUMLULUĞU
========================================================= */
.branches{
background:var(--paper);
}
.branch-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:11px;
}
.branch-card{
background:#fff;
border:
1px solid var(--line);
border-radius:13px;
padding:18px;
}
.branch-label{
font-size:9px;
letter-spacing:.14em;
color:var(--gold-dark);
font-weight:800;
}
.branch-card h3{
font-size:17px;
margin:8px 0;
}
.branch-card p{
font-size:11px;
color:var(--muted);
}
.branch-actions{
display:flex;
gap:6px;
flex-wrap:wrap;
margin:11px 0;
}
.branch-actions a{
font-size:10px;
padding:7px 9px;
border:
1px solid var(--line);
border-radius:999px;
}
.map-box{
grid-column:1/-1;
min-height:350px;
border-radius:13px;
position:relative;
overflow:hidden;
border:
1px solid var(--line);
box-shadow:
0 4px 15px rgba(16,35,49,.04);
background:#e8e4d9;
}
.map-box iframe{
width:100%;
height:100%;
min-height:350px;
display:block;
border:0;
}
/* =========================================================
KVKK
========================================================= */
.kvkk{
background:transparent;
padding:0;
}
.kvkk-grid{
display:grid;
grid-template-columns:
1fr 1fr;
gap:11px;
width:100%;
margin-top:11px;
}
.kvkk-inner{
background:#fff8e1;
border:
1px solid #eadba9;
border-radius:13px;
padding:14px 20px;
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:72px;
}
.kvkk-text{
flex:1;
}
.kvkk-inner h2{
font-size:17px;
font-weight:800;
margin:0 0 2px;
line-height:1.2;
letter-spacing:-.02em;
color:#102331;
}
.kvkk-inner p{
margin:0;
color:#756b49;
font-size:11.5px;
line-height:1.35;
}
.kvkk-inner .btn{
white-space:nowrap;
flex-shrink:0;
padding:8px 14px;
font-size:11px;
}
/* =========================================================
FOOTER
========================================================= */
.footer{
background:var(--navy);
color:#fff;
padding:46px 0 18px;
}
.footer-grid{
display:grid;
grid-template-columns:
1.45fr 1fr 1fr 1.15fr;
gap:30px;
padding-bottom:35px;
}
.footer-logo{
width:180px;
height:auto;
margin-bottom:10px;
}
.footer h4{
font-size:10px;
text-transform:uppercase;
letter-spacing:.13em;
margin:7px 0 15px;
color:#fff;
}
.footer a,
.footer p,
.footer span{
display:block;
color:#aebbc1;
font-size:11px;
margin-bottom:8px;
}
.footer a{
transition:
color .2s ease,
transform .2s ease;
}
.footer a:hover{
color:#fff;
}
.footer-bottom{
border-top:
1px solid rgba(255,255,255,.08);
padding-top:16px;
display:flex;
justify-content:space-between;
gap:15px;
color:#71848d;
font-size:10px;
}
.footer-bottom a{
color:var(--gold);
display:inline;
}
/* =========================================================
UYUMLULUK VE SAYFA EKLERİ
========================================================= */
.compliance-note{
background:#f4f0e5;
border-top:
1px solid var(--line);
border-bottom:
1px solid var(--line);
padding:12px 0;
}
.compliance-note .inner{
display:flex;
justify-content:space-between;
gap:20px;
align-items:center;
}
.compliance-note p{
margin:0;
color:#667076;
font-size:11px;
}
.site-meta{
font-size:10px;
color:#8a8f91;
margin-top:12px;
}
.team-page-intro{
max-width:720px;
margin:
0 auto 32px;
text-align:center;
}
.team-page-intro p{
font-size:14px;
color:var(--muted);
}
.page-hero{
background:var(--navy);
color:#fff;
padding:62px 0 56px;
}
.page-hero h1{
font-size:
clamp(
36px,
5vw,
56px
);
line-height:1.05;
letter-spacing:-.045em;
margin:10px 0;
}
.page-hero p{
max-width:650px;
color:
rgba(255,255,255,.75);
font-size:15px;
margin:0;
}
.team-grid.team-page-grid{
grid-template-columns:
repeat(4,1fr);
}
/* =========================================================
ONLINE RANDEVU SAYFASI (TASARIM — entegrasyon bekliyor)
========================================================= */
.randevu-section{
background:
linear-gradient(
180deg,
#fffdfa 0%,
#f7f5ef 100%
);
padding:56px 0 90px;
}
.randevu-card{
max-width:820px;
margin:0 auto;
background:#faf8f2;
border:
1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:38px;
}
.randevu-grid{
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:20px;
margin-bottom:22px;
}
.randevu-field{
display:flex;
flex-direction:column;
gap:7px;
}
.randevu-field-wide{
grid-column:
1 / -1;
}
.randevu-field span{
font-size:12.5px;
font-weight:750;
color:var(--ink);
}
.randevu-field span em{
font-style:normal;
font-weight:500;
color:var(--muted);
}
.randevu-field input,
.randevu-field select,
.randevu-field textarea{
border:
1px solid var(--line);
border-radius:10px;
padding:12px 14px;
font-size:14px;
color:var(--ink);
background:#fff;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.randevu-field input:focus,
.randevu-field select:focus,
.randevu-field textarea:focus{
outline:none;
border-color:var(--gold);
box-shadow:
0 0 0 3px rgba(231,182,51,.18);
}
.randevu-field textarea{
resize:vertical;
}
.randevu-checkbox{
display:flex;
align-items:flex-start;
gap:10px;
font-size:12.5px;
color:var(--muted);
line-height:1.6;
margin-bottom:26px;
}
.randevu-checkbox input{
margin-top:3px;
flex-shrink:0;
accent-color:var(--gold-dark);
}
.randevu-actions{
display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;
}
.randevu-actions .btn{
padding:13px 28px;
font-size:12px;
}
.randevu-msg{
font-size:12.5px;
color:var(--muted);
margin:0;
}
@media (max-width:680px){
.randevu-card{
padding:24px;
}
.randevu-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
EKİP CTA
========================================================= */
.team-cta-container{
text-align:center;
background-color:#f8f9fa;
padding:30px 20px;
border-radius:12px;
margin-top:40px;
box-shadow:
0 4px 12px rgba(0,0,0,.05);
}
.btn-call{
display:inline-block;
background-color:var(--navy);
color:#fff;
padding:14px 28px;
font-size:20px;
font-weight:bold;
text-decoration:none;
border-radius:30px;
margin-top:15px;
transition:
all .3s ease;
}
.btn-call:hover{
background-color:var(--navy-2);
transform:translateY(-2px);
}
/* =========================================================
POPUP
========================================================= */
.popup-overlay{
position:fixed;
inset:0;
width:100%;
height:100%;
background:
rgba(5,15,22,.72);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
opacity:0;
visibility:hidden;
transition:
opacity .3s ease,
visibility .3s ease;
padding:20px;
}
.popup-overlay.active{
opacity:1;
visibility:visible;
}
/* Popup */
.popup-content{
position:relative;
width:90%;
max-width:720px;
max-height:85vh;
background:#fff;
border-radius:16px;
box-shadow:
0 25px 70px rgba(0,0,0,.30);
overflow:hidden;
display:flex;
flex-direction:column;
transform:
translateY(15px)
scale(.98);
transition:
transform .35s cubic-bezier(.2,.7,.2,1);
}
.popup-overlay.active .popup-content{
transform:
translateY(0)
scale(1);
}
/* Kapatma */
.popup-close-btn{
position:absolute;
top:14px;
right:14px;
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
border:none;
border-radius:50%;
box-shadow:
0 2px 8px rgba(0,0,0,.25);
font-size:23px;
font-weight:bold;
line-height:1;
color:var(--navy);
cursor:pointer;
z-index:10;
transition:
background .2s ease,
color .2s ease,
transform .2s ease;
}
.popup-close-btn:hover{
background:var(--navy);
color:#fff;
transform:rotate(4deg);
}
/* Popup başlık */
.popup-header{
background:var(--navy);
color:#fff;
text-align:center;
padding:20px;
}
.popup-header h2{
margin:0;
font-size:23px;
letter-spacing:1px;
}
/* Popup kaydırılabilir alan */
.popup-body{
padding:25px;
overflow-y:auto;
color:#333;
font-size:17px;
line-height:1.6;
}
.popup-body p{
margin-bottom:15px;
}
.popup-footer-action{
text-align:center;
margin-top:20px;
}
.popup-footer-action p{
margin-bottom:8px;
font-weight:500;
}
.popup-btn{
display:inline-block;
background:var(--navy);
color:#fff;
padding:10px 25px;
border-radius:20px;
text-decoration:none;
font-weight:bold;
transition:
background .3s ease,
transform .2s ease;
}
.popup-btn:hover{
background:var(--navy-2);
transform:translateY(-2px);
}
/* =========================================================
MODERN SAYFA ANİMASYONLARI
========================================================= */
/* Sayfa ilk açılış */
body{
opacity:0;
transition:
opacity .55s ease;
}
body.page-loaded{
opacity:1;
}
/* Scroll animasyonuna girecek elementler */
.section-head,
.stat,
.service-card,
.feature,
.about-visual,
.about-copy,
.team-card,
.faq-wrap,
.channel,
.branch-card,
.map-box{
opacity:0;
transform:translateY(24px);
transition:
opacity .65s ease,
transform .65s
cubic-bezier(.2,.7,.2,1);
}
.section-head.is-visible,
.stat.is-visible,
.service-card.is-visible,
.feature.is-visible,
.about-visual.is-visible,
.about-copy.is-visible,
.team-card.is-visible,
.faq-wrap.is-visible,
.channel.is-visible,
.branch-card.is-visible,
.map-box.is-visible{
opacity:1;
transform:translateY(0);
}
/* =========================================================
ANİMASYON GECİKMELERİ
========================================================= */
.service-card:nth-child(1){
transition-delay:.05s;
}
.service-card:nth-child(2){
transition-delay:.10s;
}
.service-card:nth-child(3){
transition-delay:.15s;
}
.service-card:nth-child(4){
transition-delay:.20s;
}
.service-card:nth-child(5){
transition-delay:.25s;
}
.service-card:nth-child(6){
transition-delay:.30s;
}
.service-card:nth-child(7){
transition-delay:.35s;
}
.service-card:nth-child(8){
transition-delay:.40s;
}
.stat:nth-child(1){
transition-delay:.05s;
}
.stat:nth-child(2){
transition-delay:.10s;
}
.stat:nth-child(3){
transition-delay:.15s;
}
.stat:nth-child(4){
transition-delay:.20s;
}
.feature:nth-child(1){
transition-delay:.05s;
}
.feature:nth-child(2){
transition-delay:.10s;
}
.feature:nth-child(3){
transition-delay:.15s;
}
.feature:nth-child(4){
transition-delay:.20s;
}
.team-card:nth-child(1){
transition-delay:.05s;
}
.team-card:nth-child(2){
transition-delay:.10s;
}
.team-card:nth-child(3){
transition-delay:.15s;
}
.team-card:nth-child(4){
transition-delay:.20s;
}
/* =========================================================
HERO AÇILIŞ ANİMASYONU
========================================================= */
.hero-copy{
opacity:0;
transform:translateY(18px);
transition:
opacity .8s ease .15s,
transform .8s
cubic-bezier(.2,.7,.2,1) .15s;
}
body.page-loaded .hero-copy{
opacity:1;
transform:translateY(0);
}
body.page-loaded .hero-bg{
transform:scale(1.01);
transition:
transform 1.2s
cubic-bezier(.2,.7,.2,1);
}
/* =========================================================
HAKKIMIZDA / BUTON / KART HOVER
========================================================= */
.about-visual{
transition:
opacity .65s ease,
transform .65s
cubic-bezier(.2,.7,.2,1),
box-shadow .35s ease;
}
.about-visual:hover{
box-shadow:
0 22px 45px rgba(16,35,49,.12);
}
.all-btn a,
.branch-map-link,
.popup-btn{
will-change:transform;
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:1020px){
.nav{
gap:17px;
}
.hero-copy{
width:36%;
}
.service-grid{
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.team-grid{
grid-template-columns:
repeat(3,1fr);
}
.about-grid{
grid-template-columns:1fr;
}
.about-visual{
height:320px;
}
.branch-grid{
grid-template-columns:
1fr 1fr;
}
.map-box{
grid-column:1/-1;
min-height:280px;
}
.footer-grid{
grid-template-columns:
1fr 1fr;
}
.footer-grid > div:first-child{
grid-column:1/-1;
}
.kvkk-grid{
grid-template-columns:
1fr 1fr;
}
/* Yeni iletişim */
.contact-main-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
768 PX
========================================================= */
@media(max-width:768px){
.kvkk-grid{
grid-template-columns:1fr;
}
.kvkk-inner{
flex-direction:column;
align-items:flex-start;
}
.kvkk-inner .btn{
width:100%;
text-align:center;
}
.team-grid.team-page-grid{
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
MOBİL
========================================================= */
@media(max-width:680px){
.container{
width:
min(
var(--max),
calc(100% - 30px)
);
}
/* Header */
.site-header{
height:88px;
}
.nav-wrap{
height:88px;
}
.brand{
min-width:auto;
}
.brand img{
width:198px;
}
.menu-toggle{
display:block;
}
.nav{
display:none;
position:absolute;
left:15px;
right:15px;
top:88px;
flex-direction:column;
align-items:stretch;
background:var(--navy);
border:
1px solid rgba(255,255,255,.1);
border-radius:14px;
padding:10px;
box-shadow:var(--shadow);
}
.nav.open{
display:flex;
}
.nav a{
padding:8px 9px;
}
.nav .nav-cta{
text-align:center;
margin-top:4px;
}
/* Hero */
.hero{
min-height:auto;
}
.hero-dots{
bottom:14px;
gap:7px;
}
.hero-dot{
width:6px;
height:6px;
}
.hero-dot.active{
width:18px;
}
.hero-inner{
min-height:auto;
flex-direction:column;
align-items:flex-start;
gap:24px;
padding:
70px 0 32px;
}
.hero-copy{
width:100%;
}
.hero-visual{
width:100%;
max-width:none;
height:260px;
}
.hero h1{
font-size:47px;
max-width:520px;
}
.hero-whatsapp-btn{
font-size:15px;
padding:11px 18px;
}
.hero-whatsapp-btn .wp-icon{
width:18px;
height:18px;
}
.hero-randevu-btn{
font-size:15px;
padding:11px 18px;
}
.hero-randevu-btn .randevu-icon{
width:16px;
height:16px;
}
.hero p{
font-size:15px;
}
.hero-note{
display:none;
}
/* İstatistik */
.stats-grid{
grid-template-columns:
1fr 1fr;
}
.stat{
min-height:68px;
border-bottom:
1px solid rgba(255,255,255,.1);
}
.stat:nth-child(2){
border-right:0;
}
.stat:nth-child(3),
.stat:nth-child(4){
border-bottom:0;
}
.stat strong{
font-size:12px;
}
.stat span{
font-size:10px;
}
/* Bölümler */
.section{
padding:58px 0;
}
.section-head h2{
font-size:32px;
}
/* Hizmetler */
.service-grid{
grid-template-columns:
repeat(2,1fr);
}
.service-img-wrap{
height:230px;
}
.service-content{
left:12px;
right:12px;
bottom:12px;
}
.service-card h3{
font-size:14px;
}
.service-number{
font-size:9px;
}
.service-card p{
display:block;
opacity:1;
transform:none;
max-height:none;
max-width:none;
margin:6px 0 0;
font-size:11px;
line-height:1.5;
color:
rgba(255,255,255,.78);
}
.service-detail{
margin-top:6px;
font-size:9px;
}
/* Görüntüleme alanları */
.feature-grid{
grid-template-columns:
1fr 1fr;
}
/* Hakkımızda */
.about-copy h2{
font-size:35px;
}
.value-grid{
grid-template-columns:1fr;
}
/* Ekip */
.team-grid{
grid-template-columns:
repeat(2,1fr);
}
/* Form */
.form-row{
grid-template-columns:1fr;
}
/* Eski şube sistemi */
.branch-grid{
grid-template-columns:1fr;
}
.map-box{
grid-column:1/-1;
}
/* Footer */
.footer-grid{
grid-template-columns:1fr;
}
.footer-grid > div:first-child{
grid-column:auto;
}
.footer-bottom{
display:block;
}
.footer-bottom span{
margin-top:6px;
}
/* Eski iletişim */
.contact-row{
grid-template-columns:1fr;
}
/* Yeni iletişim */
.contact{
padding:
58px 0;
}
.contact .section-head h2{
font-size:35px;
}
.contact-info-panel,
.contact-branches-panel{
padding:22px;
border-radius:16px;
}
.contact-info-panel h3,
.contact-branches-panel h3{
font-size:25px;
}
.branch-mini-grid{
grid-template-columns:1fr;
}
.branch-modern-card p{
min-height:auto;
}
.contact-map{
height:auto;
grid-template-columns:1fr;
}
.contact-map-pane{
height:220px;
}
.branch-map-combo{
display:flex;
flex-direction:column;
gap:14px;
}
.branch-map-combo > .branch-mini-grid,
.branch-map-combo > .contact-map{
display:contents;
}
.branch-mini-grid > .branch-modern-card:nth-child(1){
order:1;
}
.contact-map > .contact-map-pane:nth-child(1){
order:2;
}
.branch-mini-grid > .branch-modern-card:nth-child(2){
order:3;
}
.contact-map > .contact-map-pane:nth-child(2){
order:4;
}
.contact-map-pane + .contact-map-pane{
border-left:0;
border-top:
1px solid var(--line);
}
/* Popup */
.popup-overlay{
padding:12px;
}
.popup-content{
width:100%;
max-height:90vh;
border-radius:14px;
}
.popup-header{
padding:
18px 48px 18px 18px;
}
.popup-header h2{
font-size:19px;
}
.popup-body{
padding:18px;
font-size:15px;
}
}
/* =========================================================
430 PX VE ALTI
========================================================= */
@media(max-width:430px){
.service-grid{
grid-template-columns:
1fr 1fr;
gap:8px;
}
.service-img-wrap{
height:190px;
}
.service-card{
border-radius:13px;
}
.service-content{
left:10px;
right:10px;
bottom:10px;
}
.service-card h3{
font-size:12px;
}
.service-number{
font-size:8px;
margin-bottom:3px;
}
.service-detail{
display:none;
}
.team-grid{
grid-template-columns:
1fr 1fr;
}
.hero h1{
font-size:43px;
}
.contact-info-panel,
.contact-branches-panel{
padding:18px;
}
.contact-info-panel h3,
.contact-branches-panel h3{
font-size:23px;
}
.contact-whatsapp-small strong{
font-size:10px;
}
.contact-info-text strong{
font-size:12px;
}
.popup-close-btn{
top:10px;
right:10px;
width:32px;
height:32px;
}
}
/* =========================================================
HAREKET AZALTMA
========================================================= */
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
body{
opacity:1;
}
.section-head,
.stat,
.service-card,
.feature,
.about-visual,
.about-copy,
.team-card,
.faq-wrap,
.channel,
.branch-card,
.map-box{
opacity:1;
transform:none;
}
.hero-copy{
opacity:1;
transform:none;
}
/* =========================================================
ŞUBE TELEFON NUMARALARI
========================================================= */
.branch-phone{
display:block;
margin-top:12px;
color:var(--navy);
font-size:14px;
font-weight:750;
letter-spacing:.01em;
text-decoration:none;
transition:
color .2s ease,
transform .2s ease;
}
.branch-phone:hover{
color:var(--gold);
transform:translateX(2px);
}
}