/* =========================================================
Odak Sigorta — Stylesheet
Tasarım: Modern, sade, ferah | Lacivert + altın aksan
========================================================= */
/* ---------- Design Tokens ---------- */
:root {
/* Renkler */
--c-primary: #0B2C5C; /* Lacivert */
--c-primary-700: #0E3A78;
--c-primary-500: #1F5AAB;
--c-primary-100: #E7EEF9;
--c-accent: #D9A640; /* Logodaki altın */
--c-accent-soft: #FBF3DE;
--c-text: #0F172A;
--c-text-muted: #5A6473;
--c-border: #E4E8EF;
--c-bg: #FFFFFF;
--c-bg-soft: #F4F7FB;
--c-success: #16A34A;
--c-danger: #DC2626;
/* Tipografi */
--ff-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fs-base: 16px;
--lh-base: 1.6;
/* Aralık ve yuvarlama */
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 18px;
--shadow-sm: 0 1px 2px rgba(11,44,92,.06), 0 1px 3px rgba(11,44,92,.04);
--shadow: 0 4px 12px rgba(11,44,92,.08);
--shadow-lg: 0 18px 40px rgba(11,44,92,.12);
/* Layout */
--container: 1200px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
}
/* ---------- Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--ff-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary-500); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-primary-700); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid var(--c-accent);
outline-offset: 2px;
}
h1, h2, h3, h4 {
font-weight: 700;
line-height: 1.2;
color: var(--c-text);
margin: 0 0 var(--space-4);
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 2vw + .8rem, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--space-4); color: var(--c-text-muted); }
ul { padding-left: 1.2rem; }
/* ---------- Layout Helpers ---------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-5);
}
.section { padding: var(--space-9) 0; background: #fff; }
.section--soft { background: var(--c-bg-soft); }
.section--tint { background: var(--c-primary-100); }
.section__title { text-align: center; margin-bottom: var(--space-7); }
.section__title h2 { margin-bottom: var(--space-3); }
.section__title p { max-width: 640px; margin: 0 auto; }
/* Skip link */
.skip-link {
position: absolute; left: -1000px; top: 0;
background: var(--c-primary); color: #fff;
padding: 10px 16px; z-index: 1000;
border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 12px 22px;
font-weight: 600; font-size: 1rem;
border-radius: var(--radius);
border: 1.5px solid transparent;
cursor: pointer;
transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: var(--c-primary-700); color: #fff; }
.btn--accent { background: var(--c-accent); color: #1A1300; }
.btn--accent:hover { background: #C99230; color: #1A1300; }
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary); color: #fff; }
.btn--light { background: #fff; color: var(--c-primary); }
.btn--light:hover { background: #fff; color: var(--c-primary-700); }
.btn--lg { padding: 14px 28px; font-size: 1.05rem; }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,.92);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--c-border);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-5);
min-height: 152px;
padding: 16px 0;
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo img {
height: 126px;
width: auto;
max-width: 100%;
display: block;
}
@media (max-width: 540px) {
.site-header__inner { min-height: 100px; padding: 8px 0; }
.logo img { height: 84px; }
}
.logo__text { font-weight: 800; color: var(--c-primary); font-size: 1.05rem; }
.main-nav { display: flex; align-items: center; gap: var(--space-5); }
.main-nav__list { display: flex; gap: var(--space-5); list-style: none; padding: 0; margin: 0; }
.main-nav__list a {
color: var(--c-text);
font-weight: 500;
padding: 8px 4px;
position: relative;
transition: color .2s ease;
}
.main-nav__list a::after {
content: "";
position: absolute; left: 4px; right: 4px; bottom: 0;
height: 3px; background: var(--c-accent); border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.main-nav__list a:hover,
.main-nav__list a.is-active { color: var(--c-primary); }
.main-nav__list a:hover::after,
.main-nav__list a.is-active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.main-nav__list a::after { transition: none; }
}
.nav-toggle {
display: none;
background: transparent; border: 1.5px solid var(--c-border);
border-radius: var(--radius-sm);
padding: 8px; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
@media (max-width: 980px) {
.nav-toggle { display: inline-flex; }
.main-nav {
position: fixed; inset: 76px 0 auto 0;
background: #fff;
flex-direction: column; align-items: stretch;
padding: var(--space-5);
border-bottom: 1px solid var(--c-border);
box-shadow: var(--shadow);
transform: translateY(-120%);
transition: transform .25s ease;
/* Taşan menü içerikleri (örn. Hizmetler alt menüsü) kaydırılabilsin */
max-height: calc(100vh - 76px);
max-height: calc(100dvh - 76px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.main-nav.is-open { transform: translateY(0); }
.main-nav__list { flex-direction: column; gap: var(--space-2); }
.main-nav__list a { padding: 12px 8px; border-bottom: 1px solid var(--c-border); }
.main-nav .btn { margin-top: var(--space-3); }
}
/* ---------- Hero ---------- */
.hero {
position: relative;
background:
linear-gradient(135deg, rgba(11,44,92,.92) 0%, rgba(11,44,92,.65) 60%, rgba(11,44,92,.45) 100%),
url("../Assets/isadami-sigorta.jpg") center/cover no-repeat;
color: #fff;
padding: clamp(72px, 10vw, 144px) 0;
border-bottom: 1px solid var(--c-border);
}
.hero__inner { max-width: 720px; }
.hero__eyebrow {
display: inline-block;
background: linear-gradient(90deg, rgba(217,166,64,.95) 0%, rgba(240,198,107,.95) 100%);
border: 1px solid rgba(217,166,64,.6);
color: #1A1300;
padding: 6px 14px;
border-radius: 999px;
font-size: .85rem; font-weight: 700;
margin-bottom: var(--space-4);
box-shadow: 0 4px 12px rgba(217,166,64,.3);
}
.hero h1 { color: #fff; margin-bottom: var(--space-4); }
.hero p { color: rgba(255,255,255,.92); font-size: 1.1rem; margin-bottom: var(--space-6); max-width: 600px; }
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero__online-link {
display: inline-flex; align-items: center; gap: 8px;
margin-top: var(--space-5);
color: #fff; font-weight: 500; opacity: .92;
border-bottom: 1px dashed rgba(255,255,255,.6);
padding-bottom: 2px;
}
.hero__online-link:hover { color: #fff; opacity: 1; }
/* Intro banner (Ana sayfa: Odak Sigorta tanıtımı, otomotiv köken)
Çerçeveli, tek bir kart — fotoğraf TAM görünür, kenarlardan taşmaz */
.intro-banner {
padding: var(--space-8) 0;
background: var(--c-bg-soft);
}
.intro-banner__card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
color: #fff;
background-color: #0B2C5C;
/* Görsel: oran sabitli, mavi overlay üstte */
background-image:
linear-gradient(135deg, rgba(11,44,92,.88) 0%, rgba(11,44,92,.74) 45%, rgba(31,90,171,.6) 100%),
url("../Assets/odak-otomotiv.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
box-shadow: 0 18px 40px rgba(11,44,92,.18);
padding: clamp(40px, 5vw, 72px);
/* Görselin (1024x683) doğal oranı, böylece bina tamamen sığar */
min-height: clamp(420px, 56vw, 720px);
}
.intro-banner__card h2,
.intro-banner__card h3 { color: #fff; }
.intro-banner__card p { color: rgba(255,255,255,.92); }
.intro-banner__card .lead { color: #fff; font-weight: 500; }
.intro-banner__card .eyebrow {
color: #fff;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.25);
padding: 6px 14px;
border-radius: 999px;
letter-spacing: .1em;
}
.intro-banner__card .intro-stats { margin-top: var(--space-5); }
.intro-banner__card .stat {
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(4px);
}
.intro-banner__card .stat__num { color: var(--c-accent); }
.intro-banner__card .stat__label { color: rgba(255,255,255,.85); }
.intro-banner__card .list-check li { color: #fff; }
.intro-banner__card .list-check li::before {
background: rgba(255,255,255,.18) url("data:image/svg+xml;utf8,") center/14px no-repeat;
}
@media (max-width: 540px) {
.intro-banner__card { padding: 32px 24px; min-height: 0; }
}
/* ---------- Neden / Nasıl yan yana (intro banner ile bütüncül) ---------- */
.why-how-banner {
padding: var(--space-8) 0;
background: #ffffff;
}
.why-how-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-5);
align-items: stretch;
}
@media (max-width: 900px) {
.why-how-grid { grid-template-columns: 1fr; }
}
/* Sol: Neden Odak — fotoğraflı dikdörtgen + lacivert overlay */
.why-card {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
min-height: 460px;
color: #fff;
background-color: #0B2C5C;
background-image:
linear-gradient(180deg, rgba(11,44,92,0) 0%, rgba(11,44,92,.25) 55%, rgba(11,44,92,.65) 100%),
url("../Assets/neden-odak-sigorta-danismanlik.jpg");
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
padding: clamp(32px, 4vw, 56px);
display: flex; flex-direction: column; justify-content: flex-end;
box-shadow: 0 18px 40px rgba(11,44,92,.18);
}
.why-card h2 {
text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.why-card .list-check li {
text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.why-card .eyebrow {
display: inline-block;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.3);
color: #fff;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: var(--space-3);
letter-spacing: .1em;
width: fit-content;
}
.why-card h2 { color: #fff; margin-bottom: var(--space-4); }
.why-card .why-list {
display: grid; gap: 14px;
margin: 0; padding: 0;
list-style: none;
}
.why-card .why-list li {
display: grid;
grid-template-columns: 22px 230px 1fr;
align-items: start;
gap: 14px;
color: rgba(255,255,255,.96);
font-size: .95rem;
line-height: 1.55;
}
.why-card .why-list li::before {
content: "";
width: 22px; height: 22px;
margin-top: 3px;
background: rgba(255,255,255,.22) url("data:image/svg+xml;utf8,") center/14px no-repeat;
border: 1px solid rgba(255,255,255,.4);
border-radius: 50%;
flex: 0 0 auto;
}
.why-card .why-list__title {
font-weight: 700;
color: #fff;
font-size: 1rem;
line-height: 1.45;
}
.why-card .why-list__title::after {
content: ":";
}
.why-card .why-list__desc {
color: rgba(255,255,255,.92);
font-weight: 400;
}
@media (max-width: 640px) {
.why-card .why-list li {
grid-template-columns: 22px 1fr;
gap: 10px 12px;
}
.why-card .why-list__title {
grid-column: 2;
}
.why-card .why-list__title::after { content: ""; }
.why-card .why-list__desc {
grid-column: 2;
}
}
.why-how-grid--reverse { grid-template-columns: 1fr 1.6fr; }
@media (max-width: 980px) {
.why-how-grid--reverse { grid-template-columns: 1fr; }
}
.how-card--primary {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%) !important;
box-shadow: 0 18px 40px rgba(11,44,92,.28) !important;
}
/* Sağ: Nasıl Çalışıyoruz — turuncu kare kart */
.how-card {
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #EA580C 0%, #F59E0B 60%, #F4A467 100%);
color: #fff;
padding: clamp(32px, 4vw, 56px);
display: flex; flex-direction: column;
box-shadow: 0 18px 40px rgba(234,88,12,.25);
min-height: 460px;
}
.how-card .eyebrow {
display: inline-block;
background: rgba(255,255,255,.18);
color: #fff;
border: 1px solid rgba(255,255,255,.32);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: var(--space-3);
letter-spacing: .1em;
width: fit-content;
}
.how-card h2 { color: #fff; margin-bottom: var(--space-5); }
.how-steps {
list-style: none;
padding: 0;
margin: 0;
counter-reset: step;
display: grid;
gap: var(--space-3);
flex: 1;
}
.how-steps li {
display: flex; align-items: flex-start; gap: 14px;
color: #fff;
padding-bottom: var(--space-3);
border-bottom: 1px solid rgba(255,255,255,.22);
}
.how-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.how-steps li::before {
counter-increment: step;
content: counter(step);
flex: 0 0 auto;
width: 36px; height: 36px;
background: rgba(255,255,255,.2);
border: 1.5px solid rgba(255,255,255,.7);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: .95rem;
margin-top: 2px;
}
.how-step__body {
display: flex; flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.how-step__title {
display: block;
font-weight: 700;
font-size: 1.02rem;
color: #fff;
line-height: 1.3;
}
.how-step__desc {
display: block;
font-weight: 400;
color: rgba(255,255,255,.92);
font-size: .92rem;
line-height: 1.5;
}
/* Page hero (smaller, for inner pages) */
.page-hero {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
padding: var(--space-8) 0 var(--space-7);
position: relative;
}
.page-hero h1 { color: #fff; margin-bottom: var(--space-3); }
.page-hero p { color: rgba(255,255,255,.92); max-width: 720px; }
.page-hero--photo {
background-color: var(--c-primary);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: var(--space-9) 0 var(--space-8);
position: relative;
overflow: hidden;
isolation: isolate;
}
.page-hero--photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(11,44,92,.78) 0%, rgba(11,44,92,.55) 50%, rgba(31,90,171,.45) 100%);
z-index: -1;
pointer-events: none;
}
.page-hero--photo > .container { position: relative; z-index: 1; }
.page-hero--photo .breadcrumb a,
.page-hero--photo .breadcrumb { color: rgba(255,255,255,.85); }
.breadcrumb {
list-style: none; padding: 0; margin: 0 0 var(--space-4);
display: flex; gap: var(--space-2); flex-wrap: wrap;
font-size: .9rem; color: rgba(255,255,255,.85);
}
.breadcrumb li::after { content: "›"; margin-left: var(--space-2); opacity: .6; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: rgba(255,255,255,.85); }
.breadcrumb a:hover { color: #fff; }
/* ---------- Cards / Grids ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: var(--space-5);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-primary-100); }
.card__icon {
width: 48px; height: 48px;
border-radius: var(--radius);
background: var(--c-primary-100);
color: var(--c-primary);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: var(--space-4);
}
.card__icon svg { width: 24px; height: 24px; }
/* Tıklanabilir aksiyon kartı */
.card.card--action {
position: relative;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: all .25s ease;
display: flex;
align-items: center;
gap: var(--space-4);
}
.card.card--action:hover {
border-color: var(--c-primary);
box-shadow: 0 12px 28px rgba(11,44,92,.14);
transform: translateY(-3px);
}
.card.card--action:hover .card__icon {
background: var(--c-primary);
color: #fff;
}
.card.card--action:hover .card__action-arrow {
transform: translateX(4px);
color: var(--c-primary);
}
.card.card--action h3 { color: var(--c-text); margin-bottom: 4px; }
.card.card--action p { color: var(--c-text-muted); }
.card__action-arrow {
margin-left: auto;
font-size: 1.4rem;
font-weight: 700;
color: var(--c-text-muted);
transition: transform .25s ease, color .25s ease;
flex-shrink: 0;
}
.card__icon--wa {
background: #DCF8C6;
color: #25D366;
}
.card__icon--wa svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.15rem; margin-bottom: var(--space-2); }
.card p { margin: 0; font-size: .95rem; }
.contact-wa {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px;
}
.contact-wa li a {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 16px;
background: #25D366;
color: #fff;
border-radius: 999px;
font-weight: 600;
font-size: .95rem;
width: 100%;
text-align: center;
transition: all .2s ease;
}
.contact-wa li a::before {
content: "";
width: 14px; height: 14px;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex-shrink: 0;
}
.contact-wa li a:hover {
background: #128C7E;
color: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37,211,102,.35);
}
.footer-wa-link {
display: inline-flex;
align-items: center;
gap: 6px;
}
.footer-wa-link svg {
flex-shrink: 0;
opacity: .85;
transition: opacity .2s ease;
}
.footer-wa-link:hover svg { opacity: 1; }
/* Quick links */
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 980px) { .quick-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .quick-links { grid-template-columns: 1fr; } }
.quick-link {
display: flex; align-items: center; gap: var(--space-3);
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: var(--space-4) var(--space-5);
color: var(--c-text);
font-weight: 600;
transition: all .2s ease;
}
.quick-link:hover {
border-color: var(--c-primary);
color: var(--c-primary);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.quick-link__icon {
flex: 0 0 auto;
width: 44px; height: 44px;
border-radius: 12px;
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.quick-link__icon svg { width: 22px; height: 22px; }
.quick-links .quick-link:nth-child(1) .quick-link__icon { background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%); }
.quick-links .quick-link:nth-child(2) .quick-link__icon { background: linear-gradient(135deg, #1F5AAB 0%, #4A8BD6 100%); }
.quick-links .quick-link:nth-child(3) .quick-link__icon { background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%); }
.quick-links .quick-link:nth-child(4) .quick-link__icon { background: linear-gradient(135deg, #7C3AED 0%, #A77BF0 100%); }
/* Step cards */
.steps { counter-reset: step; }
.step__num {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
font-weight: 700;
margin-bottom: var(--space-4);
}
/* Acentelikler grid */
.brands {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
}
.brand {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
height: 110px;
display: flex; align-items: center; justify-content: center;
padding: var(--space-5);
transition: all .25s ease;
position: relative;
overflow: hidden;
}
.brand::before {
content: "";
position: absolute; inset: auto 0 0 0;
height: 3px;
background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.brand:hover {
border-color: transparent;
box-shadow: 0 8px 22px rgba(11,44,92,.12);
transform: translateY(-2px);
}
.brand:hover::before { transform: scaleX(1); }
.brand img {
max-height: 56px; max-width: 100%;
object-fit: contain;
transition: transform .2s ease, filter .2s ease;
}
.brand:hover img { transform: scale(1.06); filter: drop-shadow(0 6px 14px rgba(11,44,92,.18)); }
/* Testimonials */
.testimonial {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: var(--space-5);
position: relative;
}
.testimonial__quote { color: var(--c-text); font-size: 1rem; margin-bottom: var(--space-4); }
.testimonial__author { display: flex; align-items: center; gap: var(--space-3); }
.testimonial__avatar {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
box-shadow: 0 4px 10px rgba(11,44,92,.2);
}
.testimonial:nth-child(2) .testimonial__avatar { background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%); box-shadow: 0 4px 10px rgba(22,163,74,.25); }
.testimonial:nth-child(3) .testimonial__avatar { background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%); color: #1A1300; box-shadow: 0 4px 10px rgba(217,166,64,.3); }
.testimonial__name { font-weight: 600; color: var(--c-text); font-size: .95rem; }
.testimonial__meta { color: var(--c-text-muted); font-size: .85rem; }
.stars { color: var(--c-accent); margin-bottom: var(--space-3); letter-spacing: 2px; }
/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-4); }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 600; font-size: .92rem; color: var(--c-text); }
.form-field .req { color: var(--c-danger); }
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--c-border);
border-radius: var(--radius);
font: inherit;
background: #fff;
color: var(--c-text);
transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--c-primary);
box-shadow: 0 0 0 4px rgba(31,90,171,.12);
outline: none;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field--check { flex-direction: row; align-items: flex-start; gap: 10px; }
.form-field--check input { width: auto; margin-top: 4px; }
.form-field--check label { font-weight: 400; color: var(--c-text-muted); font-size: .9rem; }
.form-message { font-size: .9rem; padding: 12px 14px; border-radius: var(--radius); display: none; }
.form-message.is-success { display: block; background: #E7F8EE; color: #146C43; border: 1px solid #BAE5C8; }
.form-message.is-error { display: block; background: #FCE7E7; color: #B42318; border: 1px solid #F5C2C2; }
.form-message.is-pending { display: block; background: #EAF1FB; color: #1F5AAB; border: 1px solid #C9DBF3; }
/* Quick form on homepage */
.quick-form-wrap {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow);
}
/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: var(--space-3); }
.faq {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
overflow: hidden;
}
.faq__q {
width: 100%;
padding: var(--space-4) var(--space-5);
background: transparent;
border: 0;
text-align: left;
font: inherit;
font-weight: 600;
color: var(--c-text);
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3);
cursor: pointer;
}
.faq__q::after {
content: "+";
font-size: 1.4rem;
color: var(--c-primary);
transition: transform .2s ease;
flex: 0 0 auto;
}
.faq[open] .faq__q::after { content: "−"; }
.faq__a {
padding: 0 var(--space-5) var(--space-5);
color: var(--c-text-muted);
font-size: .98rem;
}
/* ---------- Service cards ---------- */
.service {
display: flex; flex-direction: column; gap: var(--space-4);
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: all .2s ease;
}
.service:hover { border-color: var(--c-primary-100); box-shadow: var(--shadow); transform: translateY(-2px); }
.service__icon {
width: 56px; height: 56px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
}
.service__icon svg { width: 28px; height: 28px; }
.service h3 { margin: 0; }
.service p { margin: 0; }
.service__cta { margin-top: auto; }
.service__cta a {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 600; color: var(--c-primary);
}
.service__cta a:hover { color: var(--c-primary-700); }
/* ---------- Blog cards ---------- */
.post {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex; flex-direction: column; gap: var(--space-3);
transition: all .2s ease;
}
.post:hover { border-color: var(--c-primary-100); box-shadow: var(--shadow); transform: translateY(-2px); }
.post__tag {
align-self: flex-start;
background: var(--c-primary-100);
color: var(--c-primary);
font-size: .8rem; font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
}
.post h3 { margin: 0; font-size: 1.1rem; }
.post__more {
margin-top: auto;
font-weight: 600;
color: var(--c-primary);
display: inline-flex; align-items: center; gap: 6px;
}
/* ---------- Bento Hybrid (Müşteri yorumu + İstatistik + Blog) ---------- */
.bento-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-5);
margin-bottom: var(--space-7);
align-items: stretch;
}
@media (max-width: 900px) { .bento-grid { grid-template-columns: 1fr; } }
.bento-featured {
position: relative;
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
border-radius: 24px;
padding: clamp(28px, 4vw, 48px);
overflow: hidden;
box-shadow: 0 12px 40px rgba(11,44,92,.18);
display: flex;
flex-direction: column;
}
.bento-featured::before {
content: "";
position: absolute;
right: -60px;
top: -60px;
width: 260px;
height: 260px;
background: radial-gradient(circle, var(--c-accent) 0%, transparent 70%);
opacity: .22;
pointer-events: none;
}
.bento-quote-mark {
position: absolute;
top: 8px;
right: 28px;
font-size: 160px;
font-family: Georgia, "Times New Roman", serif;
color: rgba(255,255,255,.10);
line-height: 1;
font-weight: 700;
pointer-events: none;
user-select: none;
}
.bento-featured .stars {
color: var(--c-accent);
font-size: 1.25rem;
letter-spacing: 4px;
margin-bottom: var(--space-4);
position: relative;
z-index: 1;
}
.bento-featured__viewport {
display: grid;
flex: 1;
position: relative;
z-index: 1;
}
.bento-featured__viewport > .bento-testi {
grid-column: 1;
grid-row: 1;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
display: flex;
flex-direction: column;
}
.bento-featured__viewport > .bento-testi.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s;
}
.bento-featured__viewport > .bento-testi[hidden] { display: flex; }
.bento-testi[data-testi="so"] .bento-featured__avatar {
background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(22,163,74,.4);
}
.bento-testi[data-testi="md"] .bento-featured__avatar {
background: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(37,99,235,.4);
}
.bento-featured__quote {
font-size: clamp(1.2rem, 1.8vw, 1.55rem);
line-height: 1.5;
font-weight: 500;
color: #fff;
margin: 0 0 var(--space-6);
flex: 1;
}
.bento-featured__author {
display: flex;
align-items: center;
gap: var(--space-4);
padding-top: var(--space-5);
border-top: 1px solid rgba(255,255,255,.18);
position: relative;
z-index: 1;
}
.bento-featured__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--c-accent) 0%, #F0C66B 100%);
color: #1A1300;
display: grid;
place-items: center;
font-weight: 700;
font-size: .95rem;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(217,166,64,.4);
}
.bento-featured__name { font-weight: 700; font-size: 1rem; color: #fff; display: block; }
.bento-featured__meta { font-size: .9rem; color: rgba(255,255,255,.78); }
.bento-mini-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--space-5);
position: relative;
z-index: 1;
}
.bento-mini {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.12);
border: 2px solid rgba(255,255,255,.28);
display: grid;
place-items: center;
font-size: .72rem;
font-weight: 700;
color: #fff;
margin-left: -10px;
padding: 0;
font-family: inherit;
cursor: pointer;
transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bento-mini:first-child { margin-left: 0; }
.bento-mini[data-testi-target]:hover {
background: rgba(255,255,255,.22);
border-color: rgba(255,255,255,.5);
transform: translateY(-2px);
z-index: 2;
}
.bento-mini[data-testi-target]:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
.bento-mini.is-active {
background: linear-gradient(135deg, var(--c-accent) 0%, #F0C66B 100%);
border-color: var(--c-accent);
color: #1A1300;
box-shadow: 0 4px 14px rgba(217,166,64,.45);
transform: translateY(-2px) scale(1.05);
z-index: 3;
}
.bento-mini-text { font-size: .85rem; color: rgba(255,255,255,.72); margin-left: var(--space-3); }
.bento-stats {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: var(--space-4);
}
@media (max-width: 900px) { .bento-stats { grid-template-rows: auto; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .bento-stats { grid-template-columns: 1fr; } }
.bento-stat {
background: linear-gradient(135deg, #EA580C 0%, #F59E0B 60%, #F4A467 100%);
border: 1px solid rgba(255,255,255,.22);
border-radius: 20px;
padding: clamp(20px, 2.5vw, 32px);
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
transition: all .2s ease;
color: #fff;
box-shadow: 0 8px 22px rgba(234,88,12,.25);
}
.bento-stat:hover {
box-shadow: 0 14px 32px rgba(234,88,12,.40);
transform: translateY(-3px);
}
.bento-stat__num {
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 800;
color: #fff;
line-height: 1;
font-feature-settings: "tnum";
text-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.bento-stat__num--stars {
color: #fff;
font-size: clamp(1.5rem, 2.4vw, 2rem);
letter-spacing: 3px;
text-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.bento-stat__label {
font-size: .9rem;
color: rgba(255,255,255,.95);
font-weight: 500;
}
.bento-blog-wrap {
position: relative;
margin-top: var(--space-7);
padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
border-radius: 28px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(11,44,92,.88) 0%, rgba(11,44,92,.65) 50%, rgba(31,90,171,.55) 100%),
url("../Assets/aile-guvence.jpg") center/cover no-repeat;
box-shadow: 0 16px 48px rgba(11,44,92,.22);
}
.bento-blog-wrap::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top right, rgba(217,166,64,.18) 0%, transparent 55%);
pointer-events: none;
}
.bento-blog-wrap > * { position: relative; z-index: 1; }
.bento-blog-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.bento-blog-head h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: #fff; }
.bento-blog-head p { margin: 6px 0 0; color: rgba(255,255,255,.88); }
.bento-blog-head .eyebrow {
display: inline-block;
margin-bottom: 10px;
color: #fff;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.28);
padding: 6px 14px;
border-radius: 999px;
letter-spacing: .1em;
}
.bento-blog {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 900px) { .bento-blog { grid-template-columns: 1fr; } }
.bento-blog-wrap .post {
background: transparent;
border: 1px solid rgba(255,255,255,.32);
box-shadow: none;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.bento-blog-wrap .post h3 { color: #fff; }
.bento-blog-wrap .post p { color: rgba(255,255,255,.92); }
.bento-blog-wrap .post .post__tag {
background: rgba(217,166,64,.28);
color: var(--c-accent);
border: 1px solid rgba(217,166,64,.6);
text-shadow: none;
}
.bento-blog-wrap .post .post__more {
color: var(--c-accent);
}
.bento-blog-wrap .post:hover {
background: transparent;
border-color: var(--c-accent);
box-shadow: 0 0 0 1px rgba(217,166,64,.4);
transform: translateY(-3px);
}
.bento-blog-wrap .post:hover .post__more { color: #fff; }
/* ---------- Why Odak strip ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 980px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }
/* ---------- Intro / two-col ---------- */
.split { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.intro-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-5); }
.stat { text-align: center; padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius); }
.stat__num { font-size: 1.6rem; font-weight: 800; color: var(--c-primary); display: block; }
.stat__label { font-size: .88rem; color: var(--c-text-muted); }
/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: var(--space-4); }
.contact-info .card { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info .card__icon { margin-bottom: 0; flex: 0 0 auto; }
.map-wrap {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--c-border);
margin-top: var(--space-6);
}
.map-wrap iframe { width: 100%; height: 380px; border: 0; display: block; }
/* ---------- Footer ---------- */
.site-footer {
background: var(--c-primary);
color: #DFE6F2;
padding: var(--space-8) 0 var(--space-5);
margin-top: var(--space-8);
}
.site-footer a { color: #DFE6F2; }
.site-footer a:hover { color: #fff; }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-6);
margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: var(--space-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.site-footer p { color: #B7C3D8; font-size: .92rem; margin-bottom: var(--space-3); }
.footer-logo { display: inline-block; background: #fff; padding: 12px 16px; border-radius: var(--radius); margin-bottom: var(--space-3); }
.footer-logo img { height: 64px; width: auto; display: block; }
.social { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.social a {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
transition: all .2s ease;
}
.social a:hover { background: var(--c-accent); border-color: var(--c-accent); color: #1A1300; }
.social svg { width: 18px; height: 18px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
padding-top: var(--space-4);
display: flex; flex-wrap: wrap; gap: var(--space-3);
justify-content: space-between; align-items: center;
color: #B7C3D8; font-size: .88rem;
}
/* ---------- Utility ---------- */
.text-center { text-align: center; }
.muted { color: var(--c-text-muted); }
.lead { font-size: 1.1rem; color: var(--c-text); }
.eyebrow {
display: inline-block;
font-size: .82rem; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--c-primary-500); margin-bottom: var(--space-3);
}
.divider { height: 1px; background: var(--c-border); margin: var(--space-6) 0; }
.list-clean { list-style: none; padding: 0; }
.list-check { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.list-check li {
display: flex; gap: 10px; align-items: flex-start;
color: var(--c-text);
}
.list-check li::before {
content: ""; flex: 0 0 auto;
width: 22px; height: 22px; margin-top: 2px;
background: var(--c-primary-100) url("data:image/svg+xml;utf8,") center/14px no-repeat;
border-radius: 50%;
}
/* CTA strip */
.cta-strip {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
padding: var(--space-7);
border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
flex-wrap: wrap;
}
.cta-strip h3 { color: #fff; margin: 0; }
.cta-strip p { color: rgba(255,255,255,.9); margin: 8px 0 0; }
/* ---------- Header dropdown ---------- */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
content: "▾";
font-size: .7rem;
margin-left: 4px;
color: var(--c-text-muted);
transition: transform .2s ease;
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after { color: var(--c-primary); transform: translateY(1px); }
.dropdown {
position: absolute;
top: calc(100% + 4px);
left: -16px;
min-width: 280px;
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 10px;
list-style: none;
margin: 0;
display: none;
z-index: 200;
/* Kısa ekranlarda uzun menü alttan kesilmesin, içeride kaysın */
max-height: calc(100vh - 96px);
overflow-y: auto;
overscroll-behavior: contain;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { display: block; }
.dropdown li { display: block; }
.dropdown li a {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--c-text);
font-weight: 500;
font-size: .95rem;
}
.dropdown li a:hover { background: var(--c-primary-100); color: var(--c-primary); }
.dropdown li a::before {
content: "";
width: 6px; height: 6px;
background: var(--c-accent);
border-radius: 50%;
flex: 0 0 auto;
}
.dropdown__sub a {
padding-left: 28px !important;
font-size: .92rem;
color: var(--c-text-muted) !important;
position: relative;
}
.dropdown__sub a::before {
content: "›";
position: absolute;
left: 14px;
color: var(--c-accent);
font-weight: 700;
}
.dropdown__sub a:hover {
color: var(--c-primary) !important;
background: var(--c-bg-soft);
}
.dropdown__divider {
height: 1px;
background: var(--c-border);
margin: 6px 4px;
list-style: none;
}
@media (max-width: 980px) {
.has-dropdown > a::after { display: none; }
.dropdown {
position: static;
display: block;
box-shadow: none;
border: 0;
padding: 0 0 0 16px;
background: transparent;
min-width: 0;
}
.dropdown li a { padding: 8px 8px; }
.dropdown__divider { display: none; }
}
/* ---------- Homepage services strip ---------- */
.services-strip { padding: var(--space-8) 0; }
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .services-grid { grid-template-columns: 1fr; } }
/* Yeni hizmet kartı: fotoğraf üzeri başlık + altta detay linki */
.service-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex; flex-direction: column;
transition: all .25s ease;
}
.service-card:hover {
border-color: var(--c-primary-100);
box-shadow: 0 14px 30px rgba(11,44,92,.14);
transform: translateY(-3px);
}
.service-card__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--c-bg-soft);
}
.service-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(11,44,92,0) 30%, rgba(11,44,92,.78) 100%);
pointer-events: none;
}
.service-card__title {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: var(--space-4) var(--space-5);
color: #fff;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
z-index: 2;
text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.service-card__body {
padding: var(--space-4) var(--space-5) var(--space-5);
display: flex; flex-direction: column; gap: var(--space-3);
flex: 1;
}
.service-card__desc {
margin: 0;
color: var(--c-text-muted);
font-size: .95rem;
flex: 1;
}
.service-card__more {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
border-radius: var(--radius);
background: var(--c-primary-100);
color: var(--c-primary);
font-weight: 600;
font-size: .92rem;
transition: all .2s ease;
}
.service-card__more:hover {
background: var(--c-primary);
color: #fff;
transform: translateX(2px);
}
/* İki CTA'lı varyant (Hizmetler sayfası: Detay + Teklif Al) */
.service-card__ctas {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-top: auto;
}
.service-card__ctas .service-card__more { margin-top: 0; }
.service-card__quote {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: var(--radius);
border: 1.5px solid var(--c-primary);
color: var(--c-primary);
font-weight: 600;
font-size: .92rem;
background: transparent;
transition: all .2s ease;
}
.service-card__quote:hover {
background: var(--c-accent);
border-color: var(--c-accent);
color: #1A1300;
}
/* ---------- Carousel (Ana sayfa: 3 kart, sağ/sol ok, döngü) ---------- */
.carousel { position: relative; padding: 0 56px; }
.carousel__viewport { overflow: hidden; }
.carousel__track {
display: flex;
gap: var(--space-5);
transition: transform .45s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.carousel__track > .service-card {
flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
min-width: 0;
}
@media (max-width: 980px) {
.carousel { padding: 0 48px; }
.carousel__track > .service-card {
flex: 0 0 calc((100% - var(--space-5)) / 2);
}
}
@media (max-width: 540px) {
.carousel { padding: 0 0; }
.carousel__track > .service-card { flex: 0 0 100%; }
}
.carousel__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 48px;
border-radius: 50%;
background: #fff;
border: 1.5px solid var(--c-border);
color: var(--c-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(11,44,92,.12);
transition: all .2s ease;
z-index: 5;
}
.carousel__btn:hover {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
transform: translateY(-50%) scale(1.06);
}
.carousel__btn:focus-visible {
outline: 3px solid var(--c-accent);
outline-offset: 3px;
}
.carousel__btn--prev { left: 0; }
.carousel__btn--next { right: 0; }
.carousel__btn svg { width: 22px; height: 22px; }
@media (max-width: 540px) {
.carousel__btn {
width: 40px; height: 40px;
top: auto; bottom: -56px;
transform: none;
}
.carousel__btn:hover { transform: scale(1.06); }
.carousel__btn--prev { left: calc(50% - 50px); }
.carousel__btn--next { left: auto; right: calc(50% - 50px); }
.services-strip { padding-bottom: var(--space-9); }
}
.service-tile {
display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-5);
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
text-decoration: none;
color: var(--c-text);
transition: all .2s ease;
position: relative;
overflow: hidden;
}
.service-tile::before {
content: "";
position: absolute; inset: auto 0 0 0;
height: 3px; background: var(--c-accent);
transform: scaleX(0); transform-origin: left;
transition: transform .25s ease;
}
.service-tile:hover {
border-color: var(--c-primary-100);
box-shadow: var(--shadow);
transform: translateY(-2px);
color: var(--c-text);
}
.service-tile:hover::before { transform: scaleX(1); }
.service-tile__icon {
width: 48px; height: 48px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 6px 14px rgba(11,44,92,.18);
}
.service-tile__icon svg { width: 24px; height: 24px; }
/* Her hizmet kartı için kendine özgü renk vurgusu */
.service-tile:nth-child(1) .service-tile__icon { background: linear-gradient(135deg, #1F5AAB 0%, #4A8BD6 100%); box-shadow: 0 6px 14px rgba(31,90,171,.25); }
.service-tile:nth-child(2) .service-tile__icon { background: linear-gradient(135deg, #0B2C5C 0%, #1F5AAB 100%); box-shadow: 0 6px 14px rgba(11,44,92,.28); }
.service-tile:nth-child(3) .service-tile__icon { background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%); box-shadow: 0 6px 14px rgba(22,163,74,.22); }
.service-tile:nth-child(4) .service-tile__icon { background: linear-gradient(135deg, #DC2626 0%, #F26B6B 100%); box-shadow: 0 6px 14px rgba(220,38,38,.22); }
.service-tile:nth-child(5) .service-tile__icon { background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%); box-shadow: 0 6px 14px rgba(217,166,64,.28); }
.service-tile:nth-child(6) .service-tile__icon { background: linear-gradient(135deg, #7C3AED 0%, #A77BF0 100%); box-shadow: 0 6px 14px rgba(124,58,237,.22); }
.service-tile:nth-child(7) .service-tile__icon { background: linear-gradient(135deg, #0891B2 0%, #4DBED4 100%); box-shadow: 0 6px 14px rgba(8,145,178,.22); }
.service-tile:nth-child(8) .service-tile__icon { background: linear-gradient(135deg, #0D9488 0%, #4DBFB6 100%); box-shadow: 0 6px 14px rgba(13,148,136,.22); }
.service-tile:nth-child(9) .service-tile__icon { background: linear-gradient(135deg, #EA580C 0%, #F4A467 100%); box-shadow: 0 6px 14px rgba(234,88,12,.22); }
.service-tile h3 { margin: 0; font-size: 1.05rem; }
.service-tile p { margin: 0; font-size: .92rem; color: var(--c-text-muted); }
.service-tile__more {
margin-top: auto;
font-weight: 600;
font-size: .9rem;
color: var(--c-primary);
display: inline-flex; align-items: center; gap: 6px;
}
/* ---------- Service detail page ---------- */
.service-detail { padding: var(--space-8) 0; }
.service-detail__layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--space-7);
align-items: flex-start;
}
@media (max-width: 980px) { .service-detail__layout { grid-template-columns: 1fr; } }
.service-detail__content h2 { margin-top: var(--space-6); }
.service-detail__content h3 { margin-top: var(--space-5); }
.service-detail__content p,
.service-detail__content li { color: var(--c-text); line-height: 1.7; }
.service-detail__content > p:first-of-type { font-size: 1.1rem; color: var(--c-text); }
.service-aside {
position: sticky;
top: 170px;
background: linear-gradient(135deg, #EA580C 0%, #F59E0B 60%, #F4A467 100%);
border: 1px solid rgba(255,255,255,.25);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: 0 12px 32px rgba(234,88,12,.28);
color: #fff;
overflow: hidden;
}
.service-aside::before {
content: "";
position: absolute;
right: -50px; top: -50px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(255,255,255,.35) 0%, transparent 70%);
pointer-events: none;
}
.service-aside > * { position: relative; z-index: 1; }
.service-aside h3 { margin: 0 0 var(--space-3); font-size: 1.1rem; color: #fff; }
.service-aside p { color: rgba(255,255,255,.92); }
.service-aside .muted { color: rgba(255,255,255,.85) !important; }
/* İkon: turuncu zemine uygun, beyaz buzlu cam görünümü */
.service-aside .service-tile__icon {
background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.4);
color: #fff;
box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.service-aside .btn { width: 100%; margin-top: var(--space-3); }
/* Birincil CTA: turuncu üstünde beyaz buton */
.service-aside .btn--primary {
background: #fff;
color: #C2410C;
border-color: #fff;
}
.service-aside .btn--primary:hover {
background: #FFF7ED;
color: #9A3412;
}
/* İkincil CTA: şeffaf beyaz çerçeveli buton */
.service-aside .btn--ghost {
background: rgba(255,255,255,.12);
color: #fff;
border: 1.5px solid rgba(255,255,255,.6);
}
.service-aside .btn--ghost:hover {
background: rgba(255,255,255,.22);
color: #fff;
}
/* =========================================================
SAYFA-SPESİFİK RENK VURGULARI
(Kurumsal, Hizmetler, Dijital Araçlar, İletişim)
========================================================= */
/* ---------- HİZMETLER SAYFASI: 9 servisin renkli ikonu ---------- */
#trafik .service__icon { background: linear-gradient(135deg, #1F5AAB 0%, #4A8BD6 100%); box-shadow: 0 8px 18px rgba(31,90,171,.28); }
#kasko .service__icon { background: linear-gradient(135deg, #0B2C5C 0%, #1F5AAB 100%); box-shadow: 0 8px 18px rgba(11,44,92,.32); }
#konut .service__icon { background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%); box-shadow: 0 8px 18px rgba(22,163,74,.28); }
#saglik .service__icon { background: linear-gradient(135deg, #DC2626 0%, #F26B6B 100%); box-shadow: 0 8px 18px rgba(220,38,38,.26); }
#seyahat .service__icon { background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%); box-shadow: 0 8px 18px rgba(217,166,64,.32); }
#isyeri .service__icon { background: linear-gradient(135deg, #7C3AED 0%, #A77BF0 100%); box-shadow: 0 8px 18px rgba(124,58,237,.26); }
#nakliyat .service__icon { background: linear-gradient(135deg, #0891B2 0%, #4DBED4 100%); box-shadow: 0 8px 18px rgba(8,145,178,.26); }
#yat .service__icon { background: linear-gradient(135deg, #0D9488 0%, #4DBFB6 100%); box-shadow: 0 8px 18px rgba(13,148,136,.26); }
#insaat .service__icon { background: linear-gradient(135deg, #EA580C 0%, #F4A467 100%); box-shadow: 0 8px 18px rgba(234,88,12,.26); }
/* Hizmet kartının üstünde renkli üst çizgi */
.service { position: relative; overflow: hidden; }
.service::before {
content: ""; position: absolute; inset: 0 0 auto 0;
height: 4px; transform: scaleX(0); transform-origin: left;
transition: transform .3s ease;
}
.service:hover::before { transform: scaleX(1); }
#trafik::before { background: linear-gradient(90deg, #1F5AAB, #4A8BD6); }
#kasko::before { background: linear-gradient(90deg, #0B2C5C, #1F5AAB); }
#konut::before { background: linear-gradient(90deg, #16A34A, #4ABE70); }
#saglik::before { background: linear-gradient(90deg, #DC2626, #F26B6B); }
#seyahat::before { background: linear-gradient(90deg, #D9A640, #F0C66B); }
#isyeri::before { background: linear-gradient(90deg, #7C3AED, #A77BF0); }
#nakliyat::before { background: linear-gradient(90deg, #0891B2, #4DBED4); }
#yat::before { background: linear-gradient(90deg, #0D9488, #4DBFB6); }
#insaat::before { background: linear-gradient(90deg, #EA580C, #F4A467); }
/* ---------- KURUMSAL: Vizyon ve Misyon ikon renkleri ---------- */
#vizyon .card__icon {
width: 64px; height: 64px;
background: linear-gradient(135deg, #1F5AAB 0%, #4A8BD6 100%);
color: #fff;
box-shadow: 0 8px 18px rgba(31,90,171,.28);
}
#vizyon .card__icon svg { width: 30px; height: 30px; }
#misyon .card__icon {
width: 64px; height: 64px;
background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%);
color: #fff;
box-shadow: 0 8px 18px rgba(22,163,74,.28);
}
#misyon .card__icon svg { width: 30px; height: 30px; }
/* ---------- KURUMSAL: Değerler grid 6 kart, 6 farklı renk ---------- */
#degerler .grid > .card:nth-child(1) .card__icon { background: linear-gradient(135deg, #1F5AAB 0%, #4A8BD6 100%); color:#fff; }
#degerler .grid > .card:nth-child(2) .card__icon { background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%); color:#1A1300; }
#degerler .grid > .card:nth-child(3) .card__icon { background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%); color:#fff; }
#degerler .grid > .card:nth-child(4) .card__icon { background: linear-gradient(135deg, #DC2626 0%, #F26B6B 100%); color:#fff; }
#degerler .grid > .card:nth-child(5) .card__icon { background: linear-gradient(135deg, #7C3AED 0%, #A77BF0 100%); color:#fff; }
#degerler .grid > .card:nth-child(6) .card__icon { background: linear-gradient(135deg, #0D9488 0%, #4DBFB6 100%); color:#fff; }
#degerler .grid > .card .card__icon { box-shadow: 0 6px 14px rgba(0,0,0,.12); }
/* ---------- İLETİŞİM: 4 bilgi kartı renkleri ---------- */
.contact-info .card:nth-child(1) .card__icon { background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%); color:#fff; box-shadow: 0 6px 14px rgba(22,163,74,.25); }
.contact-info .card:nth-child(2) .card__icon { background: linear-gradient(135deg, #1F5AAB 0%, #4A8BD6 100%); color:#fff; box-shadow: 0 6px 14px rgba(31,90,171,.25); }
.contact-info .card:nth-child(3) .card__icon { background: linear-gradient(135deg, #DC2626 0%, #F26B6B 100%); color:#fff; box-shadow: 0 6px 14px rgba(220,38,38,.25); }
.contact-info .card:nth-child(4) .card__icon { background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%); color:#1A1300; box-shadow: 0 6px 14px rgba(217,166,64,.3); }
/* ---------- DİJİTAL ARAÇLAR: SSS akordiyon ve form vurgusu ---------- */
.faq[open] {
border-color: var(--c-primary);
box-shadow: 0 4px 14px rgba(11,44,92,.08);
}
.faq[open] .faq__q { color: var(--c-primary); background: linear-gradient(90deg, rgba(31,90,171,.04) 0%, transparent 100%); }
.faq[open] .faq__q::after { color: var(--c-accent); }
.faq__q:hover { background: rgba(31,90,171,.04); }
#teklif .quick-form-wrap {
border-top: 4px solid transparent;
background: #fff;
border-image: linear-gradient(90deg, #D9A640, #1F5AAB) 1;
border-image-slice: 1;
}
#vade .quick-form-wrap {
background:
linear-gradient(180deg, rgba(31,90,171,.04) 0%, #fff 80px) ;
}
/* Form alanı odaklandığında renkli halka */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
box-shadow: 0 0 0 4px rgba(217,166,64,.2);
border-color: var(--c-accent);
}
/* ---------- KURUMSAL: split bölümlere arka plan vurgu ---------- */
#hakkimizda .stat__num { color: var(--c-primary-500); }
#vizyon { background: linear-gradient(180deg, var(--c-bg-soft) 0%, #fff 100%); }
#misyon { background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft) 100%); }
/* =========================================================
İLETİŞİM SAYFASI — Bento Layout + Animasyonlar + Saatler
========================================================= */
/* Eyebrow (koyu zemin) */
.eyebrow--on-dark { color: var(--c-accent); }
/* ---------- Bento Konteyneri ---------- */
.contact-bento {
display: grid;
grid-template-columns: 1.55fr 1fr;
grid-template-areas:
"main aside"
"map map";
gap: var(--space-5);
}
.contact-bento__main { grid-area: main; }
.contact-bento__aside { grid-area: aside; }
.contact-bento__map { grid-area: map; }
@media (max-width: 900px) {
.contact-bento {
grid-template-columns: 1fr;
grid-template-areas:
"main"
"aside"
"map";
}
}
/* ---------- Sol Büyük: 3 İletişim Yolu (gradient) ---------- */
.contact-bento__main {
position: relative;
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
border-radius: 24px;
padding: clamp(28px, 4vw, 48px);
overflow: hidden;
box-shadow: 0 12px 40px rgba(11,44,92,.18);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.contact-bento__main::before {
content: "";
position: absolute;
right: -80px;
top: -80px;
width: 280px;
height: 280px;
background: radial-gradient(circle, var(--c-accent) 0%, transparent 70%);
opacity: .22;
pointer-events: none;
}
.contact-bento__main::after {
content: "";
position: absolute;
left: -60px;
bottom: -60px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
pointer-events: none;
}
.contact-bento__main > * { position: relative; z-index: 1; }
.contact-bento__main h2 {
color: #fff;
font-size: clamp(1.7rem, 2.4vw, 2.25rem);
margin: 0;
}
.contact-bento__main > p {
color: rgba(255,255,255,.85);
margin: 0;
max-width: 540px;
}
/* ---------- 3 Büyük CTA Buton ---------- */
.contact-cta-grid {
display: grid;
gap: var(--space-3);
margin-top: var(--space-3);
}
.contact-cta {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 18px 22px;
border-radius: 16px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: #fff;
text-decoration: none;
transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
backdrop-filter: blur(4px);
}
.contact-cta:hover {
background: rgba(255,255,255,.14);
border-color: rgba(255,255,255,.32);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,.18);
color: #fff;
}
.contact-cta__icon {
width: 56px; height: 56px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: rgba(255,255,255,.12);
color: #fff;
}
.contact-cta__icon svg { width: 26px; height: 26px; }
.contact-cta__body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.contact-cta__label {
font-size: .82rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
}
.contact-cta__value {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
word-break: break-word;
}
.contact-cta__arrow {
margin-left: auto;
font-size: 1.5rem;
font-weight: 700;
color: rgba(255,255,255,.55);
transition: transform .25s ease, color .25s ease;
flex-shrink: 0;
}
.contact-cta:hover .contact-cta__arrow {
transform: translateX(4px);
color: var(--c-accent);
}
/* Buton tipine özel ikon renkleri */
.contact-cta--phone .contact-cta__icon {
background: linear-gradient(135deg, #16A34A 0%, #4ABE70 100%);
box-shadow: 0 6px 16px rgba(22,163,74,.35);
}
.contact-cta--mail .contact-cta__icon {
background: linear-gradient(135deg, #D9A640 0%, #F0C66B 100%);
color: #1A1300;
box-shadow: 0 6px 16px rgba(217,166,64,.35);
}
.contact-cta__icon--wa {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
box-shadow: 0 6px 16px rgba(37,211,102,.4);
position: relative;
}
/* ---------- Animasyonlu İkonlar ---------- */
/* Telefon: hafif sallanır */
@keyframes anim-phone-shake {
0%, 60%, 100% { transform: rotate(0deg); }
64% { transform: rotate(-12deg); }
68% { transform: rotate(10deg); }
72% { transform: rotate(-8deg); }
76% { transform: rotate(6deg); }
80% { transform: rotate(-3deg); }
84% { transform: rotate(0deg); }
}
.anim-phone {
transform-origin: center;
animation: anim-phone-shake 3.4s ease-in-out infinite;
}
/* Mail: zarf kapağı açılır */
@keyframes anim-mail-flap {
0%, 55%, 100% { transform: scaleY(1); }
65% { transform: scaleY(-0.4); }
80% { transform: scaleY(0.7); }
90% { transform: scaleY(1); }
}
.anim-mail .mail-flap {
transform-origin: 12px 6px;
animation: anim-mail-flap 3.8s ease-in-out infinite;
}
@keyframes anim-mail-lift {
0%, 100% { transform: translateY(0); }
70% { transform: translateY(-1.5px); }
85% { transform: translateY(0); }
}
.anim-mail {
animation: anim-mail-lift 3.8s ease-in-out infinite;
}
/* WhatsApp: pulse */
@keyframes anim-wa-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.anim-wa {
transform-origin: center;
animation: anim-wa-pulse 1.8s ease-in-out infinite;
}
.contact-cta__icon--wa::before,
.contact-cta__icon--wa::after {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
border: 2px solid rgba(37,211,102,.55);
pointer-events: none;
animation: anim-wa-ring 2s ease-out infinite;
}
.contact-cta__icon--wa::after { animation-delay: 1s; }
@keyframes anim-wa-ring {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Hareketi azalt tercihine saygı */
@media (prefers-reduced-motion: reduce) {
.anim-phone, .anim-mail, .anim-mail .mail-flap, .anim-wa,
.contact-cta__icon--wa::before, .contact-cta__icon--wa::after {
animation: none !important;
}
}
/* ---------- Çalışma Saatleri Tablosu ---------- */
.hours-box {
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.14);
border-radius: 14px;
padding: 18px 20px;
backdrop-filter: blur(4px);
}
/* Standalone (sağ kolonda, kart olarak) */
.hours-box--card {
margin-top: 0;
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
border: 1px solid rgba(255,255,255,.14);
border-radius: 24px;
padding: clamp(20px, 2.5vw, 28px);
box-shadow: 0 12px 40px rgba(11,44,92,.18);
color: #fff;
position: relative;
overflow: hidden;
}
.hours-box--card::before {
content: "";
position: absolute;
right: -50px;
bottom: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle, var(--c-accent) 0%, transparent 70%);
opacity: .18;
pointer-events: none;
}
.hours-box--card > * { position: relative; z-index: 1; }
.hours-box__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.hours-box__title {
display: block;
font-weight: 700;
font-size: 1rem;
color: #fff;
letter-spacing: .01em;
}
.hours-box__sub {
display: block;
font-size: .78rem;
color: rgba(255,255,255,.6);
margin-top: 2px;
}
.hours-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .82rem;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.85);
}
.hours-status__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #9CA3AF;
flex-shrink: 0;
}
.hours-status.is-open {
background: rgba(22,163,74,.18);
border-color: rgba(74,190,112,.55);
color: #BBF7D0;
}
.hours-status.is-open .hours-status__dot {
background: #4ADE80;
box-shadow: 0 0 0 0 rgba(74,222,128,.6);
animation: anim-dot-pulse 1.8s ease-out infinite;
}
.hours-status.is-closed {
background: rgba(220,38,38,.18);
border-color: rgba(248,113,113,.45);
color: #FECACA;
}
.hours-status.is-closed .hours-status__dot { background: #F87171; }
@keyframes anim-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(74,222,128,.65); }
70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.hours-table {
width: 100%;
border-collapse: collapse;
font-size: .92rem;
}
.hours-table th,
.hours-table td {
padding: 10px 0;
text-align: left;
color: #fff;
font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.hours-table tr:last-child th,
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table th { color: rgba(255,255,255,.78); font-weight: 600; }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours-table__off td,
.hours-table__off th { color: rgba(255,255,255,.45); }
.hours-table tr.is-today th { color: var(--c-accent); }
.hours-table tr.is-today td { color: #fff; font-weight: 700; }
.hours-table tr.is-today th::before {
content: "•";
display: inline-block;
margin-right: 6px;
color: var(--c-accent);
}
/* ---------- Sağ Küçük: Ofis Kartı + Saatler ---------- */
.contact-bento__aside {
display: flex;
flex-direction: column;
gap: var(--space-4);
/* Ofis kartı üstten iletişim kartıyla hizalanır,
hours-box altta sabit kalır; arada açılan alan görsele gider. */
}
.office-card {
background: #fff;
border: 1px solid var(--c-border);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(11,44,92,.10);
display: flex;
flex-direction: column;
margin: 0;
width: 100%;
transition: transform .25s ease, box-shadow .25s ease;
}
.office-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 48px rgba(11,44,92,.16);
}
.office-card img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.office-card:hover img { transform: scale(1.04); }
/* Kompakt varyant — kart aside içinde yukarı doğru yayılır,
görsel açılan alanı tamamen kaplar, body alt kısımda sabit kalır. */
.office-card--compact {
flex: 1;
min-height: 0;
}
.office-card--compact img {
flex: 1 1 auto;
height: auto;
min-height: 180px;
width: 100%;
object-fit: cover;
object-position: center 35%;
}
.office-card--compact .office-card__body {
flex: 0 0 auto;
padding: var(--space-4);
gap: 4px;
}
.office-card--compact .office-card__body h3 {
font-size: 1.15rem;
}
.office-card--compact .office-card__body p {
font-size: .88rem;
margin: 0;
}
.office-card--compact .office-card__link {
margin-top: 0;
padding: 8px 14px;
font-size: .88rem;
}
/* Adres + Yol tarifi al yan yana */
.office-card__addr-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-3);
}
.office-card__addr-row p { margin: 0; flex: 1; min-width: 0; }
.office-card__addr-row .office-card__link { flex-shrink: 0; }
@media (max-width: 480px) {
.office-card__addr-row { flex-direction: column; align-items: flex-start; }
}
.office-card__body {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1;
}
.office-card__body h3 {
margin: 0;
font-size: 1.35rem;
color: var(--c-primary);
}
.office-card__body p {
margin: 0;
font-size: .95rem;
color: var(--c-text-muted);
}
.office-card__link {
margin-top: auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: var(--c-primary-100);
color: var(--c-primary);
font-weight: 700;
border-radius: 10px;
font-size: .92rem;
transition: all .2s ease;
}
.office-card__link svg { width: 16px; height: 16px; }
.office-card__link:hover {
background: var(--c-primary);
color: #fff;
}
/* ---------- Alt: Tam Genişlikte Harita ---------- */
.contact-bento__map {
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--c-border);
box-shadow: 0 12px 32px rgba(11,44,92,.10);
background: #fff;
}
.contact-bento__map iframe {
width: 100%;
height: 440px;
border: 0;
display: block;
}
@media (max-width: 600px) {
.contact-bento__map iframe { height: 320px; }
}
/* ---------- WhatsApp Plaza Chips (bento sol kolonda) ---------- */
.wa-plazas {
margin-top: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid rgba(255,255,255,.15);
}
.wa-plazas__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.wa-plazas__title {
font-size: .82rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-accent);
}
.wa-plazas__sub {
font-size: .82rem;
color: rgba(255,255,255,.65);
}
.wa-plazas__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 720px) {
.wa-plazas__grid { grid-template-columns: 1fr; }
}
.wa-plazas__chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
background: rgba(37,211,102,.14);
border: 1px solid rgba(37,211,102,.4);
border-radius: 12px;
color: #fff;
font-weight: 600;
font-size: .92rem;
text-decoration: none;
transition: all .2s ease;
}
.wa-plazas__chip svg {
width: 16px; height: 16px;
flex-shrink: 0;
color: #4ADE80;
transition: color .2s ease;
}
.wa-plazas__chip:hover {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
border-color: #25D366;
transform: translateY(-2px);
color: #fff;
box-shadow: 0 8px 18px rgba(37,211,102,.4);
}
.wa-plazas__chip:hover svg { color: #fff; }
/* ---------- Tam Genişlik İletişim Formu ---------- */
.quick-form-wrap--full {
border-radius: 24px;
padding: clamp(28px, 4vw, 56px);
box-shadow: 0 12px 40px rgba(11,44,92,.10);
position: relative;
overflow: hidden;
background:
linear-gradient(135deg, rgba(11,44,92,.02) 0%, rgba(31,90,171,.04) 100%),
#fff;
}
.quick-form-wrap--full::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
}
.quick-form-wrap__head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-6);
}
.quick-form-wrap__head h2 {
margin: 0 0 var(--space-2);
}
.quick-form-wrap__head p {
margin: 0;
}
.form--wide {
max-width: 860px;
margin: 0 auto;
}
/* =========================================================
MAKALE SAYFASI — Article / Blog Post
========================================================= */
/* Article tag — kategori pill'i */
.article-tag {
display: inline-block;
background: rgba(217,166,64,.22);
color: var(--c-accent);
border: 1px solid rgba(217,166,64,.55);
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 999px;
margin-bottom: var(--space-3);
}
/* Article hero meta (tarih · okuma süresi) */
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-top: var(--space-4);
color: rgba(255,255,255,.86);
font-size: .95rem;
}
.article-meta__item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.article-meta__item svg {
width: 16px;
height: 16px;
opacity: .9;
flex-shrink: 0;
}
.article-meta__dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255,255,255,.4);
display: inline-block;
}
/* Article layout: prose + sticky aside */
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: var(--space-7);
align-items: start;
}
@media (max-width: 900px) {
.article-layout { grid-template-columns: 1fr; }
}
/* Article prose — tipografi */
.article-prose {
max-width: 760px;
font-size: 1.05rem;
line-height: 1.78;
color: var(--c-text);
}
.article-prose > p {
color: var(--c-text);
margin-bottom: var(--space-5);
}
.article-prose > p.lead {
font-size: 1.18rem;
line-height: 1.6;
color: var(--c-text);
font-weight: 500;
border-left: 4px solid var(--c-accent);
padding-left: var(--space-4);
margin-bottom: var(--space-6);
}
.article-prose h2 {
font-size: clamp(1.4rem, 1.4vw + 1rem, 1.75rem);
color: var(--c-primary);
margin-top: var(--space-7);
margin-bottom: var(--space-3);
position: relative;
padding-left: 18px;
}
.article-prose h2::before {
content: "";
position: absolute;
left: 0; top: .3em; bottom: .3em;
width: 4px;
border-radius: 2px;
background: var(--c-accent);
}
.article-prose h3 {
font-size: 1.2rem;
color: var(--c-primary);
margin-top: var(--space-5);
margin-bottom: var(--space-2);
}
.article-prose ul,
.article-prose ol {
margin: 0 0 var(--space-5);
padding-left: 1.4em;
}
.article-prose li {
margin-bottom: 8px;
color: var(--c-text);
}
.article-prose ul li::marker { color: var(--c-accent); }
.article-prose ol li::marker { color: var(--c-primary); font-weight: 700; }
.article-prose blockquote {
margin: var(--space-5) 0;
padding: var(--space-4) var(--space-5);
background: var(--c-bg-soft);
border-left: 4px solid var(--c-primary);
border-radius: 0 12px 12px 0;
color: var(--c-text);
font-style: italic;
}
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose strong { color: var(--c-primary); font-weight: 700; }
.article-prose a {
color: var(--c-primary-500);
text-decoration: underline;
text-underline-offset: 3px;
}
.article-prose a:hover { color: var(--c-primary); }
.article-prose hr {
border: 0;
height: 1px;
background: var(--c-border);
margin: var(--space-7) 0;
}
/* Callout / Key takeaway kutusu */
.article-callout {
background: linear-gradient(135deg, var(--c-primary-100) 0%, rgba(231,238,249,.55) 100%);
border: 1px solid rgba(31,90,171,.18);
border-radius: 14px;
padding: var(--space-5);
margin: var(--space-5) 0;
display: flex;
gap: var(--space-4);
align-items: flex-start;
}
.article-callout__icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--c-accent) 0%, #F0C66B 100%);
color: #1A1300;
display: inline-flex;
align-items: center; justify-content: center;
box-shadow: 0 6px 14px rgba(217,166,64,.3);
}
.article-callout__icon svg { width: 22px; height: 22px; }
.article-callout__body { flex: 1; min-width: 0; }
.article-callout h4 {
margin: 0 0 8px;
color: var(--c-primary);
font-size: 1.02rem;
}
.article-callout p {
margin: 0;
color: var(--c-text);
font-size: .98rem;
line-height: 1.65;
}
/* Article aside — sticky sidebar */
.article-aside {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
@media (max-width: 900px) {
.article-aside { position: static; }
}
/* TOC / İçindekiler */
.article-toc {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
}
.article-toc .eyebrow {
display: block;
margin-bottom: var(--space-3);
}
.article-toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.article-toc li { margin-bottom: 4px; }
.article-toc a {
display: block;
padding: 8px 0 8px 14px;
border-left: 2px solid var(--c-border);
color: var(--c-text);
font-size: .94rem;
transition: all .2s ease;
line-height: 1.4;
}
.article-toc a:hover {
color: var(--c-primary);
border-color: var(--c-accent);
padding-left: 16px;
}
/* Article side CTA card */
.article-cta-card {
background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-500) 100%);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-5);
position: relative;
overflow: hidden;
box-shadow: 0 12px 28px rgba(11,44,92,.16);
}
.article-cta-card::before {
content: "";
position: absolute;
right: -40px; top: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, var(--c-accent) 0%, transparent 70%);
opacity: .25;
pointer-events: none;
}
.article-cta-card > * { position: relative; z-index: 1; }
.article-cta-card h3 {
color: #fff;
margin: 0 0 8px;
font-size: 1.15rem;
}
.article-cta-card p {
color: rgba(255,255,255,.85);
margin: 0 0 var(--space-4);
font-size: .92rem;
}
.article-cta-card .btn {
width: 100%;
justify-content: center;
}
/* Article share row */
.article-share {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--c-border);
flex-wrap: wrap;
}
.article-share__label {
color: var(--c-text-muted);
font-weight: 600;
font-size: .9rem;
}
.article-share__list {
display: flex;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.article-share__list a {
width: 38px; height: 38px;
display: inline-flex;
align-items: center; justify-content: center;
border-radius: 50%;
background: var(--c-bg-soft);
color: var(--c-text-muted);
border: 1px solid var(--c-border);
transition: all .2s ease;
}
.article-share__list a:hover {
background: var(--c-primary);
color: #fff;
border-color: var(--c-primary);
transform: translateY(-1px);
}
.article-share__list svg { width: 16px; height: 16px; }
/* Print niceties */
@media print {
.site-header, .site-footer, .nav-toggle, .hero__ctas { display: none; }
}
/* ---------- WhatsApp Mini Form (modal) ---------- */
.wa-modal[hidden] { display: none; }
.wa-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.wa-modal__overlay {
position: absolute;
inset: 0;
background: rgba(11, 44, 92, .55);
backdrop-filter: blur(2px);
}
.wa-modal__dialog {
position: relative;
width: 100%;
max-width: 420px;
background: var(--c-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-6);
animation: waModalIn .22s ease;
}
@keyframes waModalIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.wa-modal__close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
border: none;
background: transparent;
font-size: 26px;
line-height: 1;
color: var(--c-text-muted);
cursor: pointer;
border-radius: 50%;
transition: background .2s ease, color .2s ease;
}
.wa-modal__close:hover { background: var(--c-bg-soft); color: var(--c-text); }
.wa-modal__head { margin-bottom: var(--space-5); padding-right: var(--space-5); }
.wa-modal__eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--c-success);
margin-bottom: var(--space-2);
}
.wa-modal__title { font-size: 20px; margin: 0 0 var(--space-2); color: var(--c-primary); }
.wa-modal__sub { font-size: 14px; color: var(--c-text-muted); margin: 0; }
.wa-modal__form { display: flex; flex-direction: column; gap: var(--space-4); }
.wa-modal__label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--c-text); }
.wa-modal__label i { color: var(--c-danger); font-style: normal; }
.wa-modal__label input,
.wa-modal__label textarea {
font-family: inherit;
font-size: 15px;
font-weight: 400;
color: var(--c-text);
padding: 10px 12px;
border: 1px solid var(--c-border);
border-radius: var(--radius-sm);
background: var(--c-bg);
transition: border-color .2s ease, box-shadow .2s ease;
}
.wa-modal__label input:focus,
.wa-modal__label textarea:focus {
outline: none;
border-color: var(--c-primary-500);
box-shadow: 0 0 0 3px var(--c-primary-100);
}
.wa-modal__label textarea { resize: vertical; min-height: 64px; }
.wa-modal [aria-invalid="true"] { border-color: var(--c-danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }
.wa-modal__check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--c-text-muted); line-height: 1.5; }
.wa-modal__check input { margin-top: 2px; flex: 0 0 auto; }
.wa-modal__check a { color: var(--c-primary-500); text-decoration: underline; }
.wa-modal__submit { width: 100%; justify-content: center; }
.wa-modal__message { font-size: 13px; margin: 0; min-height: 0; }
.wa-modal__message:empty { display: none; }
.wa-modal__message.is-success { color: var(--c-success); }
.wa-modal__message.is-error { color: var(--c-danger); }
.wa-modal__message.is-pending { color: var(--c-text-muted); }