/* ============================================================
services-modern.css — Override visual sección servicios
✅ Mantiene intacto el flip card (paketler2 / paketler5)
✅ No toca style.css
✅ Compatible con servicios.js (mismos selectores)
✅ Aplica a services1 (index) y services-it (it-services)
Añadir en DESPUÉS de style.css:
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap');
/* ──────────────────────────────────────────────
1. FONDO DE SECCIÓN
────────────────────────────────────────────── */
.services1,
.services-it {
position: relative;
background: #f7f9fd !important;
padding: 7rem 0 8rem !important;
overflow: hidden;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* Cuadrícula de fondo sutil */
.services1::before,
.services-it::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(12,90,219,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,90,219,0.045) 1px, transparent 1px);
background-size: 52px 52px;
pointer-events: none;
z-index: 0;
}
/* Manchas de color difuminadas */
.services1::after,
.services-it::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 45% at 8% 18%, rgba(12,90,219,0.07) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 92% 82%, rgba(4,46,114,0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Contenido siempre sobre el fondo */
.services1 .container,
.services1 .tabloservices,
.services-it .container,
.services-it .tabloservices {
position: relative;
z-index: 2;
}
/* ──────────────────────────────────────────────
2. BARRAS ANIMADAS (canvas SVG inyectado por JS)
────────────────────────────────────────────── */
.sm-bars-canvas {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
pointer-events: none;
z-index: 1;
}
/* ──────────────────────────────────────────────
3. ENCABEZADO — index.html
────────────────────────────────────────────── */
.services1 .h2-baslik-hizmetler-21 {
color: #0d1b3e !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
font-size: 3.2rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
position: relative !important;
display: inline-block !important;
padding-bottom: 16px !important;
width: 100% !important;
}
.services1 .h2-baslik-hizmetler-21::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 52px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, #0c5adb, #1e88e5);
}
.services1 .col-12 > .services-kutu2--yazi {
color: #6b7a99 !important;
font-size: 1.5rem !important;
font-weight: 400 !important;
display: block;
text-align: center;
margin-top: 6px;
}
/* ──────────────────────────────────────────────
4. ENCABEZADO — it-services.html
────────────────────────────────────────────── */
.services-it .h2-baslik-hizmetler-2 {
font-family: 'DM Sans', 'Poppins', sans-serif !important;
font-size: 3.2rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
background-image: linear-gradient(135deg, #0c5adb 0%, #1e88e5 100%) !important;
-webkit-background-clip: text !important;
color: transparent !important;
}
.services-it .services-kutu2--yazi1 {
color: #6b7a99 !important;
font-size: 1.5rem !important;
text-align: center;
display: block;
margin-top: 6px;
}
/* ──────────────────────────────────────────────
5. TARJETA FRONTAL — paketler2 (index)
────────────────────────────────────────────── */
/* gorsel necesita position:relative para números y sombra */
.paketler2__gorsel--1,
.paketler2__gorsel--2,
.paketler2__gorsel--3,
.paketler2__gorsel--4,
.paketler2__gorsel--5,
.paketler2__gorsel--6 {
position: relative !important;
background: #ffffff !important;
border: 1.5px solid #dde8f8 !important;
border-radius: 18px !important;
box-shadow:
0 4px 18px rgba(12,90,219,0.08),
0 1px 4px rgba(0,0,0,0.04) !important;
transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.paketler2:hover .paketler2__gorsel--1,
.paketler2:hover .paketler2__gorsel--2,
.paketler2:hover .paketler2__gorsel--3,
.paketler2:hover .paketler2__gorsel--4,
.paketler2:hover .paketler2__gorsel--5,
.paketler2:hover .paketler2__gorsel--6 {
box-shadow:
0 22px 52px rgba(12,90,219,0.16),
0 4px 12px rgba(0,0,0,0.06) !important;
border-color: #94b8f5 !important;
}
/* Número decorativo de orden */
.paketler2__gorsel--1::before { content: '01'; }
.paketler2__gorsel--2::before { content: '02'; }
.paketler2__gorsel--3::before { content: '03'; }
.paketler2__gorsel--4::before { content: '04'; }
.paketler2__gorsel--5::before { content: '05'; }
.paketler2__gorsel--6::before { content: '06'; }
.paketler2__gorsel--1::before,
.paketler2__gorsel--2::before,
.paketler2__gorsel--3::before,
.paketler2__gorsel--4::before,
.paketler2__gorsel--5::before,
.paketler2__gorsel--6::before {
position: absolute;
top: 12px;
right: 16px;
font-size: 4.8rem;
font-weight: 800;
color: rgba(12,90,219,0.06);
line-height: 1;
pointer-events: none;
font-family: 'DM Sans', 'Poppins', sans-serif;
letter-spacing: -0.04em;
z-index: 0;
}
/* Contenido de la cara frontal */
.paketler2__icerik {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
padding: 2.8rem 2.2rem !important;
}
/* Icono — círculo azul con sombra */
.paketler2__icerik .iconw {
width: 72px !important;
height: 72px !important;
line-height: 72px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #1e70ff 0%, #0c5adb 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 20px !important;
box-shadow: 0 8px 28px rgba(12,90,219,0.32) !important;
transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s !important;
}
.paketler2:hover .paketler2__icerik .iconw {
transform: translateY(-5px) scale(1.07) !important;
box-shadow: 0 16px 36px rgba(12,90,219,0.40) !important;
}
/* Imágenes dentro del iconw (las img originales del proyecto) */
.paketler2__icerik .iconw img {
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
filter: brightness(0) invert(1) !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Iconos de fuente (flaticon / h-flaticon) */
.paketler2__icerik .iconw i {
font-size: 3rem !important;
color: #ffffff !important;
line-height: 1 !important;
display: block !important;
}
/* Título frontal */
.paketler2__icerik .baslik-3white {
color: #0d1b3e !important;
font-size: 1.7rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-align: center !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
position: relative;
z-index: 1;
}
/* Descripción frontal */
.paketler2__icerik .services-kutu2--yazi {
color: #6b7a99 !important;
font-size: 1.3rem !important;
line-height: 1.72 !important;
text-align: center !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
position: relative;
z-index: 1;
}
/* ──────────────────────────────────────────────
6. TARJETA TRASERA — arkayazi (FLIP)
────────────────────────────────────────────── */
.paketler2__on--arkayazi-1,
.paketler2__on--arkayazi-2,
.paketler2__on--arkayazi-3,
.paketler2__on--arkayazi-4,
.paketler2__on--arkayazi-5,
.paketler2__on--arkayazi-6 {
background: linear-gradient(148deg, #1558d6 0%, #03307a 100%) !important;
border-radius: 18px !important;
box-shadow: 0 24px 52px rgba(4,46,114,0.4) !important;
}
/* Título en el reverso */
.paketler2__pr-kutu .baslik-sol {
font-size: 1.9rem !important;
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.3 !important;
margin-bottom: 14px !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* Descripción en el reverso */
.paketler2__pr-kutu .services-kutu2--yazi {
font-size: 1.35rem !important;
color: rgba(255,255,255,0.8) !important;
line-height: 1.75 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* Botón en el reverso */
.paketler2__on--arkayazi .buton {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 10px 26px !important;
background: rgba(255,255,255,0.13) !important;
border: 1.5px solid rgba(255,255,255,0.38) !important;
border-radius: 999px !important;
color: #ffffff !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.25s, border-color 0.25s !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
letter-spacing: 0.01em;
}
.paketler2__on--arkayazi .buton:hover {
background: rgba(255,255,255,0.25) !important;
border-color: rgba(255,255,255,0.65) !important;
}
/* ──────────────────────────────────────────────
7. PAKETLER5 (it-services.html — misma lógica)
────────────────────────────────────────────── */
.paketler5__gorsel--1,
.paketler5__gorsel--2,
.paketler5__gorsel--3,
.paketler5__gorsel--4,
.paketler5__gorsel--5,
.paketler5__gorsel--6 {
position: relative !important;
background: #ffffff !important;
border: 1.5px solid #dde8f8 !important;
border-radius: 18px !important;
box-shadow:
0 4px 18px rgba(12,90,219,0.08),
0 1px 4px rgba(0,0,0,0.04) !important;
}
.paketler5__gorsel--1::before { content: '01'; }
.paketler5__gorsel--2::before { content: '02'; }
.paketler5__gorsel--3::before { content: '03'; }
.paketler5__gorsel--4::before { content: '04'; }
.paketler5__gorsel--5::before { content: '05'; }
.paketler5__gorsel--6::before { content: '06'; }
.paketler5__gorsel--1::before,
.paketler5__gorsel--2::before,
.paketler5__gorsel--3::before,
.paketler5__gorsel--4::before,
.paketler5__gorsel--5::before,
.paketler5__gorsel--6::before {
position: absolute;
top: 12px; right: 16px;
font-size: 4.8rem;
font-weight: 800;
color: rgba(12,90,219,0.06);
line-height: 1;
pointer-events: none;
font-family: 'DM Sans', 'Poppins', sans-serif;
letter-spacing: -0.04em;
z-index: 0;
}
.paketler5__icerik {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
padding: 2.8rem 2.2rem !important;
}
.paketler5__icerik .iconw {
width: 72px !important;
height: 72px !important;
line-height: 72px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #1e70ff 0%, #0c5adb 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 20px !important;
box-shadow: 0 8px 28px rgba(12,90,219,0.32) !important;
}
.paketler5__icerik .iconw img {
width: 36px !important;
height: 36px !important;
object-fit: contain !important;
filter: brightness(0) invert(1) !important;
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.paketler5__icerik .iconw i {
font-size: 3rem !important;
color: #ffffff !important;
line-height: 1 !important;
display: block !important;
}
.paketler5__icerik .baslik-3 {
color: #0d1b3e !important;
font-size: 1.7rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
text-align: center !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
.paketler5__icerik .services-kutu2--yazi1 {
color: #6b7a99 !important;
font-size: 1.3rem !important;
line-height: 1.72 !important;
text-align: center !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* Cara trasera paketler5 */
.paketler5__on--arkayazi-1,
.paketler5__on--arkayazi-2,
.paketler5__on--arkayazi-3,
.paketler5__on--arkayazi-4,
.paketler5__on--arkayazi-5,
.paketler5__on--arkayazi-6 {
background: linear-gradient(148deg, #1558d6 0%, #03307a 100%) !important;
border-radius: 18px !important;
box-shadow: 0 24px 52px rgba(4,46,114,0.4) !important;
}
.paketler5__pr-kutu .baslik-3 {
color: #ffffff !important;
font-size: 1.9rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin-bottom: 14px !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
.paketler5__pr-kutu .services-kutu2--yazi1 {
color: rgba(255,255,255,0.8) !important;
font-size: 1.35rem !important;
line-height: 1.75 !important;
}
.paketler5__on--arkayazi .custom-button {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 10px 26px !important;
background: rgba(255,255,255,0.13) !important;
border: 1.5px solid rgba(255,255,255,0.38) !important;
border-radius: 999px !important;
color: #ffffff !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: background 0.25s, border-color 0.25s !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
.paketler5__on--arkayazi .custom-button:hover {
background: rgba(255,255,255,0.25) !important;
border-color: rgba(255,255,255,0.65) !important;
}
/* ──────────────────────────────────────────────
8. RESPONSIVE
────────────────────────────────────────────── */
@media only screen and (max-width: 56.25em) {
.services1,
.services-it {
padding: 4rem 0 5rem !important;
}
.services1 .h2-baslik-hizmetler-21,
.services-it .h2-baslik-hizmetler-2 {
font-size: 4.4rem !important;
}
.paketler2__gorsel--1::before,
.paketler2__gorsel--2::before,
.paketler2__gorsel--3::before,
.paketler2__gorsel--4::before,
.paketler2__gorsel--5::before,
.paketler2__gorsel--6::before,
.paketler5__gorsel--1::before,
.paketler5__gorsel--2::before,
.paketler5__gorsel--3::before,
.paketler5__gorsel--4::before,
.paketler5__gorsel--5::before,
.paketler5__gorsel--6::before {
font-size: 8rem !important;
}
}
/* ============================================================
SECCIÓN "SOLUCIONES A LA MEDIDA" — paketler3
Aplica a index.html Y it-services.html
============================================================ */
/* ──────────────────────────────────────────────
SECCIÓN CONTENEDORA
────────────────────────────────────────────── */
.paketler-alani {
position: relative;
background: #f7f9fd !important;
padding: 6rem 0 6rem !important;
overflow: hidden;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
.paketler-alani::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(12,90,219,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,90,219,0.045) 1px, transparent 1px);
background-size: 52px 52px;
pointer-events: none;
z-index: 0;
}
.paketler-alani::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 40% at 8% 18%, rgba(12,90,219,0.07) 0%, transparent 60%),
radial-gradient(ellipse 40% 50% at 92% 82%, rgba(4,46,114,0.05) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* ──────────────────────────────────────────────
FIX: tablo--1-ve-3 necesita height explícita
porque paketler3 usa position:absolute y el
contenedor colapsa a 0, tapando el encabezado
────────────────────────────────────────────── */
.paketler-alani .tablo {
position: relative;
z-index: 2;
}
.paketler-alani .tablo > .tablo--1-ve-3 {
position: relative !important;
height: 52rem !important;
min-height: 52rem !important;
}
/* Espacio entre subtítulo y tarjetas — ya manejado con padding-bottom del párrafo */
.paketler-alani .bosluk3 {
position: relative;
z-index: 2;
}
/* z-index encabezado — visible sobre el fondo pero nunca sobre el navbar */
.paketler-alani .h-yazi-ortalama {
position: relative !important;
z-index: 2 !important;
}
.paketler-alani .h2-baslik-hizmetler-2__paragraf {
position: relative !important;
z-index: 2 !important; /* mismo nivel que el resto, NO sobre el navbar */
display: block !important;
text-align: center !important;
margin-bottom: 6rem !important; /* espacio hacia las tarjetas */
}
/* ──────────────────────────────────────────────
ENCABEZADO
────────────────────────────────────────────── */
.paketler-alani .h-yazi-ortalama .icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 78px !important;
height: 78px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #1e70ff 0%, #0c5adb 100%) !important;
box-shadow: 0 12px 32px rgba(12,90,219,0.35) !important;
margin-bottom: 20px !important;
padding: 0 !important;
line-height: normal !important;
}
.paketler-alani .h-yazi-ortalama .icon i {
font-size: 3.4rem !important;
color: #ffffff !important;
line-height: 1 !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #ffffff !important;
}
.paketler-alani .h2-baslik-hizmetler-2 {
font-family: 'DM Sans', 'Poppins', sans-serif !important;
font-size: 3.2rem !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
background-image: linear-gradient(135deg, #0c5adb 0%, #1e88e5 100%) !important;
-webkit-background-clip: text !important;
color: transparent !important;
display: inline-block !important;
}
.paketler-alani .h2-baslik-hizmetler-2__paragraf {
font-size: 1.55rem !important;
color: #6b7a99 !important;
font-weight: 400 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* ──────────────────────────────────────────────
TARJETA — contenedor flip
────────────────────────────────────────────── */
.paketler3 {
height: 52rem !important;
border-radius: 20px !important;
transition: filter 0.3s ease !important;
}
.paketler3:hover {
filter: drop-shadow(0 24px 36px rgba(12,90,219,0.22));
}
.paketler3__on {
border-radius: 20px !important;
box-shadow:
0 6px 24px rgba(12,90,219,0.12),
0 1px 4px rgba(0,0,0,0.05) !important;
}
/* ──────────────────────────────────────────────
CARA FRONTAL
────────────────────────────────────────────── */
.paketler3__on--onyazi {
background-color: #ffffff !important;
border: 1.5px solid #dde8f8 !important;
}
.paketler3__gorsel--1,
.paketler3__gorsel--2,
.paketler3__gorsel--3 {
border-top-left-radius: 20px !important;
border-top-right-radius: 20px !important;
}
/* Mismo azul brillante que las tarjetas de servicios */
.paketler3__gorsel--1 {
background-image:
linear-gradient(to right bottom, #1e70ff, #0c5adb),
url(../img/pack1.jpg) !important;
}
.paketler3__gorsel--2 {
background-image:
linear-gradient(to right bottom, #1e70ff, #0c5adb),
url(../img/pack2.jpg) !important;
}
.paketler3__gorsel--3 {
background-image:
linear-gradient(to right bottom, #1e70ff, #0c5adb),
url(../img/pack3.jpg) !important;
}
/* ──────────────────────────────────────────────
ICONO en zona azul
FIX: en it-services usa con h-flaticon (fuente),
en index usa ![]()
. Ambos necesitan el mismo trato.
────────────────────────────────────────────── */
/* ──────────────────────────────────────────────
ICONOS en zona azul — OVERRIDE completo
El style.css pone los iconos via ::after con
position:absolute top:0 left:0 width:60px.
Nuestro iconw es 64px circular — centramos el ::after
────────────────────────────────────────────── */
.paketler3__gorsel .iconw {
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.18) !important;
border: 2px solid rgba(255,255,255,0.38) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 14px !important;
box-shadow: none !important;
position: relative !important;
overflow: visible !important;
}
/* Imágenes directas en index.html */
.paketler3__gorsel .iconw img {
width: 34px !important;
height: 34px !important;
object-fit: contain !important;
filter: brightness(0) invert(1) !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
display: block !important;
position: relative !important;
z-index: 2 !important;
}
/* Iconos de fuente en it-services.html — ocultos por style.css,
el ::after los reemplaza con imagen */
.paketler3__gorsel .iconw i {
font-size: 2.8rem !important;
color: #ffffff !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Centrar el ::after que style.css pone con top:0 left:0
Lo sobreescribimos para centrarlo dentro del círculo */
.paketler3 .iconw::after {
display: block !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 34px !important;
height: 34px !important;
background-size: 34px 34px !important;
filter: brightness(0) invert(1) !important;
z-index: 2 !important;
}
/* Iconos de fuente h-flaticon (it-services.html) */
.paketler3__gorsel .iconw i {
font-size: 2.8rem !important;
color: #ffffff !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Título en zona azul */
.paketler3__gorsel .baslik-sol {
font-size: 1.8rem !important;
font-weight: 700 !important;
color: #ffffff !important;
text-align: center !important;
line-height: 1.3 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* Descripción en zona azul */
.paketler3__gorsel .services-kutu2--yazi {
font-size: 1.3rem !important;
color: rgba(255,255,255,0.88) !important;
text-align: center !important;
line-height: 1.65 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* ──────────────────────────────────────────────
CARA TRASERA — mismo azul brillante que el frente
────────────────────────────────────────────── */
.paketler3__on--arkayazi-1,
.paketler3__on--arkayazi-2,
.paketler3__on--arkayazi-3 {
background-image: linear-gradient(to right bottom, #1e70ff, #0c5adb) !important;
border-radius: 20px !important;
box-shadow: 0 24px 52px rgba(4,46,114,0.40) !important;
}
.paketler3__pr-yazi {
font-size: 2rem !important;
font-weight: 800 !important;
color: #ffffff !important;
text-transform: uppercase !important;
line-height: 1.25 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
margin-bottom: 8px !important;
}
.paketler3__pr-degeri {
font-size: 1.4rem !important;
color: rgba(255,255,255,0.78) !important;
line-height: 1.7 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
.paketler3__pr-kutu {
margin-bottom: 3rem !important;
}
/* ──────────────────────────────────────────────
BOTÓN EN EL REVERSO
────────────────────────────────────────────── */
.paketler3 .buton--beyaz,
.paketler3 button.buton--beyaz,
.paketler3 a.buton--beyaz {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 32px !important;
background: rgba(255,255,255,0.14) !important;
color: #ffffff !important;
border: 1.5px solid rgba(255,255,255,0.42) !important;
border-radius: 999px !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
cursor: pointer !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease !important;
text-decoration: none !important;
}
.paketler3 .buton--beyaz::after,
.paketler3 button.buton--beyaz::after,
.paketler3 a.buton--beyaz::after {
display: none !important;
}
.paketler3 .buton--beyaz:hover,
.paketler3 button.buton--beyaz:hover,
.paketler3 a.buton--beyaz:hover {
background: rgba(255,255,255,0.26) !important;
border-color: rgba(255,255,255,0.70) !important;
transform: translateY(-2px) !important;
}
/* ──────────────────────────────────────────────
RESPONSIVE paketler3
────────────────────────────────────────────── */
@media only screen and (max-width: 56.25em) {
.paketler-alani {
padding: 1rem 0 !important;
}
.paketler-alani .tablo > .tablo--1-ve-3 {
height: auto !important;
min-height: unset !important;
}
.paketler-alani .bosluk3 {
margin-top: 0 !important;
}
.paketler3__icerik ul li {
font-size: 2.8rem !important;
padding: 10px 0 10px 28px !important;
}
.paketler3__icerik ul li::before {
top: 20px !important;
width: 12px !important;
height: 12px !important;
}
}
/* ============================================================
SECCIÓN "ALIADOS ESTRATÉGICOS" — .markalar
Mantiene estructura original: .markalar > .marka (imágenes)
Solo override visual — sin tocar HTML ni aliados.js
============================================================ */
/* ── SECCIÓN CONTENEDORA ── */
.markalar {
position: relative !important;
background: #f7f9fd !important;
padding: 7rem 4rem 8rem !important;
overflow: hidden;
font-family: 'DM Sans', 'Poppins', sans-serif;
text-align: center;
}
/* Cuadrícula de fondo */
.markalar::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(12,90,219,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(12,90,219,0.045) 1px, transparent 1px);
background-size: 52px 52px;
pointer-events: none;
z-index: 0;
}
/* Manchas de profundidad */
.markalar::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 50% at 8% 50%, rgba(30,112,255,0.07) 0%, transparent 60%),
radial-gradient(ellipse 45% 50% at 92% 50%, rgba(12,90,219,0.05) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Todo el contenido sobre el fondo */
.markalar .h-yazi-ortalama,
.markalar .h2-baslik-hizmetler-21,
.markalar .h2-baslik-hizmetler-21__paragraf,
.markalar .bosluk3,
.markalar .h-yazi-margin-kucuk-21 {
position: relative;
z-index: 2;
}
/* ── ICONO DEL ENCABEZADO ── */
.markalar .iconw {
width: 72px !important;
height: 72px !important;
line-height: 72px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #1e70ff 0%, #0c5adb 100%) !important;
box-shadow: 0 12px 32px rgba(12,90,219,0.32) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 20px !important;
}
.markalar .iconw i {
font-size: 3.2rem !important;
color: #ffffff !important;
background: none !important;
-webkit-text-fill-color: #ffffff !important;
-webkit-background-clip: unset !important;
}
/* ── TÍTULO ── */
.markalar .h2-baslik-hizmetler-21 {
font-family: 'DM Sans', 'Poppins', sans-serif !important;
font-size: 3rem !important;
font-weight: 800 !important;
color: #0d1b3e !important;
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
display: block !important;
margin-bottom: 10px !important;
}
/* ── SUBTÍTULO ── */
.markalar .h2-baslik-hizmetler-21__paragraf {
font-size: 1.5rem !important;
color: #6b7a99 !important;
font-weight: 400 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
margin-bottom: 0 !important;
}
/* ── CONTENEDOR DE LOGOS ── */
.markalar .h-yazi-margin-kucuk-21 {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important;
/* Necesario para el efecto 3D de cada logo */
perspective: 1200px !important;
}
/* ── CADA LOGO (.marka) — EFECTO 3D ── */
.marka {
height: auto !important;
max-height: 90px !important;
width: 170px !important;
object-fit: contain !important;
margin: 0 !important;
/* Tarjeta blanca con borde */
background: #ffffff !important;
border: 1.5px solid #dde8f8 !important;
border-radius: 16px !important;
padding: 16px 14px !important;
/* Sombra base */
box-shadow:
0 4px 16px rgba(12,90,219,0.08),
0 1px 4px rgba(0,0,0,0.04) !important;
/* Transición 3D */
transition:
transform 0.35s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.35s ease,
border-color 0.35s ease !important;
opacity: 1 !important;
cursor: pointer;
}
/* Efecto 3D al hover */
.marka:hover {
transform:
perspective(600px)
rotateX(-8deg)
rotateY(5deg)
scale(1.08)
translateY(-8px) !important;
box-shadow:
0 28px 52px rgba(12,90,219,0.20),
0 8px 20px rgba(0,0,0,0.08),
-6px 6px 0 rgba(30,112,255,0.10) !important;
border-color: #94b8f5 !important;
opacity: 1 !important;
}
/* ── SEPARADOR ENTRE FILAS (bosluk333) ── */
.markalar .bosluk333 {
width: 100% !important;
flex-basis: 100% !important;
height: 0 !important;
margin: 4px 0 !important;
}
/* ── RESPONSIVE ── */
@media only screen and (max-width: 56.25em) {
.markalar {
padding: 5rem 2rem 6rem !important;
}
.marka {
width: 140px !important;
max-height: 75px !important;
padding: 12px 10px !important;
}
.marka:hover {
transform: scale(1.04) translateY(-4px) !important;
}
}
/* ============================================================
SECCIÓN "ALIADOS ESTRATÉGICOS" — .markalar
Estructura original intacta — solo override visual
El SVG animado se inyecta via aliados.js (ver snippet)
============================================================ */
/* ── SECCIÓN CONTENEDORA ── */
.markalar {
position: relative !important;
background: linear-gradient(160deg, #0a1628 0%, #0c3a8f 55%, #0a1628 100%) !important;
padding: 6rem 4rem 0 !important;
overflow: hidden !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
text-align: center;
display: block !important;
width: 100% !important;
}
/* Puntos de cuadrícula */
.markalar::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px) !important;
background-size: 28px 28px !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Brillo central */
.markalar::after {
content: '' !important;
position: absolute !important;
top: 35% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 700px !important;
height: 300px !important;
background: radial-gradient(ellipse, rgba(30,112,255,0.12) 0%, transparent 70%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* ── SVG GRÁFICAS (inyectado por JS) ── */
.markalar-charts-svg {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 220px !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* ── CONTENIDO sobre el fondo ── */
.markalar .h-yazi-ortalama,
.markalar .h2-baslik-hizmetler-21__paragraf,
.markalar .bosluk3,
.markalar .h-yazi-margin-kucuk-21 {
position: relative !important;
z-index: 3 !important;
}
/* Padding inferior para que los logos no tapen las gráficas */
.markalar .h-yazi-margin-kucuk-21 {
padding-bottom: 240px !important;
}
/* ── ICONO ENCABEZADO ── */
.markalar .iconw {
width: 72px !important;
height: 72px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #1e70ff 0%, #0c5adb 100%) !important;
box-shadow: 0 12px 32px rgba(12,90,219,0.35) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 20px !important;
line-height: normal !important;
}
.markalar .iconw i {
font-size: 3.2rem !important;
color: #ffffff !important;
background: none !important;
-webkit-text-fill-color: #ffffff !important;
-webkit-background-clip: unset !important;
}
/* ── TÍTULO ── */
.markalar .h2-baslik-hizmetler-21 {
font-family: 'DM Sans', 'Poppins', sans-serif !important;
font-size: 3rem !important;
font-weight: 800 !important;
color: #ffffff !important;
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
display: block !important;
margin-bottom: 10px !important;
background: none !important;
}
/* ── SUBTÍTULO ── */
.markalar .h2-baslik-hizmetler-21__paragraf {
font-size: 1.5rem !important;
color: rgba(255,255,255,0.5) !important;
font-weight: 400 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* ── CONTENEDOR DE LOGOS ── */
.markalar .h-yazi-margin-kucuk-21 {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 12px !important;
max-width: 960px !important;
margin: 0 auto !important;
}
/* ── CADA LOGO — glassmorphism ── */
.marka {
height: auto !important;
max-height: 84px !important;
width: 162px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 14px 12px !important;
background: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
border-radius: 16px !important;
box-shadow: none !important;
opacity: 1 !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
filter: brightness(0) invert(1) opacity(0.75) !important;
transition:
transform 0.32s cubic-bezier(0.4,0,0.2,1),
box-shadow 0.32s ease,
border-color 0.32s ease,
filter 0.32s ease,
background 0.32s ease !important;
cursor: pointer;
}
.marka:hover {
background: rgba(255,255,255,0.14) !important;
border-color: rgba(100,160,255,0.5) !important;
transform: translateY(-7px) scale(1.05) !important;
box-shadow:
0 22px 42px rgba(0,0,0,0.35),
0 0 0 1px rgba(100,160,255,0.3),
inset 0 1px 0 rgba(255,255,255,0.2) !important;
filter: brightness(0) invert(1) opacity(1) !important;
}
/* ── SEPARADOR ENTRE FILAS ── */
.markalar .bosluk333 {
width: 100% !important;
flex-basis: 100% !important;
height: 0 !important;
margin: 2px 0 !important;
background: none !important;
}
/* ── ANIMACIONES ── */
@keyframes markalar-bar-rise {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
@keyframes markalar-bar-pulse {
0%, 100% { opacity: .18; }
50% { opacity: .32; }
}
@keyframes markalar-line-draw {
from { stroke-dashoffset: 800; }
to { stroke-dashoffset: 0; }
}
@keyframes markalar-dot-pop {
0% { r: 0; opacity: 0; }
70% { opacity: .6; }
100% { r: 3.5; opacity: .4; }
}
/* ── RESPONSIVE ── */
@media only screen and (max-width: 56.25em) {
.markalar {
padding: 5rem 2rem 0 !important;
}
.marka {
width: 130px !important;
max-height: 70px !important;
padding: 10px !important;
}
.marka:hover {
transform: translateY(-4px) scale(1.03) !important;
}
.markalar .h-yazi-margin-kucuk-21 {
padding-bottom: 180px !important;
}
.markalar-charts-svg {
height: 160px !important;
}
}
/* ============================================================
SECCIÓN "ESTUDIOS" — .seccion-estudios
Grid estático sin Swiper — diseño glassmorphism azul oscuro
============================================================ */
.seccion-estudios {
position: relative !important;
background: linear-gradient(160deg, #0a1628 0%, #0c3a8f 55%, #0a1628 100%) !important;
padding: 7rem 0 8rem !important;
overflow: hidden;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
.seccion-estudios::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
z-index: 0;
}
.seccion-estudios::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(30,112,255,0.10) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.seccion-estudios .container,
.seccion-estudios .row,
.seccion-estudios .col-12 {
position: relative;
z-index: 2;
}
/* ── Encabezado ── */
.seccion-estudios .icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 72px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, #1e70ff 0%, #0c5adb 100%) !important;
box-shadow: 0 12px 32px rgba(12,90,219,0.35) !important;
margin-bottom: 18px !important;
padding: 0 !important;
}
.seccion-estudios .icon i {
font-size: 3rem !important;
color: #fff !important;
background: none !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: unset !important;
}
.seccion-estudios .h2-baslik-hizmetler-yorum {
font-family: 'DM Sans', 'Poppins', sans-serif !important;
font-size: 3.2rem !important;
font-weight: 800 !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #ffffff !important;
color: #ffffff !important;
letter-spacing: -0.02em !important;
display: inline-block !important;
}
.seccion-estudios .h2-baslik-hizmetler-yorum__yorum {
font-size: 1.5rem !important;
color: rgba(255,255,255,0.48) !important;
font-weight: 400 !important;
text-align: center !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* ── Grid ── */
.estudios-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 0 15px;
width: 100%;
}
/* ── Tarjeta ── */
.estudio-card {
display: flex;
flex-direction: column;
width: calc(33.333% - 14px);
min-width: 260px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.13);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: transform .32s cubic-bezier(.4,0,.2,1),
box-shadow .32s, border-color .32s, background .32s;
}
.estudio-card:hover {
transform: translateY(-8px);
background: rgba(255,255,255,0.12);
border-color: rgba(100,160,255,0.5);
box-shadow: 0 24px 52px rgba(0,0,0,0.4),
0 0 0 1px rgba(100,160,255,0.3);
}
/* ── Imagen ── */
.estudio-card__img-wrap {
overflow: hidden;
flex-shrink: 0;
}
.estudio-card__img,
.seccion-estudios .haber-gorsel {
width: 100% !important;
height: 190px !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
filter: brightness(0.82) saturate(0.9) !important;
transition: transform .45s ease, filter .45s ease !important;
}
.estudio-card:hover .estudio-card__img,
.estudio-card:hover .haber-gorsel {
transform: scale(1.06) !important;
filter: brightness(0.95) saturate(1.1) !important;
}
/* ── Cuerpo ── */
.estudio-card__body,
.seccion-estudios .post-kutu {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
padding: 20px 22px 22px !important;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
transform: none !important;
-webkit-transform: none !important;
width: auto !important;
text-align: left !important;
}
/* ── Título ── */
.estudio-card__title,
.seccion-estudios .baslik-3 {
font-size: 1.65rem !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.35 !important;
margin-bottom: 8px !important;
text-align: left !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* ── Descripción ── */
.estudio-card__desc,
.seccion-estudios .post-kutu--yazi {
font-size: 1.3rem !important;
color: rgba(255,255,255,0.5) !important;
line-height: 1.6 !important;
text-align: left !important;
margin-bottom: 16px !important;
flex: 1 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
}
/* ── Fecha ── */
.seccion-estudios .datesection {
font-size: 1.1rem !important;
color: rgba(96,165,250,0.7) !important;
margin-bottom: 8px !important;
display: block !important;
}
/* ── Botón wrap ── */
.estudio-card__btn-wrap {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: left;
}
/* ── Botón ── */
.estudio-card__btn,
.seccion-estudios .custom-button {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 9px 20px !important;
background: rgba(30,112,255,0.2) !important;
border: 1px solid rgba(30,112,255,0.4) !important;
border-radius: 999px !important;
color: #93c5fd !important;
font-size: 1.3rem !important;
font-weight: 600 !important;
font-family: 'DM Sans', 'Poppins', sans-serif;
text-decoration: none !important;
transition: background .25s, border-color .25s, color .25s !important;
width: fit-content !important;
}
.estudio-card__btn:hover,
.seccion-estudios .custom-button:hover {
background: rgba(30,112,255,0.4) !important;
border-color: #60a5fa !important;
color: #fff !important;
}
/* ── Responsive ── */
@media only screen and (max-width: 900px) {
.estudio-card {
width: calc(50% - 10px);
}
}
@media only screen and (max-width: 600px) {
.estudio-card {
width: 100%;
min-width: unset;
}
.seccion-estudios {
padding: 5rem 0 6rem !important;
}
}
/* ================================================================
TARJETAS FLIP — MÓVIL/TÁCTIL (paketler, paketler2, paketler3, paketler5)
NOTA: La lógica show/hide la maneja mobile-flip.js con estilos
INLINE (máxima especificidad). Este bloque solo define layout visual.
================================================================ */
@media (max-width: 900px), (hover: none) {
/* ── Contenedores ── */
.paketler, .paketler2, .paketler3, .paketler5 {
height: auto !important; perspective: none !important; -moz-perspective: none !important;
border-radius: 18px !important; overflow: hidden !important;
box-shadow: 0 4px 20px rgba(12,90,219,0.12) !important;
margin-bottom: 16px !important; position: relative !important;
}
/* ── Ambas caras: flujo normal ── */
.paketler__on, .paketler2__on, .paketler3__on, .paketler5__on {
position: relative !important; height: auto !important; width: 100% !important;
transform: none !important; backface-visibility: visible !important;
box-shadow: none !important; transition: none !important;
}
/* ── Gorsel: altura libre ── */
.paketler__gorsel,
.paketler2__gorsel, .paketler2__gorsel--1, .paketler2__gorsel--2,
.paketler2__gorsel--3,.paketler2__gorsel--4,.paketler2__gorsel--5,.paketler2__gorsel--6,
.paketler3__gorsel, .paketler3__gorsel--1,.paketler3__gorsel--2,.paketler3__gorsel--3,
.paketler5__gorsel, .paketler5__gorsel--1,.paketler5__gorsel--2,
.paketler5__gorsel--3,.paketler5__gorsel--4,.paketler5__gorsel--5,.paketler5__gorsel--6 {
height: auto !important; min-height: unset !important;
overflow: visible !important; border-radius: 0 !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; padding: 24px 20px 16px !important;
}
/* ── Íconos ── */
.paketler2__icerik .iconw, .paketler5__icerik .iconw {
width: 60px !important; height: 60px !important; border-radius: 50% !important;
margin: 0 auto 10px !important; display: flex !important;
align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
}
/* ── Textos frontales ── */
.paketler2__icerik { padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; }
.paketler2__icerik .baslik-3white,
.paketler5__icerik .baslik-3 { font-size: 16px !important; text-align: center !important; line-height: 1.3 !important; color: #0d1b3e !important; margin: 0 !important; }
.paketler2__icerik .services-kutu2--yazi,
.paketler5__icerik .services-kutu2--yazi1 { font-size: 13px !important; text-align: center !important; line-height: 1.65 !important; color: #6b7a99 !important; margin: 0 !important; }
.paketler3__gorsel .baslik-sol { font-size: 16px !important; text-align: center !important; line-height: 1.3 !important; margin: 0 !important; }
.paketler3__gorsel .services-kutu2--yazi { font-size: 13px !important; text-align: center !important; margin-top: 6px !important; }
/* ── Textos reverso ── */
.paketler2__pr-kutu .baslik-sol,
.paketler5__pr-kutu .baslik-3 { font-size: 17px !important; text-align: center !important; color: #fff !important; }
.paketler2__pr-kutu .services-kutu2--yazi,
.paketler5__pr-kutu .services-kutu2--yazi1 { font-size: 13px !important; text-align: center !important; color: rgba(255,255,255,0.85) !important; }
/* ── Número decorativo ── */
.paketler2__gorsel--1::before,.paketler2__gorsel--2::before,.paketler2__gorsel--3::before,
.paketler2__gorsel--4::before,.paketler2__gorsel--5::before,.paketler2__gorsel--6::before,
.paketler5__gorsel--1::before,.paketler5__gorsel--2::before,.paketler5__gorsel--3::before,
.paketler5__gorsel--4::before,.paketler5__gorsel--5::before,.paketler5__gorsel--6::before {
font-size: 38px !important; top: 8px !important; right: 12px !important;
}
/* ── Indicador táctil ── */
.paketler__on--onyazi::after,
.paketler2__on--onyazi::after, .paketler3__on--onyazi::after, .paketler5__on--onyazi::after {
content: '↕ Toca para ver más';
display: block; text-align: center; font-size: 11px; font-weight: 600;
color: rgba(12,90,219,0.50); letter-spacing: 0.04em;
padding: 10px 0 14px; background: #fff; cursor: pointer;
}
.paketler.tc-flipped .paketler__on--onyazi::after,
.paketler2.tc-flipped .paketler2__on--onyazi::after,
.paketler3.tc-flipped .paketler3__on--onyazi::after,
.paketler5.tc-flipped .paketler5__on--onyazi::after { display: none !important; }
.paketler.tc-flipped .paketler__on--arkayazi::after,
.paketler2.tc-flipped .paketler2__on--arkayazi::after,
.paketler3.tc-flipped .paketler3__on--arkayazi::after,
.paketler5.tc-flipped .paketler5__on--arkayazi::after {
content: '↩ Volver';
display: block; text-align: center; font-size: 11px; font-weight: 600;
color: rgba(255,255,255,0.45); padding: 12px 0 16px; cursor: pointer;
}
/* ── Grid columna única ── */
.services1 .tabloservices, .services-it .tabloservices {
display: flex !important; flex-direction: column !important; padding: 0 14px !important;
}
.services1 .tabloservices .tablo--1-ve-3,
.services-it .tabloservices .tablo--1-ve-3 {
width: 100% !important; float: none !important; height: auto !important;
min-height: unset !important; position: static !important;
}
.paketler-alani .tablo {
display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 0 14px !important;
}
.paketler-alani .tablo > .tablo--1-ve-3 {
width: 100% !important; float: none !important; height: auto !important; min-height: unset !important; position: static !important;
}
/* ── Títulos de sección ── */
.services1 .h2-baslik-hizmetler-21,
.services-it .h2-baslik-hizmetler-2,
.paketler-alani .h2-baslik-hizmetler-2 { font-size: 22px !important; line-height: 1.2 !important; text-align: center !important; }
.paketler-alani .h2-baslik-hizmetler-2__paragraf { font-size: 14px !important; text-align: center !important; padding: 0 14px !important; }
}
/* ================================================================
FIX DEFINITIVO — tarjetas flip móvil: ocultar reverso por CSS
Puesto al FINAL de services-modern.css para ganar la cascada.
El reverso solo es visible cuando JS añade .tc-flipped.
================================================================ */
@media (max-width: 900px), (hover: none) {
/* Ocultar reverso por defecto — con display block anulado */
.paketler__on--arkayazi,
.paketler2__on--arkayazi,
.paketler3__on--arkayazi,
.paketler5__on--arkayazi {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Mostrar reverso solo cuando la tarjeta está volteada */
.paketler.tc-flipped .paketler__on--arkayazi,
.paketler2.tc-flipped .paketler2__on--arkayazi,
.paketler3.tc-flipped .paketler3__on--arkayazi,
.paketler5.tc-flipped .paketler5__on--arkayazi {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
overflow: visible !important;
pointer-events: auto !important;
}
/* Ocultar frente cuando la tarjeta está volteada */
.paketler.tc-flipped .paketler__on--onyazi,
.paketler2.tc-flipped .paketler2__on--onyazi,
.paketler3.tc-flipped .paketler3__on--onyazi,
.paketler5.tc-flipped .paketler5__on--onyazi {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}