/* =============================================================================
ETKIN AKADEMİ — MAIN STYLESHEET
style.css
Index:
1. Design System & Custom Properties
2. Reset & Base Styles
3. Typography System
4. Layout Utilities
5. Custom Button Styles
6. Skip Link (Accessibility)
7. Site Header
8. Fullscreen Navigation (Mobile)
9. Hero Section
10. Footer Placeholder
============================================================================= */
/* =============================================================================
1. DESIGN SYSTEM & CUSTOM PROPERTIES
============================================================================= */
:root {
/* -------------------------------------------------------------------------
COLOR PALETTE
Sofistike, eğitim kurumuna yakışan koyu lacivert + sıcak altın sistemi.
WCAG AA kontrast uyumlu.
-------------------------------------------------------------------------- */
/* Brand Blues (Ana renk ailesi) */
--color-primary: #1b2d4f; /* Deep Navy — güven, otorite */
--color-primary-dark: #0f1c30; /* Darker Navy */
--color-primary-mid: #243d6a; /* Mid Navy */
--color-primary-light: #2e507e; /* Lighter Navy */
/* Accent (Mavi — dinamizm, güven) */
--color-accent: #1e72e0; /* Sky Blue */
--color-accent-hover: #3a88f2; /* Lighter Blue (hover) */
--color-accent-muted: #c5dcff; /* Very Light Blue (bg tint) */
--color-on-accent: #ffffff; /* Accent arka plan üzerindeki metin */
/* Neutral / Text */
--color-dark: #0f1c30; /* Near Black */
--color-text: #1a2535; /* Dark Charcoal — primary text */
--color-muted: #6b7a8d; /* Gray-Blue — secondary text */
--color-subtle: #9ba8b8; /* Light muted */
/* Surfaces / Borders */
--color-border: #dfe4eb; /* Light border */
--color-border-light: #eef1f5; /* Very light border */
--color-background: #ffffff; /* White */
--color-surface: #f7f8fa; /* Light surface */
--color-surface-2: #eef0f5; /* Slightly darker surface */
/* -------------------------------------------------------------------------
TYPOGRAPHY
-------------------------------------------------------------------------- */
--font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
/* -------------------------------------------------------------------------
FLUID FONT SCALE (clamp — desktop → mobile graceful scaling)
-------------------------------------------------------------------------- */
--text-xs: clamp(0.6875rem, 1.2vw, 0.75rem); /* 11–12px */
--text-sm: clamp(0.8125rem, 1.5vw, 0.875rem); /* 13–14px */
--text-base: clamp(0.9375rem, 1.8vw, 1.0625rem); /* 15–17px */
--text-lg: clamp(1.0625rem, 2vw, 1.25rem); /* 17–20px */
--text-xl: clamp(1.1875rem, 2.4vw, 1.5rem); /* 19–24px */
--text-2xl: clamp(1.375rem, 3vw, 2rem); /* 22–32px */
--text-3xl: clamp(1.75rem, 3.8vw, 2.5rem); /* 28–40px */
--text-4xl: clamp(2.125rem, 4.5vw, 3.25rem); /* 34–52px */
--text-5xl: clamp(2.625rem, 5.5vw, 4.25rem); /* 42–68px */
--text-hero: clamp(2.75rem, 6.5vw, 5.5rem); /* 44–88px */
/* -------------------------------------------------------------------------
SPACING SCALE
-------------------------------------------------------------------------- */
--space-2xs: 0.25rem; /* 4px */
--space-xs: 0.5rem; /* 8px */
--space-sm: 1rem; /* 16px */
--space-md: 1.5rem; /* 24px */
--space-lg: 2rem; /* 32px */
--space-xl: 3rem; /* 48px */
--space-2xl: 4rem; /* 64px */
--space-3xl: 6rem; /* 96px */
--space-4xl: 8rem; /* 128px */
/* -------------------------------------------------------------------------
BORDER RADIUS
-------------------------------------------------------------------------- */
--radius-xs: 3px;
--radius-sm: 5px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* -------------------------------------------------------------------------
SHADOWS (Subtle, kurumsal)
-------------------------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(15, 28, 48, 0.06);
--shadow-sm: 0 1px 4px rgba(15, 28, 48, 0.08), 0 1px 2px rgba(15, 28, 48, 0.05);
--shadow-md: 0 4px 14px rgba(15, 28, 48, 0.10), 0 2px 6px rgba(15, 28, 48, 0.07);
--shadow-lg: 0 8px 32px rgba(15, 28, 48, 0.12), 0 4px 12px rgba(15, 28, 48, 0.08);
--shadow-xl: 0 20px 64px rgba(15, 28, 48, 0.15), 0 8px 24px rgba(15, 28, 48, 0.10);
/* -------------------------------------------------------------------------
CONTAINER / LAYOUT
-------------------------------------------------------------------------- */
--container-width: 1340px;
--container-padding: clamp(1.25rem, 4.5vw, 2.75rem);
/* -------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------- */
--header-height: 80px;
--header-height-scrolled: 66px;
--header-height-mobile: 64px;
/* -------------------------------------------------------------------------
TRANSITIONS
-------------------------------------------------------------------------- */
--transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 320ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-enter: 600ms cubic-bezier(0.16, 1, 0.3, 1);
/* -------------------------------------------------------------------------
Z-INDEX SCALE
-------------------------------------------------------------------------- */
--z-base: 1;
--z-raised: 10;
--z-overlay: 100;
--z-header: 1000;
--z-modal: 2000;
--z-toast: 3000;
}
/* =============================================================================
2. RESET & BASE STYLES
============================================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: 400;
line-height: 1.65;
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* Block elements */
img,
video,
svg {
display: block;
max-width: 100%;
}
/* Remove list styles */
ul,
ol {
list-style: none;
}
/* Links */
a {
color: inherit;
text-decoration: none;
}
/* Keyboard focus ring */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* Remove default button styles */
button {
font-family: inherit;
cursor: pointer;
border: none;
background: transparent;
}
/* =============================================================================
3. TYPOGRAPHY SYSTEM
============================================================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.022em;
color: var(--color-text);
}
h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); font-weight: 800; }
h3 { font-size: var(--text-3xl); font-weight: 700; }
h4 { font-size: var(--text-2xl); font-weight: 700; }
h5 { font-size: var(--text-xl); font-weight: 600; }
h6 { font-size: var(--text-lg); font-weight: 600; }
p {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.7;
color: var(--color-muted);
}
strong {
font-weight: 700;
}
/* =============================================================================
4. LAYOUT UTILITIES
============================================================================= */
/* Custom site container (used alongside Bootstrap container) */
.site-container {
width: 100%;
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
/* Visually hidden but accessible to screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* =============================================================================
5. CUSTOM BUTTON STYLES
Bootstrap'ın .btn-primary kullanılmıyor — tamamen custom
============================================================================= */
/* ---- Base button reset ---- */
.btn,
[class*="btn-"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-weight: 600;
letter-spacing: 0.005em;
text-decoration: none;
cursor: pointer;
transition: all var(--transition-base);
border: 2px solid transparent;
white-space: nowrap;
line-height: 1;
position: relative;
}
.btn svg,
[class*="btn-"] svg {
flex-shrink: 0;
stroke-width: 2.5;
transition: transform var(--transition-fast);
}
/* ---- Header CTA button ---- */
.btn-primary-cta {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
border-radius: var(--radius-sm);
background: var(--color-accent);
color: var(--color-on-accent);
border-color: var(--color-accent);
}
.btn-primary-cta svg {
width: 14px;
height: 14px;
}
.btn-primary-cta:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
color: var(--color-on-accent);
transform: translateY(-1px);
}
.btn-primary-cta:active {
transform: translateY(0);
}
.btn-primary-cta:hover svg {
transform: translateX(2px);
}
/* =============================================================================
6. SKIP LINK (Accessibility)
============================================================================= */
.skip-link {
position: absolute;
top: -100px;
left: var(--container-padding);
z-index: var(--z-toast);
display: inline-flex;
padding: 0.625rem 1.25rem;
background: var(--color-accent);
color: var(--color-on-accent);
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 0;
outline: none;
}
/* =============================================================================
7. SITE HEADER
============================================================================= */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-header);
height: var(--header-height);
/* Initial: transparent (over hero) */
background: transparent;
border-bottom: 1px solid transparent;
/* Smooth transitions for all changing properties */
transition:
background var(--transition-base),
height var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base);
}
/* ---- Scrolled state ---- */
.site-header.is-scrolled {
height: var(--header-height-scrolled);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom-color: var(--color-border-light);
box-shadow: 0 1px 0 rgba(15, 28, 48, 0.06), 0 4px 20px rgba(15, 28, 48, 0.04);
}
/* ---- Header inner container ---- */
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
gap: var(--space-lg);
}
/* ---- Logo ---- */
.site-logo {
display: inline-flex;
align-items: center;
gap: 0.5625rem;
flex-shrink: 0;
color: #ffffff;
text-decoration: none;
transition: color var(--transition-fast), opacity var(--transition-fast);
outline: none;
}
.site-logo:hover {
opacity: 0.88;
}
.site-logo:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: var(--radius-xs);
}
.site-header.is-scrolled .site-logo {
color: var(--color-primary);
}
.site-logo__icon {
flex-shrink: 0;
line-height: 0;
transition: color var(--transition-fast);
}
.site-logo__text {
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1;
}
.site-logo__text strong {
font-weight: 800;
}
/* ---- Primary Navigation ---- */
.nav-primary {
flex: 1;
display: flex;
justify-content: center;
overflow: hidden;
}
.nav-primary__list {
display: flex;
align-items: center;
gap: 0.125rem;
}
.nav-primary__link {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.5rem 0.8rem;
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.005em;
color: rgba(255, 255, 255, 0.82);
text-decoration: none;
border-radius: var(--radius-sm);
transition: color var(--transition-fast), background var(--transition-fast);
white-space: nowrap;
}
/* Underline indicator */
.nav-primary__link::after {
content: '';
position: absolute;
bottom: 3px;
left: 0.8rem;
right: 0.8rem;
height: 1.5px;
background: var(--color-accent);
border-radius: 1px;
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--transition-base);
}
.nav-primary__link:hover {
color: #ffffff;
}
.nav-primary__link:hover::after,
.nav-primary__link.active::after {
transform: scaleX(1);
}
.nav-primary__link.active {
color: #ffffff;
}
/* Scrolled state — dark nav */
.site-header.is-scrolled .nav-primary__link {
color: var(--color-muted);
}
.site-header.is-scrolled .nav-primary__link:hover,
.site-header.is-scrolled .nav-primary__link.active {
color: var(--color-primary);
background: var(--color-surface);
}
/* ---- Header Actions ---- */
.header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
/* Override CTA button style when header is transparent */
.site-header:not(.is-scrolled) .btn-primary-cta {
background: transparent;
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.3);
}
.site-header:not(.is-scrolled) .btn-primary-cta:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.65);
color: #ffffff;
transform: none;
box-shadow: none;
}
/* ---- Hamburger / Nav Toggle ---- */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 42px;
height: 42px;
gap: 6px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
flex-shrink: 0;
}
.nav-toggle:hover {
background: rgba(255, 255, 255, 0.1);
}
.site-header.is-scrolled .nav-toggle:hover {
background: var(--color-surface);
}
.nav-toggle:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.nav-toggle__bar {
display: block;
width: 22px;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition:
transform var(--transition-base),
opacity var(--transition-base),
width var(--transition-fast);
transform-origin: center;
pointer-events: none;
}
.site-header.is-scrolled .nav-toggle__bar {
background: var(--color-primary);
}
/* Active (open) hamburger state — transforms to X */
.nav-toggle.is-active .nav-toggle__bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(2) {
opacity: 0;
width: 0;
}
.nav-toggle.is-active .nav-toggle__bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* =============================================================================
8. FULLSCREEN NAVIGATION (Mobile / Tablet)
============================================================================= */
.nav-fullscreen {
position: fixed;
inset: 0;
z-index: calc(var(--z-header) + 50);
background: var(--color-primary-dark);
/* Slide in from right */
transform: translateX(100%);
transition: transform 0.52s cubic-bezier(0.77, 0, 0.175, 1);
overflow-y: auto;
overscroll-behavior: contain;
}
.nav-fullscreen.is-open {
transform: translateX(0);
}
/* Inner layout */
.nav-fullscreen__inner {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 1.25rem var(--container-padding) 2rem;
max-width: 560px;
margin: 0 auto;
}
/* Brand in mobile nav */
.nav-fullscreen__brand {
padding: 0.75rem 0 0;
}
.nav-fullscreen__brand .site-logo {
color: rgba(255, 255, 255, 0.85);
}
/* Close button */
.nav-fullscreen__close {
position: absolute;
top: 1.125rem;
right: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-full);
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
flex-shrink: 0;
}
.nav-fullscreen__close:hover {
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
}
.nav-fullscreen__close:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.nav-fullscreen__close svg {
width: 20px;
height: 20px;
stroke-width: 2;
flex-shrink: 0;
}
/* Nav area */
.nav-fullscreen__nav {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.5rem, 8vh, 4rem) 0 clamp(1.5rem, 4vh, 2.5rem);
}
/* Nav list */
.nav-fullscreen__list {
margin-bottom: clamp(1.75rem, 5vh, 3rem);
}
.nav-fullscreen__list li {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-fullscreen__list li:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Nav links */
.nav-fullscreen__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(0.875rem, 2.5vh, 1.125rem) 0;
font-family: var(--font-heading);
font-size: clamp(1.375rem, 4.5vw, 2rem);
font-weight: 700;
letter-spacing: -0.022em;
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
transition: color var(--transition-fast), padding-left var(--transition-base);
}
.nav-fullscreen__link:hover {
color: #ffffff;
padding-left: 0.5rem;
}
.nav-fullscreen__arrow {
width: 18px;
height: 18px;
stroke-width: 2;
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--transition-fast), transform var(--transition-base);
flex-shrink: 0;
}
.nav-fullscreen__link:hover .nav-fullscreen__arrow {
opacity: 0.6;
transform: translateX(0);
}
/* CTA button in mobile nav */
.nav-fullscreen__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.875rem;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
background: var(--color-accent);
color: var(--color-on-accent);
border-radius: var(--radius-sm);
text-decoration: none;
align-self: flex-start;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.nav-fullscreen__cta:hover {
background: var(--color-accent-hover);
color: var(--color-on-accent);
transform: translateX(2px);
}
.nav-fullscreen__cta svg {
width: 16px;
height: 16px;
stroke-width: 2.5;
}
/* Footer in mobile nav */
.nav-fullscreen__footer {
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.07);
margin-top: var(--space-md);
}
.nav-fullscreen__contact {
display: flex;
flex-wrap: wrap;
gap: 0.5rem var(--space-sm);
align-items: center;
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.35);
margin: 0;
}
.nav-fullscreen__contact a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: color var(--transition-fast);
}
.nav-fullscreen__contact a:hover {
color: rgba(255, 255, 255, 0.9);
}
/* ---- Nav Backdrop ---- */
.nav-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--z-header) + 40);
background: rgba(8, 14, 24, 0.65);
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-base);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.nav-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
/* =============================================================================
9. HERO SECTION
============================================================================= */
.hero {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh; /* Dynamic viewport unit — better on mobile */
overflow: hidden;
/* *** Sophisticated dark navy gradient — shows when no photo/video is present ***
Replace or layer with actual institution hero image/video.
The gradient creates atmospheric depth with subtle blue and gold accents. */
background-color: var(--color-primary-dark);
background-image:
/* Blue luminescence (right-center) */
radial-gradient(ellipse 70% 80% at 70% 45%, rgba(46, 80, 126, 0.22) 0%, transparent 60%),
/* Warm accent hint (bottom-left) */
radial-gradient(ellipse 50% 50% at 12% 80%, rgba(30,114,224, 0.06) 0%, transparent 55%),
/* Main gradient */
linear-gradient(158deg, #0b1825 0%, #121f35 28%, #182d4e 58%, #101c30 100%);
}
/* ---- Background media (image / video) ---- */
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.hero__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* ---- Overlay (darkens image/video for readability) ---- */
.hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
/* Strong on left (content), lighter on right (visual breathing room) */
background: linear-gradient(
155deg,
rgba(9, 16, 28, 0.88) 0%,
rgba(15, 28, 50, 0.82) 40%,
rgba(20, 36, 62, 0.68) 70%,
rgba(18, 30, 52, 0.55) 100%
);
}
/* ---- Dot grid texture (very subtle, adds depth) ---- */
.hero__dots {
position: absolute;
inset: 0;
z-index: 2;
background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 42px 42px;
/* Fade out at edges */
mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 20%, transparent 100%);
pointer-events: none;
}
/* ---- Decorative concentric rings (desktop, right side) ---- */
/* Positioned as a zero-size anchor, rings extend outward via transform */
.hero__deco {
position: absolute;
right: 6%;
top: 48%;
width: 0;
height: 0;
z-index: 2;
pointer-events: none;
}
.hero__deco-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(30,114,224, 0.1);
/* Center all rings on the anchor point */
transform: translate(-50%, -50%);
top: 0;
left: 0;
}
/* Ring sizes — largest creates partial circle visible from right edge */
.hero__deco-ring--1 {
width: min(64vw, 760px);
height: min(64vw, 760px);
border-color: rgba(30,114,224, 0.06);
}
.hero__deco-ring--2 {
width: min(44vw, 510px);
height: min(44vw, 510px);
border-color: rgba(30,114,224, 0.09);
}
.hero__deco-ring--3 {
width: min(26vw, 300px);
height: min(26vw, 300px);
border-color: rgba(30,114,224, 0.15);
}
/* ---- Hero main container ---- */
.hero__container {
position: relative;
z-index: 3;
flex: 1;
display: flex;
align-items: center;
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
padding-top: calc(var(--header-height) + var(--space-2xl));
padding-bottom: var(--space-2xl);
}
/* ---- Hero content ---- */
.hero__content {
max-width: 740px;
position: relative;
}
/* ---- Eyebrow / Overline ---- */
.hero__eyebrow {
display: flex;
align-items: center;
gap: 0.875rem;
margin-bottom: 1.375rem;
font-family: var(--font-body);
font-size: clamp(0.65rem, 1.2vw, 0.75rem);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
line-height: 1;
}
.hero__eyebrow-line {
display: inline-block;
flex-shrink: 0;
width: 34px;
height: 1.5px;
background: var(--color-accent);
border-radius: 2px;
}
/* ---- Hero title (H1) ---- */
.hero__title {
font-family: var(--font-heading);
font-size: var(--text-hero);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.028em;
color: #ffffff;
margin-bottom: 1.625rem;
}
/* Accent text within title ("Değer Katan") */
.hero__title-accent {
font-style: normal;
color: var(--color-accent);
}
/* Hide explicit line breaks below certain widths (responsive) */
.hero__title-br {
display: none;
}
/* ---- Hero description ---- */
.hero__description {
font-family: var(--font-body);
font-size: clamp(0.9375rem, 1.7vw, 1.125rem);
font-weight: 400;
line-height: 1.78;
color: rgba(255, 255, 255, 0.62);
margin-bottom: var(--space-xl);
max-width: 500px;
}
/* Explicit
for description — shown on larger screens */
.hero__br {
display: none;
}
/* ---- Hero action buttons ---- */
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem;
}
/* ---- Hero buttons (override base .btn styles) ---- */
.hero__btn {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.9375rem 1.875rem;
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.008em;
text-decoration: none;
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition: all var(--transition-base);
white-space: nowrap;
cursor: pointer;
line-height: 1;
}
.hero__btn svg {
width: 16px;
height: 16px;
stroke-width: 2.5;
flex-shrink: 0;
transition: transform var(--transition-fast);
}
.hero__btn:hover svg {
transform: translateX(3px);
}
/* Primary (gold fill) */
.hero__btn--primary {
background: var(--color-accent);
color: var(--color-on-accent);
border-color: var(--color-accent);
}
.hero__btn--primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
color: var(--color-on-accent);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(30,114,224, 0.28);
}
.hero__btn--primary:active {
transform: translateY(0);
box-shadow: none;
}
/* Ghost (transparent, white border) */
.hero__btn--ghost {
background: transparent;
color: rgba(255, 255, 255, 0.78);
border-color: rgba(255, 255, 255, 0.2);
}
.hero__btn--ghost:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.48);
color: #ffffff;
transform: translateY(-1px);
}
.hero__btn--ghost:active {
transform: translateY(0);
}
/* ---- Trust Indicators (modern floating cards) ---- */
.hero__trust {
position: relative;
z-index: 3;
padding: 0 var(--container-padding);
margin-top: -1.75rem;
}
.hero__trust-inner {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
max-width: var(--container-width);
margin: 0 auto;
padding: 0.875rem;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-full);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
.hero__trust-item {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1rem 0.625rem 0.625rem;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-body);
font-size: clamp(0.78rem, 1.4vw, 0.875rem);
font-weight: 600;
color: rgba(255, 255, 255, 0.82);
white-space: nowrap;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hero__trust-item:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-2px);
}
/* Trust icon badges */
.hero__trust-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hero__trust-icon svg {
width: 16px;
height: 16px;
stroke-width: 2;
flex-shrink: 0;
}
/* Icon color variants */
.hero__trust-icon--blue {
background: linear-gradient(135deg, #1e72e0 0%, #3a88f2 100%);
}
.hero__trust-icon--blue svg {
stroke: #fff;
}
.hero__trust-icon--green {
background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}
.hero__trust-icon--green svg {
stroke: #fff;
}
.hero__trust-icon--amber {
background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.hero__trust-icon--amber svg {
stroke: #fff;
}
/* Trust label */
.hero__trust-label {
color: rgba(255, 255, 255, 0.9);
}
/* Divider (artık kullanılmıyor ama korunuyor) */
.hero__trust-divider {
display: none;
flex-shrink: 0;
width: 1px;
height: 22px;
background: rgba(255, 255, 255, 0.1);
margin: 0 var(--space-lg);
}
/* ---- Scroll indicator (vertical line) ---- */
.hero__scroll {
position: absolute;
bottom: 6rem; /* Sits above the trust bar */
right: clamp(1.5rem, 4vw, 3.5rem);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
}
.hero__scroll-line {
width: 1.5px;
height: 54px;
border-radius: 2px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.32) 100%
);
animation: heroScrollPulse 2.4s ease-in-out infinite;
}
@keyframes heroScrollPulse {
0%, 100% {
opacity: 0.25;
transform: scaleY(0.8) translateY(-4px);
}
50% {
opacity: 0.9;
transform: scaleY(1) translateY(4px);
}
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.hero__scroll-line {
animation: none;
opacity: 0.45;
}
}
/* =============================================================================
10. LOGO — WHITE VERSION (Header transparent + Footer dark bg)
============================================================================= */
/* Logo image base */
.site-logo__img {
display: block;
height: 40px;
width: auto;
transition: filter var(--transition-base), opacity var(--transition-base);
}
/* On transparent header (dark hero bg): make logo white */
.site-header:not(.is-scrolled) .site-logo__img {
filter: brightness(1) invert(1);
}
/* On scrolled header (white bg): original dark logo */
.site-header.is-scrolled .site-logo__img {
filter: none;
}
/* is-static = non-hero pages, always solid header */
.site-header.is-static .site-logo__img {
filter: none;
}
/* White logo in mobile nav (dark bg) */
.site-logo__img--white {
filter: brightness(0) invert(1);
}
/* =============================================================================
11. SHARED SECTION PATTERNS
Reusable typography + layout components across all sections
============================================================================= */
/* ---- Section Eyebrow / Overline ---- */
.section__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-body);
font-size: clamp(0.65rem, 1.1vw, 0.75rem);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1rem;
line-height: 1;
}
.section__eyebrow::before {
content: '';
display: block;
width: 26px;
height: 1.5px;
background: var(--color-accent);
border-radius: 2px;
flex-shrink: 0;
}
/* On dark backgrounds */
.section__eyebrow--light {
color: var(--color-accent-hover);
}
.section__eyebrow--light::before {
background: var(--color-accent-hover);
}
/* ---- Two-column section header (left title / right desc+link) ---- */
.section-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: end;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-header--centered {
grid-template-columns: 1fr;
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.section-header__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.024em;
color: var(--color-text);
margin-bottom: 0;
}
.section-header__desc {
font-size: var(--text-base);
line-height: 1.72;
color: var(--color-muted);
margin-bottom: var(--space-md);
}
.section-header__desc--center {
margin-left: auto;
margin-right: auto;
max-width: 500px;
}
.section-header__link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: gap var(--transition-fast), color var(--transition-fast);
white-space: nowrap;
}
.section-header__link svg {
width: 14px;
height: 14px;
stroke-width: 2.5;
transition: transform var(--transition-fast);
}
.section-header__link:hover {
color: var(--color-accent);
}
.section-header__link:hover svg {
transform: translateX(3px);
}
/* =============================================================================
12. HAKKIMIZDA (ABOUT) SECTION
============================================================================= */
.about-section {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--color-background);
overflow: hidden;
}
.about-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* ---- Two-col header ---- */
.about-header {
display: grid;
grid-template-columns: 5fr 7fr;
gap: clamp(2.5rem, 6vw, 6rem);
align-items: start;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.about-header__left {
position: sticky;
top: calc(var(--header-height-scrolled) + 2rem);
/* overflow: visible — karelerin taşmasına izin ver */
}
/* İçerik z-index — kareler arkada kalır */
.about-header__left > *:not(.about-deco-sq) {
position: relative;
z-index: 1;
}
/* ---- Dekoratif arka plan kareleri ---- */
.about-deco-sq {
position: absolute;
display: block;
pointer-events: none;
will-change: transform;
}
/*
* Kare 1 — Büyük, diyagonal çizgili navy blok
* Başlığın sol-üst köşesinin arkasında konumlanır.
*/
.about-deco-sq--1 {
width: clamp(180px, 85%, 240px);
aspect-ratio: 1;
top: -1.25rem;
left: -1.5rem;
z-index: 0;
border: 1.5px solid rgba(27, 45, 79, 0.08);
border-radius: 14px;
transform: rotate(-7deg);
background: rgba(27, 45, 79, 0.025);
box-shadow:
0 8px 32px rgba(27, 45, 79, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
/* Hover'da çok hafif genişler (section-anim ile birlikte) */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Kare 1 iç diyagonal çizgi deseni */
.about-deco-sq__inner {
display: block;
position: absolute;
inset: 0;
border-radius: inherit;
background: repeating-linear-gradient(
-45deg,
transparent 0px,
transparent 9px,
rgba(27,45,79,0.04) 9px,
rgba(27,45,79,0.04) 10px
);
}
/*
* Kare 2 — Küçük, altın bordürlü aksan karesi
* Başlığın sağ-alt köşesinde float eder.
*/
.about-deco-sq--2 {
width: clamp(70px, 25%, 96px);
aspect-ratio: 1;
/* "Bir Uzmanlık." satırının sağında konumlanır */
bottom: 0;
right: 0.5rem;
z-index: 0;
background: rgba(30,114,224, 0.055);
border: 2.5px solid rgba(30,114,224, 0.24);
border-radius: 10px;
transform: rotate(14deg);
box-shadow:
0 4px 20px rgba(30,114,224, 0.08),
inset 0 0 0 5px rgba(30,114,224, 0.04);
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Bölüm görünüme girince kareleri hafifçe canlandır */
.section-anim.is-visible .about-deco-sq--1 {
transform: rotate(-7deg) translateY(-4px);
}
.section-anim.is-visible .about-deco-sq--2 {
transform: rotate(14deg) translateY(4px);
}
.about-header__title {
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.026em;
color: var(--color-text);
margin-bottom: 1.5rem;
}
/* Gold accent line below title */
.about-header__accent-line {
width: 48px;
height: 3px;
background: var(--color-accent);
border-radius: 2px;
}
.about-header__right {
padding-top: 0.25rem;
}
.about-header__lead {
font-family: var(--font-body);
font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
font-weight: 500;
line-height: 1.65;
color: var(--color-text);
margin-bottom: 1.25rem;
}
.about-header__body {
font-size: var(--text-base);
line-height: 1.78;
color: var(--color-muted);
margin-bottom: var(--space-lg);
}
.about-header__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
border-bottom: 1.5px solid var(--color-accent);
padding-bottom: 1px;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.about-header__link svg {
width: 14px;
height: 14px;
stroke-width: 2.5;
transition: transform var(--transition-fast);
}
.about-header__link:hover {
color: var(--color-accent);
border-color: var(--color-accent);
}
.about-header__link:hover svg {
transform: translateX(3px);
}
/* ---- Stats ---- */
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* NOT: responsive.css'de override edilir */
gap: var(--space-lg);
padding-top: clamp(2rem, 4vw, 3.5rem);
border-top: 1px solid var(--color-border);
}
.about-stat {
padding: var(--space-sm) 0;
}
.about-stat__number {
display: block;
font-family: var(--font-heading);
font-size: clamp(2.25rem, 4vw, 3.25rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--color-primary);
margin-bottom: 0.625rem;
}
.about-stat__label {
display: block;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-muted);
line-height: 1.4;
}
/* =============================================================================
13. KURSLARIMIZ (COURSES) SECTION
============================================================================= */
.courses-section {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--color-surface);
}
.courses-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* ---- Category Filter Tabs ---- */
.course-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
a.course-filter__btn,
.course-filter__btn {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.125rem;
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-muted);
background: var(--color-background);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
text-decoration: none;
transition: all var(--transition-fast);
white-space: nowrap;
}
.course-filter__btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.course-filter__btn.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
/* ---- Course Grid ---- */
.courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* ---- Course Card ---- */
.course-card {
background: var(--color-background);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
display: flex;
flex-direction: column;
}
.course-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-border);
}
.course-card__link {
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
/* Card image area */
.course-card__image {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
flex-shrink: 0;
}
/* Placeholder image (replace with actual ![]()
) */
.course-card__img-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-card:hover .course-card__img-placeholder {
transform: scale(1.04);
}
.course-card__img-placeholder svg {
width: 36px;
height: 36px;
stroke: rgba(255, 255, 255, 0.4);
stroke-width: 1.5;
}
/* Placeholder color variants per category */
.course-card__img-placeholder--mavi { background: linear-gradient(140deg, #1b3a6e 0%, #2a5298 100%); }
.course-card__img-placeholder--yesil { background: linear-gradient(140deg, #1a4a3a 0%, #2e7d5e 100%); }
.course-card__img-placeholder--altin { background: linear-gradient(140deg, #5c3d10 0%, #1e72e0 100%); }
.course-card__img-placeholder--lacivert{ background: linear-gradient(140deg, #0f1c30 0%, #1b2d4f 100%); }
.course-card__img-placeholder--teal { background: linear-gradient(140deg, #0d3d40 0%, #1a6b70 100%); }
.course-card__img-placeholder--mor { background: linear-gradient(140deg, #2d1b5a 0%, #5a3a9e 100%); }
/* Category badge */
.course-card__badge {
position: absolute;
top: 0.875rem;
left: 0.875rem;
display: inline-flex;
padding: 0.25rem 0.625rem;
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: var(--radius-xs);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Badge color per category */
.course-card__badge--pazarlama { background: rgba(27, 58, 110, 0.75); color: #a8c4ff; }
.course-card__badge--ik { background: rgba(26, 74, 58, 0.75); color: #7dd4b0; }
.course-card__badge--gelisim { background: rgba(92, 61, 16, 0.75); color: #f0c875; }
.course-card__badge--yonetim { background: rgba(15, 28, 48, 0.75); color: #9ab0cc; }
.course-card__badge--satis { background: rgba(13, 61, 64, 0.75); color: #7dcdd0; }
/* Card body */
.course-card__body {
flex: 1;
padding: 1.375rem 1.5rem 1rem;
}
.course-card__title {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--color-text);
margin-bottom: 0.5rem;
transition: color var(--transition-fast);
}
.course-card:hover .course-card__title {
color: var(--color-primary);
}
.course-card__desc {
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-muted);
margin-bottom: 1.125rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-card__meta {
display: flex;
flex-wrap: wrap;
gap: 0.375rem var(--space-sm);
}
.course-card__meta-item {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--color-subtle);
}
.course-card__meta-item svg {
width: 13px;
height: 13px;
stroke-width: 2;
flex-shrink: 0;
}
/* Card footer */
.course-card__footer {
padding: 0.875rem 1.5rem 1.25rem;
border-top: 1px solid var(--color-border-light);
margin-top: auto;
}
.course-card__cta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-primary);
transition: gap var(--transition-fast), color var(--transition-fast);
}
.course-card__cta svg {
width: 13px;
height: 13px;
stroke-width: 2.5;
transition: transform var(--transition-fast);
}
.course-card:hover .course-card__cta {
color: var(--color-accent);
}
.course-card:hover .course-card__cta svg {
transform: translateX(3px);
}
/* =============================================================================
14. EĞİTMENLER (INSTRUCTORS) SECTION
============================================================================= */
.instructors-section {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--color-background);
overflow: hidden;
}
.instructors-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* Swiper override — show overflow for peek effect */
.instructors-section .swiper {
overflow: visible;
margin-top: clamp(2rem, 4vw, 3.5rem);
}
.instructors-section .swiper-wrapper {
align-items: stretch;
}
/* ---- Instructor Card ---- */
/* ---- Instructor Card — Modern ---- */
.instructor-card {
background: var(--color-surface);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: 2rem 1.5rem 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.instructor-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
transform: translateY(-4px);
}
/* ---- Photo wrap — circle frame ---- */
.instructor-card__photo-wrap {
margin-bottom: 1.25rem;
position: relative;
}
.instructor-card__photo {
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 800;
color: #ffffff;
letter-spacing: 0.01em;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.14);
border: 3px solid #fff;
outline: 2px solid var(--color-border-light);
}
/* Gerçek fotoğraf varsa */
.instructor-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 50%;
display: block;
}
/* Placeholder gradyan renkleri */
.instructor-card__photo--1 { background: linear-gradient(140deg, #1b3a6e, #2a5298); }
.instructor-card__photo--2 { background: linear-gradient(140deg, #1a4a3a, #2e7d5e); }
.instructor-card__photo--3 { background: linear-gradient(140deg, #5c3d10, #b5832d); }
.instructor-card__photo--4 { background: linear-gradient(140deg, #2d1b5a, #5a3a9e); }
.instructor-card__photo--5 { background: linear-gradient(140deg, #0d3d40, #1a6b70); }
/* ---- Card info ---- */
.instructor-card__info {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.instructor-card__name {
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 700;
letter-spacing: -0.015em;
color: var(--color-text);
margin-bottom: 0.25rem;
}
.instructor-card__title {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.instructor-card__exp {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-muted);
background: var(--color-surface);
border: 1px solid var(--color-border-light);
border-radius: 999px;
padding: 0.25rem 0.75rem;
margin-bottom: 0.875rem;
}
.instructor-card__bio {
font-size: var(--text-sm);
line-height: 1.65;
color: var(--color-muted);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- Swiper Navigation ---- */
.instructors-swiper__nav {
display: flex;
align-items: center;
gap: 0.625rem;
justify-content: flex-end;
margin-top: 2rem;
}
.swiper-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-full);
background: var(--color-background);
border: 1.5px solid var(--color-border);
color: var(--color-primary);
cursor: pointer;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.swiper-btn:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: #ffffff;
}
.swiper-btn:disabled,
.swiper-btn.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
.swiper-btn svg {
width: 17px;
height: 17px;
stroke-width: 2.5;
}
/* =============================================================================
15. ÖĞRENCİ YORUMLARI (TESTIMONIALS) SECTION
============================================================================= */
.testimonials-section {
padding: clamp(4rem, 8vw, 7rem) 0;
background: var(--color-surface);
overflow: hidden;
}
.testimonials-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.testimonials-section .swiper {
margin-top: clamp(2rem, 4vw, 3rem);
overflow: visible;
padding-bottom: 3rem;
}
/* ---- Testimonial Card ---- */
.testimonial-card {
background: var(--color-background);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: 2rem 1.875rem;
height: 100%;
display: flex;
flex-direction: column;
margin: 0;
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.testimonial-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--color-border);
}
.testimonial-card__text {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.78;
color: var(--color-text);
margin-bottom: auto;
padding-bottom: 1.5rem;
flex: 1;
}
.testimonial-card__author {
display: flex;
align-items: center;
gap: 0.875rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-border-light);
flex-wrap: wrap;
}
.testimonial-card__avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 800;
color: #ffffff;
flex-shrink: 0;
}
.testimonial-card__info {
flex: 1;
min-width: 100px;
}
.testimonial-card__name {
display: block;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
font-style: normal;
line-height: 1.3;
}
.testimonial-card__role {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: var(--color-subtle);
margin-top: 0.1875rem;
}
.testimonial-card__stars {
display: flex;
gap: 0.1875rem;
margin-left: auto;
align-self: flex-start;
padding-top: 2px;
}
.testimonial-card__stars svg {
width: 14px;
height: 14px;
stroke: var(--color-accent);
fill: var(--color-accent);
stroke-width: 0;
}
/* Swiper pagination dots */
.testimonials-swiper__pagination {
bottom: 0 !important;
}
.testimonials-swiper__pagination .swiper-pagination-bullet {
background: var(--color-border);
opacity: 1;
width: 8px;
height: 8px;
transition: all var(--transition-fast);
}
.testimonials-swiper__pagination .swiper-pagination-bullet-active {
background: var(--color-primary);
width: 24px;
border-radius: var(--radius-full);
}
/* =============================================================================
16. CTA SECTION
============================================================================= */
.cta-section {
position: relative;
padding: clamp(5rem, 10vw, 8rem) 0;
background: var(--color-primary);
overflow: hidden;
}
.cta-container {
position: relative;
z-index: 2;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
justify-content: center;
}
/* Decorative rings (same pattern as hero) */
.cta-deco {
position: absolute;
right: -5%;
top: 50%;
width: 0;
height: 0;
z-index: 1;
pointer-events: none;
}
.cta-deco__ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.07);
transform: translate(-50%, -50%);
top: 0;
left: 0;
}
.cta-deco__ring--1 {
width: min(50vw, 600px);
height: min(50vw, 600px);
}
.cta-deco__ring--2 {
width: min(30vw, 380px);
height: min(30vw, 380px);
border-color: rgba(255, 255, 255, 0.1);
}
/* Content */
.cta-content {
text-align: center;
max-width: 680px;
}
.cta-content__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
color: #ffffff;
margin-bottom: 1.25rem;
}
.cta-content__desc {
font-family: var(--font-body);
font-size: clamp(1rem, 1.7vw, 1.125rem);
line-height: 1.72;
color: rgba(255, 255, 255, 0.65);
margin-bottom: var(--space-xl);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-br { display: none; }
.cta-content__actions {
display: flex;
flex-wrap: wrap;
gap: 0.875rem;
justify-content: center;
}
/* CTA buttons */
.cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5625rem;
padding: 0.9375rem 1.875rem;
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.005em;
text-decoration: none;
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition: all var(--transition-base);
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.cta-btn svg {
width: 16px;
height: 16px;
stroke-width: 2.5;
transition: transform var(--transition-fast);
}
.cta-btn:hover svg {
transform: translateX(3px);
}
.cta-btn--primary {
background: var(--color-accent);
color: var(--color-on-accent);
border-color: var(--color-accent);
}
.cta-btn--primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
color: var(--color-on-accent);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(30,114,224, 0.25);
}
.cta-btn--ghost {
background: transparent;
color: rgba(255, 255, 255, 0.82);
border-color: rgba(255, 255, 255, 0.22);
}
.cta-btn--ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff;
transform: translateY(-1px);
}
/* =============================================================================
17. SITE FOOTER — Full Version
============================================================================= */
.site-footer {
background: var(--color-primary-dark);
color: rgba(255, 255, 255, 0.55);
}
.footer-container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* ---- Upper Footer ---- */
.footer-upper {
padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-grid {
display: grid;
grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
/* Brand column */
.footer-col--brand {
padding-right: var(--space-lg);
}
.footer-logo {
display: inline-block;
margin-bottom: 1.25rem;
line-height: 0;
}
.footer-logo__img {
height: 36px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.88;
transition: opacity var(--transition-fast);
}
.footer-logo:hover .footer-logo__img {
opacity: 1;
}
.footer-brand__desc {
font-size: var(--text-sm);
line-height: 1.72;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 1.5rem;
max-width: 300px;
}
/* Social links */
.footer-social {
display: flex;
gap: 0.5rem;
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
transition: all var(--transition-fast);
}
.footer-social__link:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
transform: translateY(-2px);
}
.footer-social__link svg {
width: 16px;
height: 16px;
stroke-width: 1.75;
}
/* Column heading */
.footer-col__heading {
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.82);
margin-bottom: 1.25rem;
}
/* Nav list */
.footer-nav {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.footer-nav__link {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 400;
color: rgba(255, 255, 255, 0.48);
text-decoration: none;
transition: color var(--transition-fast);
line-height: 1.4;
}
.footer-nav__link:hover {
color: rgba(255, 255, 255, 0.9);
}
/* Contact address */
.footer-contact {
font-style: normal;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.footer-contact__item {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.48);
text-decoration: none;
line-height: 1.5;
transition: color var(--transition-fast);
}
.footer-contact__item:not(.footer-contact__item--address):hover {
color: rgba(255, 255, 255, 0.88);
}
.footer-contact__item svg {
width: 15px;
height: 15px;
stroke-width: 1.75;
flex-shrink: 0;
margin-top: 2px;
stroke: var(--color-accent);
opacity: 0.7;
}
/* ---- Lower Footer Bar ---- */
.footer-lower {
padding: 1.375rem 0;
}
.footer-lower__inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.footer-lower__copyright {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
margin: 0;
line-height: 1;
}
.footer-legal {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-legal__link {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
text-decoration: none;
transition: color var(--transition-fast);
line-height: 1;
}
.footer-legal__link:hover {
color: rgba(255, 255, 255, 0.7);
}
.footer-legal span {
font-size: 0.5rem;
color: rgba(255, 255, 255, 0.15);
line-height: 1;
}
/* =============================================================================
18. HERO OVERLAY — Güçlendirilmiş (görsel ile kullanım için)
Fotoğraf / Video arka plan üzerinde daha güçlü bir derinlik ve okunabilirlik
============================================================================= */
/* Görselin üzerinde çalışan gelişmiş overlay — çok katmanlı */
.hero__overlay {
background:
/* Sol taraf — içerik alanı için güçlü karartma */
linear-gradient(
105deg,
rgba(9, 16, 28, 0.92) 0%,
rgba(13, 22, 40, 0.86) 35%,
rgba(18, 30, 52, 0.72) 60%,
rgba(18, 30, 52, 0.40) 100%
),
/* Alt gölge — trust bar okunabilirliği */
linear-gradient(
to top,
rgba(5, 10, 20, 0.65) 0%,
transparent 30%
);
}
/* =============================================================================
19. STICKY FAB — Hızlı İletişim
WhatsApp / Telefon / Hemen Teklif Al açılır speed-dial
============================================================================= */
/* ---- Container ---- */
.fab-container {
position: fixed;
bottom: clamp(1.25rem, 3vw, 2rem);
right: clamp(1rem, 3vw, 2rem);
z-index: calc(var(--z-modal) - 100);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.625rem;
}
/* ---- Sub-items group ---- */
.fab-items {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
/* Collapsed: hidden above trigger */
transform: translateY(12px);
opacity: 0;
pointer-events: none;
transition:
transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.28s ease;
}
.fab-container.is-open .fab-items {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
/* Stagger each item for cascade effect */
.fab-items .fab-item:nth-child(1) {
transition-delay: 0.06s;
transform: translateY(8px);
opacity: 0;
}
.fab-items .fab-item:nth-child(2) {
transition-delay: 0s;
transform: translateY(8px);
opacity: 0;
}
.fab-container.is-open .fab-items .fab-item:nth-child(1),
.fab-container.is-open .fab-items .fab-item:nth-child(2) {
transform: translateY(0);
opacity: 1;
}
/* ---- Individual sub-item ---- */
.fab-item {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.625rem;
text-decoration: none;
border-radius: var(--radius-full);
padding: 0.625rem 1rem 0.625rem 0.75rem;
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 600;
white-space: nowrap;
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
opacity 0.3s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
.fab-item:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.fab-item__icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
flex-shrink: 0;
}
.fab-item__icon svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.fab-item__label {
line-height: 1;
letter-spacing: 0.01em;
}
/* WhatsApp */
.fab-item--whatsapp {
background: #ffffff;
color: #128c7e;
border: 1.5px solid rgba(18, 140, 126, 0.15);
}
.fab-item--whatsapp:hover {
transform: translateX(-3px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.28);
color: #128c7e;
}
.fab-item--whatsapp .fab-item__icon {
background: #25D366;
color: #ffffff;
}
/* Phone */
.fab-item--phone {
background: #ffffff;
color: var(--color-primary);
border: 1.5px solid var(--color-border);
}
.fab-item--phone:hover {
transform: translateX(-3px);
box-shadow: 0 6px 20px rgba(27, 45, 79, 0.2);
color: var(--color-primary);
}
.fab-item--phone .fab-item__icon {
background: var(--color-primary);
color: #ffffff;
}
.fab-item--phone .fab-item__icon svg {
width: 16px;
height: 16px;
}
/* ---- Main Trigger Button ---- */
.fab-main {
display: flex;
align-items: center;
gap: 0.5625rem;
padding: 0.875rem 1.375rem;
background: var(--color-accent);
color: var(--color-on-accent);
border: none;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.005em;
cursor: pointer;
white-space: nowrap;
box-shadow:
0 4px 20px rgba(30,114,224, 0.35),
0 2px 8px rgba(0, 0, 0, 0.15);
transition: all var(--transition-base);
line-height: 1;
position: relative;
}
.fab-main:hover {
background: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow:
0 8px 28px rgba(30,114,224, 0.45),
0 4px 12px rgba(0, 0, 0, 0.18);
}
.fab-main:active {
transform: translateY(0);
box-shadow: 0 4px 16px rgba(30,114,224, 0.3);
}
.fab-main:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.fab-main__text {
line-height: 1;
}
.fab-main__icon {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.fab-main__icon i,
.fab-main__icon svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
/* Default icon (headphones) */
.fab-main__icon-default {
opacity: 1;
transform: scale(1) rotate(0deg);
stroke-width: 2.5;
}
/* Close icon (X) */
.fab-main__icon-close {
opacity: 0;
transform: scale(0.6) rotate(-90deg);
stroke-width: 2.5;
}
/* Open state — swap icons */
.fab-container.is-open .fab-main {
background: var(--color-primary);
color: #ffffff;
box-shadow:
0 4px 20px rgba(27, 45, 79, 0.4),
0 2px 8px rgba(0, 0, 0, 0.2);
}
.fab-container.is-open .fab-main__icon-default {
opacity: 0;
transform: scale(0.6) rotate(90deg);
}
.fab-container.is-open .fab-main__icon-close {
opacity: 1;
transform: scale(1) rotate(0deg);
}
/* ---- Pulse ring animation on main button (draws attention) ---- */
.fab-main::before {
content: '';
position: absolute;
inset: -4px;
border-radius: var(--radius-full);
border: 2px solid rgba(30,114,224, 0.45);
animation: fabPulse 2.8s ease-out infinite;
pointer-events: none;
}
.fab-container.is-open .fab-main::before {
display: none;
}
@keyframes fabPulse {
0% { transform: scale(1); opacity: 0.7; }
70% { transform: scale(1.18); opacity: 0; }
100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fab-main::before { animation: none; opacity: 0; }
}
/* =============================================================================
20. ALT SAYFA — PAGE HERO (Kurslar, Hakkımızda, vb.)
Tam ekran hero yerine kullanılan kompakt sayfa başlığı
============================================================================= */
.page-hero {
position: relative;
background: var(--color-primary-dark);
padding-top: clamp(5.5rem, 12vw, 8rem); /* Header yüksekliği + boşluk */
padding-bottom: clamp(2.5rem, 6vw, 4rem);
overflow: hidden;
}
/* ---- Banner görsel desteği ---- */
.page-hero__bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
z-index: 0;
pointer-events: none;
/* Parallax etkisi için */
will-change: transform;
}
/* Banner varken koyu overlay — okunabilirlik */
.page-hero--has-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
175deg,
rgba(10, 8, 40, 0.72) 0%,
rgba(10, 8, 40, 0.58) 60%,
rgba(10, 8, 40, 0.75) 100%
);
z-index: 1;
pointer-events: none;
}
/* Banner varken deco ve dots daha hafif */
.page-hero--has-banner .page-hero__dots {
opacity: 0.35;
z-index: 2;
}
.page-hero--has-banner .page-hero__deco { z-index: 2; }
.page-hero--has-banner .page-hero__container { z-index: 3; }
/* Dot grid texture — Hero ile aynı */
.page-hero__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
z-index: 0;
}
/* Subtle diagonal accent line */
.page-hero__deco {
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
background: linear-gradient(
105deg,
transparent 40%,
rgba(30,114,224, 0.04) 100%
);
pointer-events: none;
z-index: 0;
}
.page-hero__container {
position: relative;
z-index: 1;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.page-hero__content {
max-width: 700px;
}
.page-hero__title {
font-family: var(--font-heading);
font-size: var(--text-4xl);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.06;
color: #ffffff;
margin-bottom: 1rem;
}
.page-hero__desc {
font-family: var(--font-body);
font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
line-height: 1.72;
color: rgba(255, 255, 255, 0.56);
max-width: 560px;
margin: 0;
}
/* =============================================================================
21. BREADCRUMB NAVIGATION
============================================================================= */
.breadcrumb-nav {
margin-bottom: 1.25rem;
}
.breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb-list__item,
.breadcrumb-list__link,
.breadcrumb-list__sep {
display: flex;
align-items: center;
gap: 0.3125rem;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
line-height: 1;
}
.breadcrumb-list__link {
color: rgba(255, 255, 255, 0.45);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-list__link:hover {
color: rgba(255, 255, 255, 0.85);
}
.breadcrumb-list__link svg,
.breadcrumb-list__sep svg {
width: 12px;
height: 12px;
stroke-width: 2.5;
flex-shrink: 0;
}
.breadcrumb-list__sep {
color: rgba(255, 255, 255, 0.2);
}
.breadcrumb-list__item--current {
color: rgba(255, 255, 255, 0.72);
}
/* =============================================================================
22. KURSLAR SAYFA LAYOUT
courses-page wraps toolbar + grid
============================================================================= */
.courses-page {
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5.5rem);
background: var(--color-surface);
}
.courses-page__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* ---- Toolbar (Filters + Sort) ---- */
.courses-page__toolbar {
display: flex;
flex-direction: column;
gap: 1.125rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* ---- Sort Bar ---- */
.sort-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding-top: 0.875rem;
border-top: 1px solid var(--color-border-light);
}
.sort-bar__count {
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 600;
color: var(--color-muted);
margin: 0;
line-height: 1;
}
.sort-bar__count-num {
color: var(--color-primary);
font-weight: 800;
font-size: 1rem;
}
.sort-bar__sort {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sort-bar__label {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-subtle);
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.sort-bar__select {
appearance: none;
-webkit-appearance: none;
padding: 0.4375rem 2rem 0.4375rem 0.75rem;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text);
background-color: var(--color-background);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231b2d4f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.625rem center;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color var(--transition-fast);
line-height: 1;
}
.sort-bar__select:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-color: var(--color-accent);
}
.sort-bar__select:hover {
border-color: var(--color-primary);
}
/* ---- Filter pill count badge ---- */
.course-filter__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
font-size: 0.625rem;
font-weight: 700;
border-radius: 99px;
background: var(--color-border);
color: var(--color-muted);
line-height: 1;
margin-left: 0.25rem;
transition: background var(--transition-fast), color var(--transition-fast);
}
.course-filter__btn.is-active .course-filter__count {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
}
/* ---- New badge on card ---- */
.course-card__new-badge {
position: absolute;
top: 0.875rem;
right: 0.875rem;
display: inline-flex;
align-items: center;
padding: 0.2rem 0.5rem;
font-family: var(--font-heading);
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--color-accent);
color: var(--color-on-accent);
border-radius: var(--radius-xs);
}
/* ---- Quota indicator in card footer ---- */
.course-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.course-card__quota {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1;
}
.course-card__quota--limited {
color: #b45309; /* Amber warning */
}
.course-card__quota--available {
/* invisible spacer */
color: transparent;
user-select: none;
}
/* İletişim badge color */
.course-card__badge--iletisim {
background: rgba(13, 61, 64, 0.75);
color: #7dcdd0;
}
/* ---- No results ---- */
.courses-empty {
text-align: center;
padding: clamp(3rem, 8vw, 5rem) 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.courses-empty[hidden] {
display: none;
}
.courses-empty svg {
width: 40px;
height: 40px;
stroke: var(--color-border);
stroke-width: 1.5;
}
.courses-empty p {
font-size: var(--text-base);
color: var(--color-muted);
margin: 0;
}
/* =============================================================================
23. FAQ MINI SECTION
============================================================================= */
.courses-faq {
padding: clamp(4rem, 8vw, 6.5rem) 0;
background: var(--color-background);
border-top: 1px solid var(--color-border-light);
}
.courses-faq__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
.courses-faq__header {
margin-bottom: clamp(2rem, 4vw, 3.5rem);
max-width: 520px;
}
.courses-faq__title {
font-family: var(--font-heading);
font-size: var(--text-3xl);
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.1;
color: var(--color-text);
margin-bottom: 0;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
}
.faq-item {
padding-top: 1.375rem;
border-top: 1.5px solid var(--color-border-light);
}
.faq-item__q {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-text);
margin-bottom: 0.625rem;
line-height: 1.35;
}
.faq-item__a {
font-size: var(--text-sm);
line-height: 1.72;
color: var(--color-muted);
margin: 0;
}
.faq-item__a a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
border-bottom: 1.5px solid var(--color-accent);
padding-bottom: 1px;
transition: color var(--transition-fast);
}
.faq-item__a a:hover {
color: var(--color-accent);
}
/* =============================================================================
24. ICON SYSTEM ENHANCEMENTS
Mobil nav ikonlar, about features, CTA benefits, footer nav chevron
============================================================================= */
/* ---- Mobile Nav — link-icon box ---- */
.nav-fullscreen__link-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background var(--transition-fast);
}
.nav-fullscreen__link-icon svg {
width: 18px;
height: 18px;
stroke: rgba(255, 255, 255, 0.5);
stroke-width: 1.75;
transition: stroke var(--transition-fast);
}
.nav-fullscreen__link.active .nav-fullscreen__link-icon,
.nav-fullscreen__link:hover .nav-fullscreen__link-icon {
background: rgba(30,114,224, 0.15);
}
.nav-fullscreen__link.active .nav-fullscreen__link-icon svg,
.nav-fullscreen__link:hover .nav-fullscreen__link-icon svg {
stroke: var(--color-accent);
}
/* Adjust link layout to accommodate icon */
.nav-fullscreen__link {
display: flex;
align-items: center;
gap: 1rem;
}
.nav-fullscreen__link-text {
flex: 1;
}
/* Mobile nav CTA icon */
.nav-fullscreen__cta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.nav-fullscreen__cta > i:first-child svg {
width: 17px;
height: 17px;
stroke-width: 2;
}
/* ---- Mobile Nav — contact footer links ---- */
.nav-fullscreen__contact-items {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.nav-fullscreen__contact-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.38);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
transition: color var(--transition-fast);
line-height: 1;
}
.nav-fullscreen__contact-link svg {
width: 14px;
height: 14px;
stroke-width: 2;
flex-shrink: 0;
stroke: var(--color-accent);
opacity: 0.6;
}
.nav-fullscreen__contact-link:hover {
color: rgba(255, 255, 255, 0.85);
}
.nav-fullscreen__contact-link:hover svg {
opacity: 1;
}
/* ---- Footer column heading icon ---- */
.footer-col__heading {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-col__heading svg {
width: 14px;
height: 14px;
stroke: var(--color-accent);
stroke-width: 1.75;
opacity: 0.65;
flex-shrink: 0;
}
/* ---- Footer nav link chevron ---- */
.footer-nav__link {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
}
.footer-nav__link svg {
width: 11px;
height: 11px;
stroke-width: 2.5;
flex-shrink: 0;
opacity: 0.3;
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.footer-nav__link:hover svg {
opacity: 0.9;
transform: translateX(2px);
}
/* "Tüm Kurslar" link — arrow-right variant */
.footer-nav__link--all {
color: var(--color-accent);
opacity: 0.8;
}
.footer-nav__link--all:hover {
opacity: 1;
color: var(--color-accent-hover);
}
.footer-nav__link--all svg {
opacity: 0.7;
}
/* ---- About — stat icon ---- */
.about-stat__icon-wrap {
margin-bottom: 0.875rem;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: rgba(30,114,224, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.about-stat__icon-wrap svg {
width: 18px;
height: 18px;
stroke: var(--color-accent);
stroke-width: 2;
}
/* ---- About — feature bullets ---- */
.about-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5625rem;
}
.about-feature {
display: flex;
align-items: center;
gap: 0.625rem;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text);
line-height: 1.4;
}
.about-feature svg {
width: 16px;
height: 16px;
stroke: var(--color-accent);
stroke-width: 2.5;
flex-shrink: 0;
}
/* ---- CTA — benefit pills ---- */
.cta-benefits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.75rem;
margin-bottom: 2.25rem;
}
.cta-benefit {
display: inline-flex;
align-items: center;
gap: 0.4375rem;
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.58);
line-height: 1;
}
.cta-benefit svg {
width: 15px;
height: 15px;
stroke: #a8d5a2; /* soft green check */
stroke-width: 2.5;
flex-shrink: 0;
}
/* =============================================================================
25. KURS HERO — Zengin sayfa başlığı (kurs-detay için)
============================================================================= */
.course-hero {
position: relative;
/* Görsel yoksa zengin CSS-only gradient */
background:
radial-gradient(ellipse at 80% 10%, rgba(30,114,224,0.12) 0%, transparent 55%),
linear-gradient(145deg, #060d1a 0%, #0f1c30 45%, #162440 100%);
padding-top: clamp(5.5rem, 12vw, 8rem);
padding-bottom: 0;
overflow: hidden;
}
/* ── Arka plan görseli ───────────────────────────────────────────────────── */
.course-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.course-hero__bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%; /* görsel yukarıdan %30 noktasından hizalanır */
display: block;
/* Parallax hissiyatı: hafif scale */
transform: scale(1.04);
transition: transform 8s ease-out;
will-change: transform;
}
.course-hero.has-bg-image .course-hero__bg-img {
transform: scale(1);
}
/* ── Karartma overlay (3 katman) ─────────────────────────────────────────── */
.course-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
/*
* Katman 1 — Sol tarafa doğru yoğunlaşan yatay karartma
* (metin okunabilirliği için)
* Katman 2 — Alt tarafa doğru yoğunlaşan karartma
* (stat + jump-nav okunabilirliği)
* Katman 3 — Üst bandı hafifçe karartır (nav ile geçiş)
*/
background:
/* Yatay — sol koyu, sağ görece açık */
linear-gradient(
105deg,
rgba(5, 12, 25, 0.90) 0%,
rgba(5, 12, 25, 0.72) 45%,
rgba(5, 12, 25, 0.42) 75%,
rgba(5, 12, 25, 0.25) 100%
),
/* Dikey — alt koyu, ortası açık */
linear-gradient(
to top,
rgba(5, 12, 25, 0.80) 0%,
rgba(5, 12, 25, 0.08) 45%
),
/* Dikey — üst hafif bant */
linear-gradient(
to bottom,
rgba(5, 12, 25, 0.40) 0%,
transparent 25%
);
/* Hafif renk tonu (aksan mavisi) */
mix-blend-mode: normal;
}
/* Görsel olmayan (CSS-only) versiyonda overlay daha hafif */
.course-hero:not(.has-bg-image) .course-hero__overlay {
background:
linear-gradient(
to bottom,
rgba(5, 12, 25, 0.15) 0%,
transparent 100%
);
}
/* ── Nokta deseni ────────────────────────────────────────────────────────── */
.course-hero__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
/* Nokta deseni overlay'in üstünde, içeriğin altında */
z-index: 2;
/* Görsel varken daha subtle */
opacity: 0.5;
}
.course-hero:not(.has-bg-image) .course-hero__dots {
opacity: 1;
}
/* ── İçerik container ────────────────────────────────────────────────────── */
.course-hero__container {
position: relative;
z-index: 3;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* Meta top row */
.course-hero__meta-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem;
margin-bottom: 1.25rem;
}
.course-hero__level {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
color: rgba(255,255,255,0.52);
padding: 0.25rem 0.625rem;
border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-full);
}
.course-hero__level svg {
width: 12px;
height: 12px;
stroke-width: 2;
}
.course-hero__quota-warn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
color: #fbbf24;
background: rgba(251,191,36,0.1);
border: 1px solid rgba(251,191,36,0.25);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-full);
}
.course-hero__quota-warn svg {
width: 12px;
height: 12px;
stroke-width: 2.5;
}
/* Title + tagline */
.course-hero__title {
font-family: var(--font-heading);
font-size: clamp(1.875rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.026em;
line-height: 1.06;
color: #ffffff;
margin-bottom: 0.875rem;
max-width: 820px;
}
.course-hero__tagline {
font-family: var(--font-body);
font-size: clamp(0.9375rem, 1.7vw, 1.125rem);
line-height: 1.68;
color: rgba(255,255,255,0.55);
max-width: 640px;
margin-bottom: 2rem;
}
/* Stats row */
.course-hero__stats {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
margin-bottom: 2rem;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-md);
overflow: hidden;
}
.course-hero__stat {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
flex: 1;
min-width: 160px;
}
.course-hero__stat + .course-hero__stat {
border-left: 1px solid rgba(255,255,255,0.07);
}
.course-hero__stat svg {
width: 18px;
height: 18px;
stroke: var(--color-accent);
stroke-width: 1.75;
flex-shrink: 0;
opacity: 0.8;
}
.course-hero__stat-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255,255,255,0.38);
margin-bottom: 0.1875rem;
line-height: 1;
}
.course-hero__stat-value {
display: block;
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
color: rgba(255,255,255,0.9);
line-height: 1.2;
}
.course-hero__stat-divider { display: none; }
/* Jump Nav (tabs at bottom of hero) */
.course-jump-nav {
display: flex;
flex-wrap: wrap;
gap: 0;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 0.5rem;
}
.course-jump-nav__link {
display: inline-block;
padding: 1rem 1.375rem;
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 600;
color: rgba(255,255,255,0.45);
text-decoration: none;
border-bottom: 2.5px solid transparent;
transition: color var(--transition-fast), border-color var(--transition-fast);
white-space: nowrap;
line-height: 1;
}
.course-jump-nav__link:hover {
color: rgba(255,255,255,0.9);
}
.course-jump-nav__link.is-active {
color: #ffffff;
border-bottom-color: var(--color-accent);
}
/* =============================================================================
26. COURSE DETAIL — İki Kolon Layout
============================================================================= */
.course-detail {
background: #f1f5f9;
padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 7vw, 5rem);
}
.course-detail__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
display: grid;
grid-template-columns: 7fr 5fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: start;
}
/* Main column */
.course-detail__main {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
/* Sidebar column */
.course-detail__sidebar {
position: sticky;
top: calc(var(--header-height-scrolled) + 1.5rem);
}
/* ---- Course Section (shared section wrapper) ---- */
.course-section {
background: #ffffff;
border: 1px solid var(--color-border-light);
border-radius: 1rem;
padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
margin-bottom: 1.25rem;
box-shadow: 0 2px 12px rgba(15,23,42,0.04);
}
.course-section:last-child {
margin-bottom: 0;
}
.course-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.625rem;
}
.course-section__eyebrow svg {
width: 13px;
height: 13px;
stroke-width: 2.5;
}
.course-section__title {
font-family: var(--font-heading);
font-size: clamp(1.25rem, 2.5vw, 1.625rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--color-text);
margin-bottom: 1.375rem;
}
.course-section__subtitle {
font-size: var(--text-sm);
color: var(--color-muted);
margin-top: -0.875rem;
margin-bottom: 1.375rem;
}
/* ---- Learning Outcomes ---- */
.learning-outcomes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
}
.learning-outcome {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: var(--text-sm);
line-height: 1.6;
color: var(--color-text);
}
.learning-outcome svg {
width: 16px;
height: 16px;
stroke: #22c55e;
stroke-width: 2.5;
flex-shrink: 0;
margin-top: 2px;
}
/* ---- Course Description ---- */
.course-description p {
font-size: var(--text-base);
line-height: 1.82;
color: var(--color-muted);
margin-bottom: 1rem;
}
.course-description p:last-child {
margin-bottom: 0;
}
/* ---- Curriculum Accordion ---- */
.curriculum {
display: flex;
flex-direction: column;
gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.curriculum__day {}
.curriculum__day-header {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.125rem 1.375rem;
background: var(--color-background);
border: none;
border-bottom: 1px solid var(--color-border-light);
cursor: pointer;
text-align: left;
transition: background var(--transition-fast);
}
.curriculum__day-header:hover {
background: var(--color-surface);
}
.curriculum__day--open .curriculum__day-header {
background: var(--color-surface);
border-bottom-color: var(--color-border);
}
.curriculum__day-info {
flex: 1;
min-width: 0;
}
.curriculum__day-label {
display: block;
font-family: var(--font-heading);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 0.1875rem;
}
.curriculum__day-title {
display: block;
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.curriculum__day-meta {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: var(--color-subtle);
white-space: nowrap;
flex-shrink: 0;
}
.curriculum__chevron {
width: 18px;
height: 18px;
stroke: var(--color-muted);
stroke-width: 2.5;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.curriculum__day--open .curriculum__chevron {
transform: rotate(180deg);
}
/* Accordion body */
.curriculum__day-body {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}
.curriculum__day--open .curriculum__day-body {
max-height: 2000px;
opacity: 1;
}
.curriculum__item {
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 0.875rem 1.375rem;
border-bottom: 1px solid var(--color-border-light);
transition: background var(--transition-fast);
}
.curriculum__item:last-child {
border-bottom: none;
}
.curriculum__item:hover {
background: rgba(0,0,0,0.02);
}
.curriculum__item--break {
background: rgba(0,0,0,0.015);
opacity: 0.65;
}
.curriculum__item-icon {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
background: var(--color-surface);
border: 1px solid var(--color-border-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.curriculum__item-icon svg {
width: 15px;
height: 15px;
stroke: var(--color-muted);
stroke-width: 2;
}
.curriculum__item-info {
flex: 1;
min-width: 0;
}
.curriculum__item-title {
display: block;
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.25rem;
line-height: 1.35;
}
.curriculum__item-meta {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-subtle);
line-height: 1;
}
.curriculum__item-meta svg {
width: 11px;
height: 11px;
stroke-width: 2;
}
.curriculum__item-type {
padding: 0.15rem 0.4375rem;
background: var(--color-border-light);
border-radius: 3px;
font-weight: 600;
color: var(--color-muted);
margin-left: 0.25rem;
}
/* ---- Target Audience Grid ---- */
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.audience-card {
padding: 1.375rem;
background: var(--color-background);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.audience-card:hover {
border-color: var(--color-border);
box-shadow: var(--shadow-sm);
}
.audience-card__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(30,114,224,0.09);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.875rem;
}
.audience-card__icon svg {
width: 18px;
height: 18px;
stroke: var(--color-accent);
stroke-width: 1.75;
}
.audience-card__title {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-text);
margin-bottom: 0.375rem;
line-height: 1.3;
}
.audience-card__desc {
font-size: 0.8125rem;
line-height: 1.6;
color: var(--color-muted);
margin: 0;
}
/* ---- Prerequisites ---- */
.prerequisites {
background: var(--color-primary-dark);
border-radius: var(--radius-md);
padding: 1.5rem 1.625rem;
margin-top: 1.5rem;
}
.prerequisites__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
color: rgba(255,255,255,0.9);
margin-bottom: 1rem;
}
.prerequisites__title svg {
width: 17px;
height: 17px;
stroke: var(--color-accent);
stroke-width: 2;
}
.prerequisites__list {
display: flex;
flex-direction: column;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.prerequisites__list li {
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-family: var(--font-body);
font-size: var(--text-sm);
color: rgba(255,255,255,0.6);
line-height: 1.5;
}
.prerequisites__list li svg {
width: 14px;
height: 14px;
stroke: #4ade80;
stroke-width: 2.5;
flex-shrink: 0;
margin-top: 2px;
}
/* ---- Instructor Profile ---- */
.instructor-profile {
display: flex;
gap: 1.75rem;
padding: 1.75rem;
background: var(--color-background);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.instructor-profile__photo-placeholder {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(140deg, var(--color-primary), #2a5298);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 800;
color: #ffffff;
flex-shrink: 0;
}
.instructor-profile__content {
flex: 1;
min-width: 0;
}
.instructor-profile__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.instructor-profile__name {
font-family: var(--font-heading);
font-size: clamp(1.0625rem, 2vw, 1.25rem);
font-weight: 800;
color: var(--color-text);
margin-bottom: 0.25rem;
}
.instructor-profile__title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-accent);
margin: 0;
}
.instructor-profile__linkedin {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: #0077b5;
color: #fff;
text-decoration: none;
flex-shrink: 0;
transition: opacity var(--transition-fast);
}
.instructor-profile__linkedin:hover { opacity: 0.85; }
.instructor-profile__linkedin svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
.instructor-profile__stats {
display: flex;
gap: 1.75rem;
padding: 0.875rem 0;
border-top: 1px solid var(--color-border-light);
border-bottom: 1px solid var(--color-border-light);
margin-bottom: 1rem;
}
.instructor-profile__stat-num {
display: block;
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.2rem;
}
.instructor-profile__stat-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-subtle);
line-height: 1;
}
.instructor-profile__bio p {
font-size: var(--text-sm);
line-height: 1.72;
color: var(--color-muted);
margin-bottom: 0.625rem;
}
.instructor-profile__bio p:last-child {
margin: 0;
}
/* =============================================================================
27. SIDEBAR CARD
============================================================================= */
.course-sidebar-card {
background: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
/* Quota alert bar */
.sidebar-quota-alert {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: rgba(251,191,36,0.1);
border-bottom: 1px solid rgba(251,191,36,0.2);
font-family: var(--font-heading);
font-size: 0.8125rem;
color: #b45309;
line-height: 1;
}
.sidebar-quota-alert svg {
width: 15px;
height: 15px;
stroke: #d97706;
stroke-width: 2;
flex-shrink: 0;
}
/* Header date */
.sidebar-header {
padding: 1.25rem 1.375rem 1rem;
border-bottom: 1px solid var(--color-border-light);
}
.sidebar-date__label {
display: block;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-subtle);
margin-bottom: 0.3125rem;
}
.sidebar-date__value {
display: block;
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-text);
line-height: 1.2;
}
.sidebar-date__end {
display: block;
font-size: var(--text-sm);
color: var(--color-muted);
margin-top: 0.125rem;
}
/* Details list */
.sidebar-details {
list-style: none;
padding: 0.5rem 0;
margin: 0;
border-bottom: 1px solid var(--color-border-light);
}
.sidebar-detail {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 0.5rem;
padding: 0.5625rem 1.375rem;
font-size: var(--text-sm);
}
.sidebar-detail__icon svg {
width: 15px;
height: 15px;
stroke: var(--color-accent);
stroke-width: 1.75;
opacity: 0.7;
}
.sidebar-detail__label {
color: var(--color-muted);
font-weight: 500;
}
.sidebar-detail__value {
font-weight: 700;
color: var(--color-text);
text-align: right;
font-size: 0.8125rem;
}
.sidebar-detail__value--warn {
color: #b45309;
}
.sidebar-detail__value--green {
color: #16a34a;
}
/* CTA buttons */
.sidebar-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem 1.375rem;
border-bottom: 1px solid var(--color-border-light);
}
.sidebar-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.9375rem 1.5rem;
font-family: var(--font-heading);
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
border-radius: var(--radius-sm);
border: 2px solid transparent;
transition: all var(--transition-base);
line-height: 1;
cursor: pointer;
}
.sidebar-btn svg {
width: 16px;
height: 16px;
stroke-width: 2.5;
}
.sidebar-btn--primary {
background: var(--color-accent);
color: var(--color-on-accent);
border-color: var(--color-accent);
}
.sidebar-btn--primary:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(30,114,224,0.3);
}
.sidebar-btn--ghost {
background: transparent;
color: var(--color-primary);
border-color: var(--color-border);
}
.sidebar-btn--ghost:hover {
border-color: var(--color-primary);
background: rgba(27,45,79,0.04);
}
/* Corporate note */
.sidebar-corporate-note {
display: flex;
align-items: flex-start;
gap: 0.5rem;
padding: 0.875rem 1.375rem;
border-bottom: 1px solid var(--color-border-light);
}
.sidebar-corporate-note svg {
width: 14px;
height: 14px;
stroke: var(--color-accent);
stroke-width: 1.75;
flex-shrink: 0;
margin-top: 2px;
opacity: 0.7;
}
.sidebar-corporate-note p {
font-size: 0.75rem;
line-height: 1.5;
color: var(--color-muted);
margin: 0;
}
/* Share section */
.sidebar-share {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1.375rem;
}
.sidebar-share__label {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-subtle);
}
.sidebar-share__buttons {
display: flex;
gap: 0.375rem;
}
.sidebar-share__btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
text-decoration: none;
transition: all var(--transition-fast);
flex-shrink: 0;
}
.sidebar-share__btn svg {
width: 16px;
height: 16px;
}
.sidebar-share__btn--linkedin {
background: #0077b5;
color: #fff;
}
.sidebar-share__btn--linkedin:hover { opacity: 0.85; }
.sidebar-share__btn--whatsapp {
background: #25D366;
color: #fff;
}
.sidebar-share__btn--whatsapp:hover { opacity: 0.85; }
.sidebar-share__btn--copy {
background: var(--color-surface);
border: 1.5px solid var(--color-border);
color: var(--color-muted);
position: relative;
}
.sidebar-share__btn--copy:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* Copy icon swap */
.copy-icon-success { display: none; }
.sidebar-share__btn--copy.is-copied .copy-icon-default { display: none; }
.sidebar-share__btn--copy.is-copied .copy-icon-success {
display: block;
stroke: #16a34a;
}
/* =============================================================================
28. RELATED COURSES SECTION
============================================================================= */
.related-courses {
padding: clamp(4rem, 8vw, 6.5rem) 0;
background: var(--color-background);
border-top: 1px solid var(--color-border-light);
}
.related-courses__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* =============================================================================
29. AI CHAT WIDGET — Teklif Danışmanı
============================================================================= */
/* ── Trigger Butonu (FAB güncelleme) ─────────────────────────────────────── */
.fab-main--ai {
position: relative;
overflow: visible;
background: linear-gradient(135deg, var(--color-primary-dark) 0%, #1e3a6e 100%);
border: 1.5px solid rgba(30,114,224,0.35);
box-shadow: 0 4px 24px rgba(27,45,79,0.35), 0 0 0 0 rgba(30,114,224,0);
transition:
transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.3s ease,
border-color 0.3s ease;
}
.fab-main--ai:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 8px 32px rgba(27,45,79,0.45), 0 0 0 0 rgba(30,114,224,0);
border-color: rgba(30,114,224,0.65);
}
.fab-main--ai.is-active {
background: linear-gradient(135deg, #162440 0%, #1b3060 100%);
transform: scale(0.97);
}
/* Başlangıç bounce animasyonu */
.fab-main--ai.is-ready {
animation: ai-trigger-bounce 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes ai-trigger-bounce {
0% { transform: scale(1); }
40% { transform: scale(1.12) translateY(-4px); }
70% { transform: scale(0.97) translateY(0); }
100% { transform: scale(1); }
}
/* Pulse halkası — "AI online" göstergesi */
.fab-main__ai-pulse {
position: absolute;
top: -3px;
right: -3px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #22c55e;
border: 2.5px solid #fff;
box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
animation: ai-pulse 2.5s ease-in-out infinite;
z-index: 2;
pointer-events: none;
}
@keyframes ai-pulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* FAB icon animasyonu (open/close) */
.fab-main--ai .fab-main__icon-close {
position: absolute;
opacity: 0;
transform: rotate(-90deg) scale(0.5);
transition: opacity 0.25s, transform 0.25s;
}
.fab-main--ai .fab-main__icon-default {
transition: opacity 0.25s, transform 0.25s;
}
.fab-main--ai.is-active .fab-main__icon-default {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
.fab-main--ai.is-active .fab-main__icon-close {
opacity: 1;
transform: rotate(0deg) scale(1);
}
/* Sparkles SVG rengi */
.fab-main--ai svg {
stroke: var(--color-accent);
width: 22px;
height: 22px;
}
/* ── AI Chat Panel ────────────────────────────────────────────────────────── */
.ai-chat-panel {
position: fixed;
bottom: calc(var(--fab-size, 56px) + 1.5rem + 1rem);
right: 1.5rem;
width: 360px;
max-height: 0;
border-radius: 16px;
background: var(--color-background);
box-shadow:
0 24px 64px rgba(0,0,0,0.18),
0 4px 16px rgba(0,0,0,0.1),
0 0 0 1px rgba(27,45,79,0.08);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 9998;
opacity: 0;
transform: translateY(20px) scale(0.96);
transform-origin: bottom right;
pointer-events: none;
transition:
max-height 0s 0.35s,
opacity 0.3s cubic-bezier(0.4,0,0.2,1),
transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
will-change: opacity, transform;
}
.ai-chat-panel.is-open {
max-height: 540px;
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
transition:
max-height 0s 0s,
opacity 0.3s cubic-bezier(0.4,0,0.2,1),
transform 0.35s cubic-bezier(0.34,1.2,0.64,1);
}
.ai-chat-panel.is-minimized {
max-height: 0;
opacity: 0;
transform: translateY(16px) scale(0.95);
pointer-events: none;
transition:
max-height 0s 0.25s,
opacity 0.2s ease,
transform 0.25s ease;
}
/* ── Panel Header ────────────────────────────────────────────────────────── */
.ai-chat-panel__header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1rem;
background: var(--color-primary-dark);
flex-shrink: 0;
}
/* Avatar */
.ai-chat-panel__avatar {
position: relative;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(30,114,224,0.25) 0%, rgba(30,114,224,0.08) 100%);
border: 1.5px solid rgba(30,114,224,0.3);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-chat-panel__avatar svg {
width: 17px;
height: 17px;
stroke: var(--color-accent);
stroke-width: 1.5;
animation: ai-avatar-spin 8s linear infinite;
}
@keyframes ai-avatar-spin {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.ai-chat-panel__avatar-status {
position: absolute;
bottom: 1px;
right: 1px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #22c55e;
border: 1.5px solid var(--color-primary-dark);
}
/* Başlık bilgi */
.ai-chat-panel__info {
flex: 1;
min-width: 0;
}
.ai-chat-panel__name {
font-family: var(--font-heading);
font-size: 0.875rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.1875rem;
line-height: 1;
}
.ai-chat-panel__status {
display: flex;
align-items: center;
gap: 0.3125rem;
font-size: 0.6875rem;
color: rgba(255,255,255,0.5);
margin: 0;
line-height: 1;
}
.ai-status-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
animation: ai-status-pulse 2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes ai-status-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
/* Panel aksiyonlar */
.ai-chat-panel__actions {
display: flex;
gap: 0.25rem;
}
.ai-panel-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: rgba(255,255,255,0.08);
cursor: pointer;
transition: background var(--transition-fast);
padding: 0;
}
.ai-panel-btn:hover {
background: rgba(255,255,255,0.16);
}
.ai-panel-btn svg {
width: 14px;
height: 14px;
stroke: rgba(255,255,255,0.75);
stroke-width: 2.5;
}
/* ── Intro Banner ────────────────────────────────────────────────────────── */
.ai-chat-intro {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1rem;
background: linear-gradient(90deg, rgba(30,114,224,0.09) 0%, rgba(30,114,224,0.03) 100%);
border-bottom: 1px solid rgba(30,114,224,0.14);
flex-shrink: 0;
}
.ai-chat-intro__icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(30,114,224,0.12);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ai-chat-intro__icon svg {
width: 13px;
height: 13px;
stroke: var(--color-accent);
stroke-width: 1.5;
}
.ai-chat-intro__text {
font-size: 0.75rem;
line-height: 1.45;
color: var(--color-muted);
}
.ai-chat-intro__text strong {
color: var(--color-text);
font-weight: 700;
}
/* ── Chat Body ────────────────────────────────────────────────────────────── */
.ai-chat-body {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
min-height: 140px;
scroll-behavior: smooth;
}
/* Scrollbar ince */
.ai-chat-body::-webkit-scrollbar { width: 4px; }
.ai-chat-body::-webkit-scrollbar-track { background: transparent; }
.ai-chat-body::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 4px;
}
/* ── Mesaj Balonları ──────────────────────────────────────────────────────── */
.ai-msg {
display: flex;
align-items: flex-end;
gap: 0.35rem;
animation: ai-msg-in 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes ai-msg-in {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Bot avatar (küçük) */
.ai-msg__avatar {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(27,45,79,0.08) 0%, rgba(27,45,79,0.04) 100%);
border: 1px solid var(--color-border-light);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 1px;
}
.ai-msg__avatar svg {
width: 10px;
height: 10px;
stroke: var(--color-primary);
stroke-width: 1.5;
}
/* Balon */
.ai-msg__bubble {
max-width: 86%;
padding: 0.65rem 0.95rem;
border-radius: 14px;
font-size: 0.875rem;
line-height: 1.55;
letter-spacing: -0.005em;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Tüm child metin elemanları parent font-size'ını korusun */
.ai-msg__bubble p,
.ai-msg__bubble li,
.ai-msg__bubble a,
.ai-msg__bubble span,
.ai-msg__bubble strong,
.ai-msg__bubble b,
.ai-msg__bubble em,
.ai-msg__bubble i,
.ai-msg__bubble code {
font-size: 1em;
}
.ai-msg__bubble p {
margin: 0;
}
.ai-msg__bubble p + p {
margin-top: 0.4em;
}
/* Bot balonu */
.ai-msg--bot .ai-msg__bubble {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
color: var(--color-text);
border-radius: 6px 16px 16px 16px;
border: 1px solid rgba(226,232,240,0.85);
}
/* Kullanıcı balonu */
.ai-msg--user {
flex-direction: row-reverse;
}
.ai-msg--user .ai-msg__bubble {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: #fff;
border-radius: 16px 16px 6px 16px;
box-shadow: 0 3px 10px rgba(99,102,241,0.24);
}
/* Timestamp */
.ai-msg__time {
display: block;
font-size: 0.6rem;
color: rgba(0,0,0,0.28);
margin-top: 0.15rem;
line-height: 1;
}
.ai-msg--user .ai-msg__time {
color: rgba(255,255,255,0.38);
}
.ai-msg--user .ai-msg__time {
color: rgba(255,255,255,0.35);
text-align: right;
}
/* Link in bot mesajı */
.ai-link,
.ai-msg__bubble a {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--color-accent);
font-weight: 600;
text-decoration: none;
background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
border-bottom: 1px solid rgba(99,102,241,0.35);
padding-bottom: 1px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.ai-link:hover,
.ai-msg__bubble a:hover {
border-bottom-color: var(--color-accent);
transform: translateX(1px);
}
.ai-link::after,
.ai-msg__bubble a[href^="http"]::after,
.ai-msg__bubble a[href^="//"]::after {
content: '';
display: inline-block;
width: 0.65em;
height: 0.65em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.15s ease;
}
.ai-link:hover::after,
.ai-msg__bubble a:hover::after {
opacity: 1;
}
/* Bot mesajındaki listeler */
.ai-msg__bubble ul,
.ai-msg__bubble ol {
list-style: disc;
padding-left: 1.15em;
margin: 0.5rem 0 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.ai-msg__bubble li {
padding-left: 0.15rem;
font-size: 1em;
line-height: 1.55;
color: var(--color-text);
}
.ai-msg__bubble li::marker {
color: var(--color-accent);
font-size: 0.75em;
}
.ai-msg__bubble li strong,
.ai-msg__bubble li b {
font-weight: 700;
color: var(--color-primary);
}
.ai-msg__bubble li .ai-meta,
.ai-msg__bubble li span {
color: var(--text-muted);
font-size: 0.9em;
}
/* Genel vurgu */
.ai-msg__bubble strong,
.ai-msg__bubble b {
font-weight: 700;
color: var(--color-primary);
}
.ai-msg__bubble em,
.ai-msg__bubble i {
color: var(--color-accent);
font-style: italic;
}
/* Kod ve özel metin */
.ai-msg__bubble code {
font-family: 'SF Mono', Menlo, Consolas, monospace;
background: rgba(99,102,241,0.08);
color: var(--color-primary);
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.88em;
}
/* Buton görünümü — AI bağlantılarını opsiyonel buton yapar */
.ai-msg__bubble .ai-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.85rem;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: #fff !important;
font-size: 0.95em;
font-weight: 600;
text-decoration: none;
border: none;
margin-top: 0.4rem;
box-shadow: 0 2px 6px rgba(99,102,241,0.22);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ai-msg__bubble .ai-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(99,102,241,0.28);
}
/* ── Typing Indicator (3 nokta) ──────────────────────────────────────────── */
.ai-typing-dots {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 0;
}
.ai-typing-dots span {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-muted);
opacity: 0.5;
animation: ai-dot-bounce 1.2s ease-in-out infinite;
}
.ai-typing-dots span:nth-child(1) { animation-delay: 0s; }
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-dot-bounce {
0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
40% { transform: translateY(-5px); opacity: 1; }
}
/* ── Quick Reply Chips ────────────────────────────────────────────────────── */
.ai-quick-replies {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0 1rem 0.75rem;
transition: opacity 0.25s, max-height 0.35s;
overflow: hidden;
max-height: 200px;
flex-shrink: 0;
}
.ai-quick-replies.is-hidden {
opacity: 0;
max-height: 0;
padding-bottom: 0;
pointer-events: none;
}
.ai-chip {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0.375rem 0.6875rem;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 600;
color: var(--color-primary);
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
transform 0.15s ease;
white-space: nowrap;
line-height: 1;
}
.ai-chip:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: #fff;
transform: translateY(-1px);
}
.ai-chip svg {
width: 12px;
height: 12px;
stroke-width: 2;
flex-shrink: 0;
}
/* ── Alternatif İletişim ────────────────────────────────────────────────── */
.ai-alt-contact {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-top: 1px solid var(--color-border-light);
background: var(--color-surface);
flex-shrink: 0;
}
.ai-alt-contact__label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-subtle);
white-space: nowrap;
flex-shrink: 0;
}
.ai-alt-btn {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0.3125rem 0.625rem;
font-size: 0.6875rem;
font-weight: 700;
border-radius: var(--radius-full);
text-decoration: none;
transition: opacity var(--transition-fast), transform 0.15s;
white-space: nowrap;
line-height: 1;
}
.ai-alt-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.ai-alt-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
.ai-alt-btn--whatsapp {
background: #25D366;
color: #fff;
}
.ai-alt-btn--phone {
background: var(--color-primary);
color: #fff;
}
/* ── Human Handoff Offer ─────────────────────────────────────────────────── */
.ai-handoff-offer {
margin: 0 1rem 0.5rem;
padding: 0.875rem;
background: linear-gradient(135deg, rgba(30,114,224,0.07) 0%, rgba(30,114,224,0.03) 100%);
border: 1px solid rgba(30,114,224,0.2);
border-radius: 10px;
animation: ai-msg-in 0.3s cubic-bezier(0.34,1.2,0.64,1) both;
flex-shrink: 0;
}
.ai-handoff-offer__text {
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text);
margin: 0 0 0.625rem;
line-height: 1.4;
}
.ai-handoff-offer__actions {
display: flex;
gap: 0.5rem;
}
.ai-handoff-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4375rem 0.875rem;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
border-radius: 6px;
border: none;
cursor: pointer;
text-decoration: none;
line-height: 1;
transition: all var(--transition-fast);
background: var(--color-accent);
color: var(--color-on-accent);
}
.ai-handoff-btn:hover {
background: var(--color-accent-hover);
transform: translateY(-1px);
}
.ai-handoff-btn--ghost {
background: transparent;
color: var(--color-muted);
border: 1.5px solid var(--color-border);
}
.ai-handoff-btn--ghost:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
/* ── Chat Input ──────────────────────────────────────────────────────────── */
.ai-chat-input {
border-top: 1px solid var(--color-border-light);
padding: 0.625rem 0.75rem 0.5rem;
background: var(--color-background);
flex-shrink: 0;
}
.ai-chat-input__row {
display: flex;
align-items: flex-end;
gap: 0.5rem;
background: var(--color-surface);
border: 1.5px solid var(--color-border);
border-radius: 10px;
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ai-chat-input__row:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(27,45,79,0.08);
}
.ai-chat-input__textarea {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-text);
resize: none;
min-height: 20px;
max-height: 120px;
overflow-y: auto;
}
.ai-chat-input__textarea::placeholder {
color: var(--color-subtle);
}
.ai-chat-input__send {
width: 32px;
height: 32px;
border-radius: 8px;
border: none;
background: var(--color-primary-dark);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-fast), transform 0.15s, opacity 0.2s;
flex-shrink: 0;
}
.ai-chat-input__send:disabled {
background: var(--color-border);
cursor: default;
opacity: 0.55;
}
.ai-chat-input__send:not(:disabled):hover {
background: var(--color-primary);
transform: scale(1.05);
}
.ai-chat-input__send svg {
width: 14px;
height: 14px;
stroke: #fff;
stroke-width: 2;
}
.ai-chat-input__footer {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
margin-top: 0.375rem;
font-size: 0.625rem;
color: var(--color-subtle);
letter-spacing: 0.02em;
line-height: 1;
}
.ai-chat-input__footer svg {
width: 10px;
height: 10px;
stroke: var(--color-accent);
stroke-width: 1.5;
opacity: 0.7;
}
/* ====================================================================
EĞİTİM TAKVİMİ SAYFASI — .cal-* namespace
==================================================================== */
/* ── Page hero varyantı ─────────────────────────────────────────── */
.page-hero--takvim {
min-height: 440px;
}
.page-hero__deco--calendar {
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 20px;
opacity: 0.06;
pointer-events: none;
}
.page-hero__deco--calendar i {
width: 90px;
height: 90px;
stroke: #fff;
stroke-width: 0.8;
}
/* ── Hero stats şeridi ──────────────────────────────────────────── */
.hero-stats-strip {
display: flex;
align-items: center;
gap: 0;
margin-top: 40px;
padding: 20px 28px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-lg);
backdrop-filter: blur(8px);
width: fit-content;
flex-wrap: wrap;
row-gap: 16px;
}
.hero-stats-strip__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 28px;
text-align: center;
}
.hero-stats-strip__num {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: #fff;
line-height: 1;
}
.hero-stats-strip__label {
font-size: 0.72rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.hero-stats-strip__divider {
width: 1px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
flex-shrink: 0;
}
/* ── Cal Page Wrapper ───────────────────────────────────────────── */
.cal-page {
background: var(--color-surface);
min-height: 600px;
}
/* ── Controls Bar ───────────────────────────────────────────────── */
.cal-controls {
position: sticky;
top: var(--header-height, 72px);
z-index: 80;
background: #fff;
border-bottom: 1px solid var(--color-border);
transition: box-shadow 0.25s ease;
}
.cal-controls.is-stuck {
box-shadow: 0 4px 20px rgba(27, 45, 79, 0.10);
}
.cal-controls__inner {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
min-height: 64px;
}
.cal-controls__months {
display: flex;
align-items: center;
gap: 4px;
}
/* Ay sekmeleri */
.cal-month-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-full);
background: transparent;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 500;
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.cal-month-tab:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-accent-muted);
}
.cal-month-tab.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
font-weight: 600;
}
.cal-month-tab__short { display: none; }
.cal-controls__right {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
flex-wrap: wrap;
}
/* Kategori filtreleri */
.cal-cat-filter {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.cal-cat-btn {
padding: 5px 13px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-full);
background: transparent;
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.cal-cat-btn:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-accent-muted);
}
.cal-cat-btn.is-active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
font-weight: 600;
}
/* Controls ayırıcı */
.cal-controls__sep {
width: 1px;
height: 24px;
background: var(--color-border);
flex-shrink: 0;
}
/* Sonuç sayısı */
.cal-result-info {
font-size: 0.80rem;
color: var(--color-text-muted);
white-space: nowrap;
margin: 0;
}
.cal-result-info strong {
color: var(--color-primary);
font-weight: 600;
}
/* Görünüm geçiş butonları */
.cal-view-toggle {
display: flex;
align-items: center;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.cal-view-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 34px;
border: none;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: all 0.18s ease;
}
.cal-view-btn + .cal-view-btn {
border-left: 1.5px solid var(--color-border);
}
.cal-view-btn:hover {
background: var(--color-accent-muted);
color: var(--color-accent);
}
.cal-view-btn.is-active {
background: var(--color-primary);
color: #fff;
}
.cal-view-btn svg {
width: 16px;
height: 16px;
}
/* ── Views Container ────────────────────────────────────────────── */
.cal-views-container {
padding: 40px 0 80px;
}
.cal-views-inner {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
/* ── Loading skeleton ───────────────────────────────────────────── */
.cal-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 80px 0;
color: var(--color-text-muted);
font-size: 0.9rem;
}
.cal-loading__spinner {
width: 36px;
height: 36px;
border: 3px solid var(--color-accent-muted);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: calSpin 0.8s linear infinite;
}
@keyframes calSpin {
to { transform: rotate(360deg); }
}
/* ══════════════════════════════════════════════════════════════════
LIST VIEW — Timeline
══════════════════════════════════════════════════════════════════ */
/* Ay grubu */
.cal-month-group {
margin-bottom: 56px;
}
.cal-month-group:last-child {
margin-bottom: 0;
}
/* Ay başlığı */
.cal-month-label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-primary);
}
.cal-month-label__text {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
letter-spacing: -0.01em;
}
.cal-month-label__count {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-accent);
background: var(--color-accent-muted);
padding: 3px 10px;
border-radius: var(--radius-full);
}
/* Timeline */
.cal-timeline {
display: flex;
flex-direction: column;
gap: 0;
}
/* Olay kartı */
.cal-event {
display: grid;
grid-template-columns: 64px 32px 1fr auto;
gap: 0 0;
position: relative;
padding-bottom: 32px;
}
/* Son kart için alt boşluk kaldır */
.cal-timeline .cal-event:last-child {
padding-bottom: 0;
}
/* Tarih sütunu */
.cal-event__date {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 4px;
gap: 2px;
}
.cal-event__day-num {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
}
.cal-event__day-name {
font-size: 0.68rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Dikey çizgi + nokta */
.cal-event__line {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 0 12px;
}
.cal-event__dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--cat-color, var(--color-accent));
border: 2px solid #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-color, var(--color-accent)) 20%, transparent);
margin-top: 8px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.cal-event__line::after {
content: '';
position: absolute;
top: 22px;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
width: 1px;
background: var(--color-border);
}
.cal-timeline .cal-event:last-child .cal-event__line::after {
display: none;
}
/* Kart gövdesi */
.cal-event__body {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 20px 24px;
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
margin-left: 8px;
margin-bottom: 0;
position: relative;
}
.cal-event__body::before {
content: '';
position: absolute;
left: -7px;
top: 14px;
width: 12px;
height: 12px;
background: #fff;
border: 1px solid var(--color-border);
border-right: none;
border-bottom: none;
transform: rotate(-45deg);
border-radius: 2px 0 0 0;
}
.cal-event:hover .cal-event__body {
box-shadow: 0 6px 28px rgba(27, 45, 79, 0.1);
border-color: var(--color-accent-muted);
transform: translateY(-2px);
}
/* Badge'ler */
.cal-event__badges {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.cal-event__cat-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: 0.70rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
background: color-mix(in srgb, var(--cat-color) 12%, transparent);
color: var(--cat-color);
border: 1px solid color-mix(in srgb, var(--cat-color) 25%, transparent);
}
.cal-event__featured-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: 0.70rem;
font-weight: 600;
background: #fff8e6;
color: #b45309;
border: 1px solid #fde68a;
}
.cal-event__featured-badge svg {
width: 11px;
height: 11px;
fill: #f59e0b;
stroke: #f59e0b;
}
/* Başlık */
.cal-event__title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 12px;
line-height: 1.3;
}
.cal-event__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.cal-event__title a:hover {
color: var(--color-accent);
}
/* Meta bilgileri */
.cal-event__meta {
list-style: none;
margin: 0 0 16px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 20px;
}
.cal-event__meta li {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.78rem;
color: var(--color-text-muted);
}
.cal-event__meta svg {
width: 13px;
height: 13px;
stroke: var(--color-text-muted);
flex-shrink: 0;
}
/* Kontenjan */
.cal-quota {
margin-top: 4px;
}
.cal-quota__bar {
height: 5px;
background: #f1f5f9;
border-radius: var(--radius-full);
overflow: hidden;
margin-bottom: 6px;
}
.cal-quota__fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 0.6s ease;
}
.cal-quota__fill--available { background: var(--color-accent); }
.cal-quota__fill--limited { background: #f59e0b; }
.cal-quota__fill--full { background: #ef4444; }
.cal-quota__info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.cal-quota__ratio {
font-size: 0.72rem;
color: var(--color-text-muted);
}
.cal-quota__badge {
font-size: 0.70rem;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--color-accent-muted);
color: var(--color-accent);
}
.cal-quota__badge--limited {
background: #fef3c7;
color: #92400e;
}
.cal-quota__badge--full {
background: #fee2e2;
color: #991b1b;
}
/* Aksiyonlar sütunu */
.cal-event__actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 4px 0 0 20px;
min-width: 130px;
justify-content: flex-start;
}
.cal-event__register-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 18px;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.18s ease;
white-space: nowrap;
}
.cal-event__register-btn:hover {
background: var(--color-accent-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 114, 224, 0.3);
color: #fff;
}
.cal-event__register-btn svg {
width: 13px;
height: 13px;
}
.cal-event__register-btn--disabled {
background: #e2e8f0;
color: #94a3b8;
cursor: not-allowed;
}
.cal-event__register-btn--disabled:hover {
transform: none;
box-shadow: none;
background: #e2e8f0;
}
.cal-event__detail-link {
display: block;
text-align: center;
padding: 7px 18px;
font-size: 0.80rem;
font-weight: 500;
color: var(--color-text-muted);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
text-decoration: none;
transition: all 0.18s ease;
}
.cal-event__detail-link:hover {
border-color: var(--color-accent);
color: var(--color-accent);
background: var(--color-accent-muted);
}
/* ══════════════════════════════════════════════════════════════════
CALENDAR GRID VIEW
══════════════════════════════════════════════════════════════════ */
.cal-grid-wrap {
max-width: 900px;
margin: 0 auto;
}
/* Grid navigasyon */
.cal-grid-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.cal-grid-nav__title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.cal-grid-nav__btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
cursor: pointer;
color: var(--color-primary);
transition: all 0.18s ease;
}
.cal-grid-nav__btn:hover:not(:disabled) {
border-color: var(--color-accent);
background: var(--color-accent-muted);
color: var(--color-accent);
}
.cal-grid-nav__btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.cal-grid-nav__btn svg {
width: 18px;
height: 18px;
}
/* Calendar grid */
.cal-grid {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 2px 16px rgba(27, 45, 79, 0.06);
}
.cal-grid__header {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--color-primary);
}
.cal-grid__day-name {
padding: 12px 4px;
text-align: center;
font-size: 0.72rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.cal-grid__body {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-top: 1px solid var(--color-border);
}
/* Gün hücresi */
.cal-cell {
min-height: 100px;
border-right: 1px solid #f1f5f9;
border-bottom: 1px solid #f1f5f9;
padding: 8px 6px 6px;
position: relative;
transition: background 0.15s ease;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell--empty {
background: #fafbfc;
}
.cal-cell--today {
background: #f0f7ff;
}
.cal-cell--today .cal-cell__num {
background: var(--color-accent);
color: #fff;
}
.cal-cell--has-training {
background: #fafeff;
}
/* Gün numarası */
.cal-cell__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary-mid);
margin-bottom: 4px;
}
/* Grid eğitim etiketi */
.cal-cell__event {
display: block;
padding: 3px 6px;
margin-bottom: 3px;
border-radius: var(--radius-sm);
font-size: 0.68rem;
font-weight: 500;
color: #fff;
background: var(--cat-color, var(--color-accent));
text-decoration: none;
line-height: 1.3;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.cal-cell__event:hover {
opacity: 0.85;
transform: translateY(-1px);
color: #fff;
}
.cal-cell__event--limited {
background: #f59e0b;
}
.cal-cell__event--full {
background: #94a3b8;
text-decoration: line-through;
opacity: 0.7;
}
/* Legant */
.cal-grid-legend {
display: flex;
align-items: center;
gap: 20px;
margin-top: 16px;
padding: 0 4px;
flex-wrap: wrap;
}
.cal-grid-legend__item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.75rem;
color: var(--color-text-muted);
}
.cal-grid-legend__dot {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════
EMPTY STATE
══════════════════════════════════════════════════════════════════ */
.cal-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 20px;
gap: 16px;
}
.cal-empty__icon {
width: 72px;
height: 72px;
background: #f1f5f9;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
}
.cal-empty__icon svg {
width: 32px;
height: 32px;
}
.cal-empty__title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.cal-empty__desc {
font-size: 0.88rem;
color: var(--color-text-muted);
margin: 0;
max-width: 320px;
}
.cal-empty__reset {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border: 1.5px solid var(--color-accent);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-accent);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.cal-empty__reset:hover {
background: var(--color-accent);
color: #fff;
}
.cal-empty__reset svg {
width: 14px;
height: 14px;
}
/* ====================================================================
HAKKIMIZDA SAYFASI — .hk-* namespace
==================================================================== */
/* ── Page hero varyantı ─────────────────────────────────────────── */
.page-hero--hakkimizda {
min-height: 440px;
}
.page-hero__deco--about {
position: absolute;
right: 6%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 28px;
opacity: 0.06;
pointer-events: none;
}
.page-hero__deco--about i {
width: 80px;
height: 80px;
stroke: #fff;
stroke-width: 0.8;
}
/* ══════════════════════════════════════════════════════════════════
MANİFESTO SECTION
══════════════════════════════════════════════════════════════════ */
.hk-manifesto {
padding: 96px 0 88px;
background: #fff;
}
.hk-manifesto__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.hk-manifesto__title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.75rem);
font-weight: 800;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -0.03em;
margin: 12px 0 24px;
}
.hk-manifesto__title em {
font-style: normal;
color: var(--color-accent);
position: relative;
}
.hk-manifesto__accent-bar {
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
border-radius: var(--radius-full);
}
.hk-manifesto__lead {
font-size: 1.05rem;
font-weight: 600;
color: var(--color-primary);
line-height: 1.65;
margin-bottom: 18px;
}
.hk-manifesto__body {
font-size: 0.92rem;
color: var(--color-text-muted);
line-height: 1.75;
margin-bottom: 28px;
}
.hk-manifesto__pills {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.hk-manifesto__pills li {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.84rem;
font-weight: 600;
color: var(--color-primary);
padding: 9px 14px;
background: var(--color-accent-muted);
border-radius: var(--radius-md);
border: 1px solid rgba(30, 114, 224, 0.12);
}
.hk-manifesto__pills li svg {
width: 15px;
height: 15px;
stroke: var(--color-accent);
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════
MİSYON & VİZYON
══════════════════════════════════════════════════════════════════ */
.hk-mv {
padding: 88px 0;
background: var(--color-surface);
}
.hk-mv__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.hk-mv__header {
text-align: center;
margin-bottom: 52px;
}
.hk-mv__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 8px 0 0;
}
.hk-mv__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* M&V Card */
.hk-mv-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 0;
transition: box-shadow 0.25s ease, transform 0.25s ease;
position: relative;
overflow: hidden;
}
.hk-mv-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
}
.hk-mv-card--mission::before { background: var(--color-accent); }
.hk-mv-card--vision::before { background: #7c3aed; }
.hk-mv-card--values::before { background: #d97706; }
.hk-mv-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
.hk-mv-card__icon-wrap {
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.hk-mv-card--mission .hk-mv-card__icon-wrap {
background: var(--color-accent-muted);
color: var(--color-accent);
}
.hk-mv-card--vision .hk-mv-card__icon-wrap {
background: #f3eeff;
color: #7c3aed;
}
.hk-mv-card--values .hk-mv-card__icon-wrap {
background: #fef3c7;
color: #d97706;
}
.hk-mv-card__icon-wrap svg {
width: 24px;
height: 24px;
}
.hk-mv-card__tag {
font-size: 0.70rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin-bottom: 8px;
}
.hk-mv-card__title {
font-family: var(--font-heading);
font-size: 1.05rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 12px;
line-height: 1.35;
}
.hk-mv-card__text {
font-size: 0.84rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0 0 20px;
flex: 1;
}
.hk-mv-card__features {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 16px;
border-top: 1px solid var(--color-border);
}
.hk-mv-card__features span {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-muted);
}
.hk-mv-card__features svg {
width: 13px;
height: 13px;
flex-shrink: 0;
}
.hk-mv-card--mission .hk-mv-card__features svg { stroke: var(--color-accent); }
.hk-mv-card--vision .hk-mv-card__features svg { stroke: #7c3aed; }
.hk-mv-card--values .hk-mv-card__features svg { stroke: #d97706; }
/* ══════════════════════════════════════════════════════════════════
TARİHÇE — Center Timeline
══════════════════════════════════════════════════════════════════ */
.hk-timeline-section {
padding: 96px 0;
background: #fff;
}
.hk-timeline-section__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.hk-timeline-section__header {
text-align: center;
margin-bottom: 72px;
}
.hk-timeline-section__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 8px 0 12px;
}
.hk-timeline-section__desc {
font-size: 0.92rem;
color: var(--color-text-muted);
max-width: 440px;
margin: 0 auto;
}
/* Timeline wrapper */
.hk-timeline {
position: relative;
max-width: 960px;
margin: 0 auto;
}
/* Dikey merkez çizgi */
.hk-timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
background: linear-gradient(to bottom,
transparent 0%,
var(--color-border) 8%,
var(--color-border) 92%,
transparent 100%
);
}
/* Timeline item */
.hk-timeline__item {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 0;
align-items: start;
margin-bottom: 56px;
position: relative;
}
.hk-timeline__item:last-child {
margin-bottom: 0;
}
/* Solda içerik (--left) */
.hk-timeline__item--left .hk-timeline__content {
grid-column: 1;
text-align: right;
padding-right: 24px;
}
.hk-timeline__item--left .hk-timeline__node {
grid-column: 2;
}
.hk-timeline__item--left .hk-timeline__spacer {
grid-column: 3;
}
/* Sağda içerik (--right) */
.hk-timeline__item--right .hk-timeline__spacer {
grid-column: 1;
}
.hk-timeline__item--right .hk-timeline__node {
grid-column: 2;
}
.hk-timeline__item--right .hk-timeline__content {
grid-column: 3;
text-align: left;
padding-left: 24px;
}
/* Node (merkez dot) */
.hk-timeline__node {
display: flex;
justify-content: center;
padding-top: 8px;
}
.hk-timeline__dot {
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
color: var(--color-text-muted);
}
.hk-timeline__dot svg {
width: 18px;
height: 18px;
}
.hk-timeline__dot--active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
box-shadow: 0 0 0 6px var(--color-accent-muted);
}
.hk-timeline__item:hover .hk-timeline__dot {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* İçerik kartı */
.hk-timeline__content {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 24px 28px;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.hk-timeline__item:hover .hk-timeline__content {
box-shadow: var(--shadow-md);
border-color: var(--color-accent-muted);
}
.hk-timeline__content--featured {
border-color: var(--color-accent);
background: linear-gradient(135deg, #f0f7ff 0%, #fff 100%);
}
/* Yıl badge */
.hk-timeline__year-badge {
display: inline-flex;
align-items: center;
padding: 3px 12px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.hk-timeline__year-badge--now {
background: var(--color-accent);
}
.hk-timeline__event-title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 8px;
line-height: 1.35;
}
.hk-timeline__event-desc {
font-size: 0.82rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0 0 12px;
}
.hk-timeline__meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.hk-timeline__item--left .hk-timeline__meta {
justify-content: flex-end;
}
.hk-timeline__meta span {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
font-weight: 600;
color: var(--color-accent);
}
.hk-timeline__meta svg {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════════
STATS SECTION (dark)
══════════════════════════════════════════════════════════════════ */
.hk-stats-section {
padding: 88px 0;
background: var(--color-primary);
position: relative;
overflow: hidden;
}
.hk-stats-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 28px 28px;
pointer-events: none;
}
.hk-stats-section__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 1;
}
.hk-stats-section__header {
text-align: center;
margin-bottom: 56px;
}
.hk-stats-section__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
margin: 8px 0 0;
}
.hk-stats-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.hk-stat-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
padding: 28px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
transition: background 0.25s ease, border-color 0.25s ease;
backdrop-filter: blur(8px);
}
.hk-stat-card:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.2);
}
.hk-stat-card__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: rgba(30, 114, 224, 0.2);
border: 1px solid rgba(30, 114, 224, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent-muted);
}
.hk-stat-card__icon svg {
width: 22px;
height: 22px;
}
.hk-stat-card__num {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
color: #fff;
line-height: 1;
display: block;
}
.hk-stat-card__label {
font-size: 0.75rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.3;
display: block;
}
.hk-stat-card__body {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* ══════════════════════════════════════════════════════════════════
DEĞERLER GRID
══════════════════════════════════════════════════════════════════ */
.hk-values {
padding: 96px 0;
background: var(--color-surface);
}
.hk-values__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.hk-values__header {
text-align: center;
margin-bottom: 56px;
}
.hk-values__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 8px 0 12px;
}
.hk-values__desc {
font-size: 0.92rem;
color: var(--color-text-muted);
max-width: 440px;
margin: 0 auto;
line-height: 1.65;
}
.hk-values__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Value card */
.hk-value-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 32px 28px;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.hk-value-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: transparent;
}
.hk-value-card__icon-wrap {
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--val-color) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--val-color) 20%, transparent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--val-color);
transition: transform 0.25s ease;
}
.hk-value-card:hover .hk-value-card__icon-wrap {
transform: scale(1.1) rotate(-4deg);
}
.hk-value-card__icon-wrap svg {
width: 24px;
height: 24px;
}
.hk-value-card__title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 10px;
}
.hk-value-card__desc {
font-size: 0.84rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════
TEAM SECTION
══════════════════════════════════════════════════════════════════ */
.hk-team {
padding: 96px 0;
background: #fff;
}
.hk-team__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.hk-team__header {
text-align: center;
margin-bottom: 56px;
}
.hk-team__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 2.5vw, 2.25rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 8px 0 12px;
}
.hk-team__desc {
font-size: 0.92rem;
color: var(--color-text-muted);
max-width: 480px;
margin: 0 auto;
line-height: 1.65;
}
.hk-team__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
/* Team card */
.hk-team-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hk-team-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}
/* Photo placeholder */
.hk-team-card__photo {
height: 180px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hk-team-card__photo--blue { background: linear-gradient(135deg, #1e3a6e 0%, #1e72e0 100%); }
.hk-team-card__photo--purple { background: linear-gradient(135deg, #3b1d7c 0%, #7c3aed 100%); }
.hk-team-card__photo--green { background: linear-gradient(135deg, #064e3b 0%, #059669 100%); }
.hk-team-card__photo--orange { background: linear-gradient(135deg, #78350f 0%, #f59e0b 100%); }
.hk-team-card__initials {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.04em;
position: relative;
z-index: 1;
}
.hk-team-card__photo-deco {
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
border: 40px solid rgba(255, 255, 255, 0.06);
bottom: -60px;
right: -40px;
}
/* Card body */
.hk-team-card__body {
padding: 20px 22px 24px;
}
.hk-team-card__name {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 4px;
}
.hk-team-card__role {
font-size: 0.78rem;
font-weight: 500;
color: var(--color-accent);
margin: 0;
}
.hk-team-card__divider {
height: 1px;
background: var(--color-border);
margin: 14px 0;
}
.hk-team-card__bio {
font-size: 0.79rem;
color: var(--color-text-muted);
line-height: 1.65;
margin: 0 0 14px;
}
.hk-team-card__tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.hk-team-card__tags li {
font-size: 0.68rem;
font-weight: 600;
padding: 2px 9px;
background: var(--color-accent-muted);
color: var(--color-accent);
border-radius: var(--radius-full);
border: 1px solid rgba(30, 114, 224, 0.15);
}
/* Team footer */
.hk-team__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 20px 28px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
flex-wrap: wrap;
}
.hk-team__footer-text {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.88rem;
color: var(--color-text-muted);
margin: 0;
}
.hk-team__footer-text svg {
width: 16px;
height: 16px;
stroke: var(--color-accent);
}
.hk-team__all-link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 22px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.hk-team__all-link:hover {
background: var(--color-primary-mid);
color: #fff;
}
.hk-team__all-link svg {
width: 14px;
height: 14px;
}
/* ══════════════════════════════════════════════════════════════════
NEDEN ETKİN AKADEMİ — Why section
══════════════════════════════════════════════════════════════════ */
.hk-why {
padding: 96px 0;
background: var(--color-surface);
}
.hk-why__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 360px 1fr;
gap: 80px;
align-items: start;
}
.hk-why__left {
position: sticky;
top: calc(var(--header-height, 72px) + 40px);
}
.hk-why__title {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 2.8vw, 2.5rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.03em;
margin: 8px 0 20px;
line-height: 1.15;
}
.hk-why__lead {
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 28px;
}
.hk-why__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--color-accent);
color: #fff;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
transition: all 0.18s ease;
}
.hk-why__cta:hover {
background: var(--color-accent-hover);
color: #fff;
box-shadow: 0 4px 16px rgba(30, 114, 224, 0.3);
transform: translateY(-1px);
}
.hk-why__cta svg {
width: 14px;
height: 14px;
}
/* Why list */
.hk-why__list {
display: flex;
flex-direction: column;
gap: 0;
}
.hk-why-item {
display: grid;
grid-template-columns: 64px 1fr;
gap: 0 20px;
padding: 28px 0;
border-bottom: 1px solid var(--color-border);
align-items: start;
transition: background 0.15s ease;
}
.hk-why-item:first-child {
padding-top: 0;
}
.hk-why-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.hk-why-item__num {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 900;
color: var(--color-border);
line-height: 1;
padding-top: 2px;
letter-spacing: -0.04em;
transition: color 0.25s ease;
}
.hk-why-item:hover .hk-why-item__num {
color: var(--color-accent-muted);
}
.hk-why-item__title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 8px;
}
.hk-why-item__desc {
font-size: 0.84rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════
SERTİFİKALAR
══════════════════════════════════════════════════════════════════ */
.hk-certs {
padding: 80px 0;
background: #fff;
}
.hk-certs__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.hk-certs__header {
text-align: center;
margin-bottom: 48px;
}
.hk-certs__title {
font-family: var(--font-heading);
font-size: clamp(1.35rem, 2vw, 2rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 8px 0 0;
}
.hk-certs__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.hk-cert-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 28px 24px;
text-align: center;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.hk-cert-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.hk-cert-card__icon {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: var(--color-accent-muted);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: var(--color-accent);
}
.hk-cert-card__icon svg {
width: 24px;
height: 24px;
}
.hk-cert-card__name {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 8px;
}
.hk-cert-card__desc {
font-size: 0.78rem;
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
/* ====================================================================
İLETİŞİM SAYFASI — .contact-* namespace
==================================================================== */
/* ── Page hero varyantı ─────────────────────────────────────────── */
.page-hero--iletisim {
min-height: 400px;
}
.page-hero__deco--contact {
position: absolute;
right: 6%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 28px;
opacity: 0.06;
pointer-events: none;
}
.page-hero__deco--contact i {
width: 80px;
height: 80px;
stroke: #fff;
stroke-width: 0.8;
}
/* ══════════════════════════════════════════════════════════════════
CONTACT CARDS
══════════════════════════════════════════════════════════════════ */
.contact-cards {
padding: 56px 0 48px;
background: var(--color-surface);
position: relative;
z-index: 2;
}
.contact-cards__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.contact-cards__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: -90px;
}
.contact-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 28px 24px;
text-align: center;
box-shadow: var(--shadow-md);
transition: box-shadow 0.25s ease, transform 0.25s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.contact-card__icon {
width: 60px;
height: 60px;
border-radius: var(--radius-full);
background: var(--color-accent-muted);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: var(--color-accent);
}
.contact-card__icon svg {
width: 26px;
height: 26px;
}
.contact-card__title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 8px;
}
.contact-card__desc {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0 0 8px;
}
.contact-card__desc--address {
line-height: 1.65;
}
.contact-card__link {
color: var(--color-text);
text-decoration: none;
font-weight: 500;
transition: color 0.15s ease;
}
.contact-card__link:hover {
color: var(--color-accent);
}
.contact-card__note {
font-size: 0.72rem;
color: var(--color-text-muted);
opacity: 0.8;
}
/* ══════════════════════════════════════════════════════════════════
CONTACT MAIN — Form + Map
══════════════════════════════════════════════════════════════════ */
.contact-main {
padding: 64px 0 96px;
background: var(--color-surface);
}
.contact-main__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: start;
}
/* Form */
.contact-form-wrap {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 40px;
box-shadow: var(--shadow-sm);
}
.contact-form__header {
margin-bottom: 28px;
}
.contact-form__title {
font-family: var(--font-heading);
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 6px 0 12px;
}
.contact-form__lead {
font-size: 0.86rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
/* Success / Error */
.contact-success {
text-align: center;
padding: 40px 24px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius-xl);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.contact-success__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #22c55e;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.contact-success__icon svg {
width: 32px;
height: 32px;
}
.contact-success__title {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.contact-success__desc {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.65;
max-width: 360px;
margin: 0;
}
.contact-success__reset {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.contact-success__reset:hover {
background: var(--color-primary-mid);
}
.contact-error {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: var(--radius-md);
color: #991b1b;
font-size: 0.82rem;
font-weight: 500;
margin-bottom: 20px;
}
.contact-error svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Form row / fields */
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 0;
}
.contact-form__field {
margin-bottom: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-form__field--company {
grid-column: 1 / -1;
}
.contact-form__label {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary);
display: flex;
align-items: center;
gap: 3px;
}
.contact-form__required {
color: #ef4444;
font-weight: 700;
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
font-family: inherit;
font-size: 0.88rem;
color: var(--color-text);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
outline: none;
resize: vertical;
}
.contact-form__input::placeholder,
.contact-form__select::placeholder,
.contact-form__textarea::placeholder {
color: #94a3b8;
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-muted);
}
.contact-form__input:required:invalid:not(:placeholder-shown) {
border-color: #fca5a5;
}
.contact-form__select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
cursor: pointer;
}
.contact-form__textarea {
min-height: 140px;
resize: vertical;
}
/* Checkbox */
.contact-form__privacy {
margin-bottom: 22px;
}
.contact-form__checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
position: relative;
}
.contact-form__checkbox {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.contact-form__checkmark {
width: 18px;
height: 18px;
min-width: 18px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
transition: all 0.18s ease;
}
.contact-form__checkmark::after {
content: '';
width: 9px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
opacity: 0;
transition: opacity 0.18s ease;
}
.contact-form__checkbox:checked + .contact-form__checkmark {
background: var(--color-accent);
border-color: var(--color-accent);
}
.contact-form__checkbox:checked + .contact-form__checkmark::after {
opacity: 1;
}
.contact-form__checkbox-text {
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.55;
}
.contact-form__checkbox-text a {
color: var(--color-accent);
font-weight: 600;
text-decoration: underline;
}
.contact-form__checkbox-text a:hover {
color: var(--color-accent-hover);
}
/* Submit */
.contact-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 28px;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.contact-form__submit:hover {
background: var(--color-accent-hover);
box-shadow: 0 4px 16px rgba(30, 114, 224, 0.3);
transform: translateY(-1px);
}
.contact-form__submit svg {
width: 16px;
height: 16px;
}
/* Side: map + transport */
.contact-side {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-map {
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
background: var(--color-surface-2);
}
.contact-map iframe {
display: block;
width: 100%;
border: 0;
filter: grayscale(20%);
}
.contact-transport {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 28px 30px;
box-shadow: var(--shadow-sm);
}
.contact-transport__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 16px;
}
.contact-transport__title svg {
width: 18px;
height: 18px;
stroke: var(--color-accent);
}
.contact-transport__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-transport__list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.84rem;
color: var(--color-text-muted);
line-height: 1.55;
}
.contact-transport__list li svg {
width: 16px;
height: 16px;
flex-shrink: 0;
stroke: var(--color-accent);
}
/* ══════════════════════════════════════════════════════════════════
CONTACT FAQ
══════════════════════════════════════════════════════════════════ */
.contact-faq {
padding: 80px 0;
background: #fff;
}
.contact-faq__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.contact-faq__header {
text-align: center;
margin-bottom: 44px;
}
.contact-faq__title {
font-family: var(--font-heading);
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 6px 0 0;
}
.contact-faq__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.contact-faq__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
overflow: hidden;
background: #fff;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-faq__item:hover {
box-shadow: var(--shadow-sm);
border-color: var(--color-accent-muted);
}
.contact-faq__question {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 22px;
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
cursor: pointer;
list-style: none;
transition: color 0.18s ease, background 0.18s ease;
position: relative;
}
.contact-faq__question::-webkit-details-marker { display: none; }
.contact-faq__question svg {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke: var(--color-accent);
transition: transform 0.25s ease;
}
.contact-faq__item[open] .contact-faq__question svg {
transform: rotate(180deg);
}
.contact-faq__question:hover {
color: var(--color-accent);
background: var(--color-surface);
}
.contact-faq__answer {
padding: 0 22px 22px;
font-size: 0.84rem;
color: var(--color-text-muted);
line-height: 1.7;
}
.contact-faq__answer p {
margin: 0;
}
/* ══════════════════════════════════════════════════════════════════
SOCIAL SECTION
══════════════════════════════════════════════════════════════════ */
.contact-social {
padding: 64px 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.contact-social__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
text-align: center;
}
.contact-social__header {
margin-bottom: 28px;
}
.contact-social__title {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 6px;
}
.contact-social__desc {
font-size: 0.84rem;
color: var(--color-text-muted);
margin: 0;
}
.contact-social__grid {
display: inline-flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
justify-content: center;
}
.contact-social__link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-full);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary);
text-decoration: none;
transition: all 0.18s ease;
min-width: 150px;
justify-content: center;
}
.contact-social__link:hover {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.contact-social__link svg {
width: 18px;
height: 18px;
}
/* ====================================================================
ÖN KAYIT SAYFASI — .reg-* namespace
==================================================================== */
/* ── Page hero varyantı ─────────────────────────────────────────── */
.page-hero--onkayit {
min-height: 400px;
}
.page-hero__deco--reg {
position: absolute;
right: 6%;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 28px;
opacity: 0.06;
pointer-events: none;
}
.page-hero__deco--reg i {
width: 80px;
height: 80px;
stroke: #fff;
stroke-width: 0.8;
}
/* ══════════════════════════════════════════════════════════════════
COURSE SELECTION CARDS
══════════════════════════════════════════════════════════════════ */
.reg-courses {
padding: 88px 0 56px;
background: var(--color-surface);
}
.reg-courses__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
}
.reg-courses__header {
text-align: center;
margin-bottom: 44px;
}
.reg-courses__title {
font-family: var(--font-heading);
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 6px 0 12px;
}
.reg-courses__desc {
font-size: 0.88rem;
color: var(--color-text-muted);
line-height: 1.65;
margin: 0;
}
.reg-courses__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.reg-course-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 20px 22px;
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-xl);
cursor: pointer;
text-align: left;
transition: all 0.22s ease;
position: relative;
overflow: hidden;
}
.reg-course-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--color-accent);
opacity: 0;
transition: opacity 0.22s ease;
}
.reg-course-card:hover {
border-color: var(--color-accent);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.reg-course-card:hover::before {
opacity: 1;
}
.reg-course-card.is-selected {
border-color: var(--color-accent);
background: #f0f7ff;
box-shadow: 0 0 0 3px var(--color-accent-muted);
}
.reg-course-card.is-selected::before {
opacity: 1;
}
.reg-course-card__date {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
color: var(--color-text-muted);
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.reg-course-card__title {
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1.4;
margin: 0 0 14px;
flex: 1;
}
.reg-course-card__cta {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: 0.73rem;
font-weight: 600;
color: var(--color-accent);
background: var(--color-accent-muted);
border: 1px solid transparent;
transition: all 0.18s ease;
width: fit-content;
}
.reg-course-card__cta svg {
width: 12px;
height: 12px;
display: none;
}
.reg-course-card.is-selected .reg-course-card__cta {
background: var(--color-accent);
color: #fff;
}
.reg-course-card.is-selected .reg-course-card__cta svg {
display: inline;
}
.reg-course-card__cta-selected {
display: none;
}
.reg-course-card.is-selected .reg-course-card__cta-text { display: none; }
.reg-course-card.is-selected .reg-course-card__cta-selected { display: inline; }
/* ══════════════════════════════════════════════════════════════════
REGISTRATION FORM SECTION
══════════════════════════════════════════════════════════════════ */
.reg-form-section {
padding: 48px 0 96px;
background: var(--color-surface);
}
.reg-form-section__container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1.1fr 0.45fr;
gap: 40px;
align-items: start;
}
.reg-form-wrap {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 40px;
box-shadow: var(--shadow-sm);
}
.reg-form__header {
margin-bottom: 28px;
}
.reg-form__title {
font-family: var(--font-heading);
font-size: clamp(1.35rem, 2.2vw, 2rem);
font-weight: 800;
color: var(--color-primary);
letter-spacing: -0.02em;
margin: 6px 0 12px;
}
.reg-form__lead {
font-size: 0.86rem;
color: var(--color-text-muted);
line-height: 1.7;
margin: 0;
}
/* Success / Error */
.reg-success {
text-align: center;
padding: 44px 24px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius-xl);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.reg-success__icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #22c55e;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.reg-success__icon svg {
width: 30px;
height: 30px;
}
.reg-success__title {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.reg-success__desc {
font-size: 0.85rem;
color: var(--color-text-muted);
line-height: 1.65;
max-width: 360px;
margin: 0;
}
.reg-success__reset {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 24px;
background: var(--color-primary);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.reg-success__reset svg {
width: 14px;
height: 14px;
}
.reg-success__reset:hover {
background: var(--color-primary-mid);
}
.reg-error {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: var(--radius-md);
color: #991b1b;
font-size: 0.82rem;
font-weight: 500;
margin-bottom: 20px;
}
.reg-error svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
/* Form rows / fields */
.reg-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 0;
}
.reg-form__field {
margin-bottom: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.reg-form__field--selected-course {
margin-bottom: 24px;
padding: 18px;
background: var(--color-surface);
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-lg);
}
.reg-form__label {
font-size: 0.78rem;
font-weight: 600;
color: var(--color-primary);
display: flex;
align-items: center;
gap: 3px;
}
.reg-form__required {
color: #ef4444;
font-weight: 700;
}
.reg-form__input,
.reg-form__textarea {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: #fff;
font-family: inherit;
font-size: 0.88rem;
color: var(--color-text);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
outline: none;
resize: vertical;
}
.reg-form__input::placeholder,
.reg-form__textarea::placeholder {
color: #94a3b8;
}
.reg-form__input:focus,
.reg-form__textarea:focus {
border-color: var(--color-accent);
box-shadow: 0 0 0 4px var(--color-accent-muted);
}
.reg-form__input:required:invalid:not(:placeholder-shown) {
border-color: #fca5a5;
}
.reg-form__textarea {
min-height: 120px;
resize: vertical;
}
/* Course display */
.reg-form__course-display {
display: flex;
flex-direction: column;
gap: 2px;
}
.reg-form__course-placeholder {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.reg-form__course-placeholder svg {
width: 16px;
height: 16px;
stroke: var(--color-text-muted);
}
.reg-form__course-display.has-course .reg-form__course-placeholder { display: none; }
.reg-form__course-name {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
}
.reg-form__course-change {
font-size: 0.72rem;
color: var(--color-text-muted);
}
.reg-form__help-text {
font-size: 0.72rem;
color: var(--color-text-muted);
margin: 10px 0 0;
line-height: 1.5;
}
/* Checkbox */
.reg-form__privacy {
margin-bottom: 22px;
}
.reg-form__checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
position: relative;
}
.reg-form__checkbox {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.reg-form__checkmark {
width: 18px;
height: 18px;
min-width: 18px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
transition: all 0.18s ease;
}
.reg-form__checkmark::after {
content: '';
width: 9px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
opacity: 0;
transition: opacity 0.18s ease;
}
.reg-form__checkbox:checked + .reg-form__checkmark {
background: var(--color-accent);
border-color: var(--color-accent);
}
.reg-form__checkbox:checked + .reg-form__checkmark::after {
opacity: 1;
}
.reg-form__checkbox-text {
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.55;
}
.reg-form__checkbox-text a {
color: var(--color-accent);
font-weight: 600;
text-decoration: underline;
}
.reg-form__checkbox-text a:hover {
color: var(--color-accent-hover);
}
/* Submit */
.reg-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px 28px;
background: var(--color-accent);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.reg-form__submit:hover {
background: var(--color-accent-hover);
box-shadow: 0 4px 16px rgba(30, 114, 224, 0.3);
transform: translateY(-1px);
}
.reg-form__submit svg {
width: 16px;
height: 16px;
}
/* ══════════════════════════════════════════════════════════════════
REGISTRATION INFO SIDEBAR
══════════════════════════════════════════════════════════════════ */
.reg-info {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
padding: 32px;
box-shadow: var(--shadow-sm);
position: sticky;
top: calc(var(--header-height, 72px) + 32px);
}
.reg-info__title {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 800;
color: var(--color-primary);
margin: 0 0 24px;
letter-spacing: -0.01em;
}
.reg-info__list {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.reg-info__item {
display: flex;
gap: 12px;
align-items: flex-start;
}
.reg-info__icon {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: var(--radius-lg);
background: var(--color-accent-muted);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
}
.reg-info__icon svg {
width: 18px;
height: 18px;
}
.reg-info__item-title {
font-family: var(--font-heading);
font-size: 0.88rem;
font-weight: 700;
color: var(--color-primary);
margin: 0 0 2px;
}
.reg-info__item-desc {
font-size: 0.76rem;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
}
.reg-info__contact {
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
.reg-info__contact-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-primary);
margin: 0 0 12px;
}
.reg-info__contact-link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: var(--radius-md);
font-size: 0.82rem;
font-weight: 600;
color: var(--color-text);
text-decoration: none;
transition: all 0.18s ease;
margin-bottom: 6px;
border: 1px solid var(--color-border);
}
.reg-info__contact-link:hover {
background: var(--color-accent);
color: #fff;
border-color: var(--color-accent);
}
.reg-info__contact-link svg {
width: 14px;
height: 14px;
}
/* ====================================================================
MEGA MENU — Kurslarımız
==================================================================== */
/* ── Nav item with mega menu ─────────────────────────────────────── */
.nav-primary__item {
position: relative;
}
.nav-primary__item--mega {
position: static;
}
/* Fare menü ile mega menü arasındaki boşlukta hover'ı korumak için görünmez köprü */
.nav-primary__item--mega::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 18px;
background: transparent;
z-index: 99;
pointer-events: auto;
opacity: 0;
}
.nav-primary__link--mega {
display: inline-flex;
align-items: center;
gap: 5px;
position: relative;
}
.nav-primary__chevron {
width: 14px;
height: 14px;
transition: transform 0.25s ease;
}
.nav-primary__item--mega:hover .nav-primary__chevron,
.nav-primary__item--mega:focus-within .nav-primary__chevron {
transform: rotate(180deg);
}
/* ── Mega menu container ────────────────────────────────────────── */
.mega-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
padding-top: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 0.18s ease, visibility 0s linear 0.18s, transform 0.18s ease;
pointer-events: none;
}
.nav-primary__item--mega:hover > .mega-menu,
.nav-primary__item--mega:focus-within > .mega-menu,
.nav-primary__item--mega.is-mega-open > .mega-menu,
.mega-menu:hover,
.mega-menu:focus-within,
.mega-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.22s ease, visibility 0s linear 0s, transform 0.22s ease;
}
/* IE / fallback için hover durumları */
.mega-menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* İnner wrapper */
.mega-menu__inner {
max-width: var(--container-width);
margin: 0 auto;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
display: grid;
grid-template-columns: 260px 1fr 240px;
gap: 0;
overflow: hidden;
position: relative;
}
/* ── Featured panel (sol) ───────────────────────────────────────── */
.mega-menu__featured {
background: var(--color-primary);
color: #fff;
padding: 34px 30px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
overflow: hidden;
}
.mega-menu__featured::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(30, 114, 224, 0.25), transparent 60%);
pointer-events: none;
}
.mega-menu__featured-tag {
display: inline-flex;
width: fit-content;
padding: 3px 10px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.85);
position: relative;
z-index: 1;
}
.mega-menu__featured-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
margin: 6px 0;
color: var(--color-accent-muted);
position: relative;
z-index: 1;
}
.mega-menu__featured-icon svg {
width: 24px;
height: 24px;
}
.mega-menu__featured-title {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.3;
position: relative;
z-index: 1;
}
.mega-menu__featured-desc {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.65;
margin: 0 0 10px;
position: relative;
z-index: 1;
}
.mega-menu__featured-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--color-accent);
color: #fff;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 600;
text-decoration: none;
width: fit-content;
transition: all 0.18s ease;
position: relative;
z-index: 1;
}
.mega-menu__featured-link:hover {
background: var(--color-accent-hover);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.mega-menu__featured-link svg {
width: 14px;
height: 14px;
}
/* ── Content grid (orta) ────────────────────────────────────────── */
.mega-menu__content {
padding: 30px 36px;
background: #fff;
}
.mega-menu__title {
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 800;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 18px;
}
.mega-menu__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px 18px;
}
.mega-menu__col {
display: flex;
flex-direction: column;
gap: 8px;
}
.mega-menu__category-head {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
padding-bottom: 6px;
border-bottom: 2px solid var(--color-border);
}
.mega-menu__category-head svg {
width: 14px;
height: 14px;
stroke: var(--color-accent);
}
.mega-menu__course-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.mega-menu__course-list li {
border-bottom: 1px solid var(--color-border-light);
}
.mega-menu__course-list li:last-child {
border-bottom: none;
}
.mega-menu__course-link {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
font-size: 0.82rem;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
transition: all 0.15s ease;
}
.mega-menu__course-link svg {
width: 15px;
height: 15px;
flex-shrink: 0;
stroke: var(--color-text-muted);
transition: stroke 0.15s ease;
}
.mega-menu__course-link:hover {
color: var(--color-accent);
padding-left: 4px;
}
.mega-menu__course-link:hover svg {
stroke: var(--color-accent);
}
/* ── CTA panel (sağ) ────────────────────────────────────────────── */
.mega-menu__cta {
padding: 34px 30px;
background: var(--color-surface);
border-left: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: 8px;
text-align: center;
align-items: center;
}
.mega-menu__cta-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-accent);
margin-bottom: 4px;
}
.mega-menu__cta-icon svg {
width: 24px;
height: 24px;
}
.mega-menu__cta-title {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 800;
color: var(--color-primary);
margin: 0;
}
.mega-menu__cta-desc {
font-size: 0.78rem;
color: var(--color-text-muted);
line-height: 1.6;
margin: 0 0 8px;
}
.mega-menu__cta-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--color-primary);
color: #fff;
border-radius: var(--radius-md);
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.mega-menu__cta-btn:hover {
background: var(--color-primary-mid);
color: #fff;
}
.mega-menu__cta-btn svg {
width: 14px;
height: 14px;
}
/* =============================================================================
COURSE CARD IMAGE + PAGINATION
============================================================================= */
/* Course card with actual image */
.course-card__image .course-card__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.course-card:hover .course-card__image .course-card__photo {
transform: scale(1.04);
}
.course-card__image .course-card__img-placeholder {
aspect-ratio: 16 / 9;
}
/* Pagination */
.pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 2.5rem;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
background: var(--color-background);
border: 1px solid var(--color-border);
text-decoration: none;
transition: all 0.15s ease;
}
.pagination a:hover {
color: var(--color-primary);
border-color: var(--color-primary);
background: var(--clr-primary-light);
}
.pagination .current {
color: #fff;
background: var(--color-primary);
border-color: var(--color-primary);
}
.pagination .prev,
.pagination .next {
gap: 0.35rem;
}
.pagination .disabled {
opacity: 0.5;
cursor: not-allowed;
}