/* -------------------------------------------------------------
   Uzm. Klinik Psikolog Derya Akcan - Premium CSS Design System
   ------------------------------------------------------------- */

/* Reset & Base Variables */
:root {
    /* Color Palette */
    --color-bg-primary: #FAF8F5;   /* Warm off-white/cream background */
    --color-bg-secondary: #F0EDE9; /* Muted warm sand background */
    --color-bg-card: #FFFFFF;      /* Clean card background */
    --color-text-main: #2A2E35;    /* Deep charcoal for body text */
    --color-text-dark: #1A1C1E;    /* Near-black for headings */
    --color-text-muted: #666E7A;  /* Soft gray for secondary text */
    
    /* Accent Burgundy (Matching logo) */
    --color-accent: #9A2C3C;       /* Elegant burgundy primary */
    --color-accent-light: #FCEFF0; /* Soft pink-burgundy for highlights */
    /* Üst şerit zemini — tek yerden değiştirilebilsin diye değişken. */
    --color-topbar: #3A1E26;       /* Derin şarap */
    --color-accent-hover: #7E202D; /* Darker burgundy for interactive states */
    
    /* UI Elements */
    --border-color: #E2DDD5;
    --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 40px rgba(154, 44, 60, 0.05); /* Subtle burgundy tinted shadow */
    
    /* Layout */
    --max-width: 1200px;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: 'Playfair Display', Georgia, Cambria, serif;
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    line-height: 1.65;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-dark);
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.25;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Common Layout Components */
.section-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.align-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

.text-highlight {
    color: var(--color-accent);
    font-family: inherit;
    position: relative;
    display: inline-block;
}

/* Subheadings & Section Headers */
.section-header {
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-tag {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-accent);
    display: block;
    margin-bottom: 0.75rem;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 4px;
    transition: var(--transition-smooth);
    cursor: pointer;
    font-family: var(--font-sans);
    border: none;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(154, 44, 60, 0.2);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-text-dark);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-text-dark);
    transform: translateY(-2px);
}

.btn-white {
    background-color: #FFFFFF;
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.btn-white:hover {
    background-color: var(--color-bg-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-large {
    padding: 1.1rem 2.5rem;
    font-size: 1.05rem;
}

.btn-icon {
    margin-left: 8px;
    transition: transform var(--transition-fast);
}

.btn:hover .btn-icon {
    transform: translateX(4px);
}

/* Images & Frames */
.image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    pointer-events: none;
}

/* -------------------------------------------------------------
   Header / Navigation
   ------------------------------------------------------------- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(250, 248, 245, 0.85); /* Glassmorphism start */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 221, 213, 0.4);
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    padding: 1.25rem 0;
}

/* Kaydırınca header'ın BOYUTU DEĞİŞMİYOR — yalnız zemini koyulaşıp
   gölge alıyor.

   Önce dolgu 1.25rem'den 0.75rem'e, logo 48'den 40 pikselye iniyordu:
   başlık 24 piksel kısalıyordu ve göz bunu sayfa kayarken sıçrama
   olarak okuyordu. Üstelik alttaki .header-top şeridi header dolgusunu
   negatif marjla telafi ediyor (-1.25rem); dolgu küçülünce o marj
   güncellenmediği için şerit 8 piksel fazla yukarı çekiliyor ve hiza
   bozuluyordu.

   Zemin donukluğu ve gölge kalıyor: kaydırıldığını belli ediyorlar ama
   hiçbir şeyi yerinden oynatmıyorlar. */
.main-header.scrolled {
    background-color: rgba(250, 248, 245, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.header-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-link {
    display: block;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.logo-link:focus,
.logo-link:focus-visible {
    outline: none;
}

.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.main-nav {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 2.25rem;
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-main);
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-accent);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: var(--color-accent);
    font-weight: 600;
}

.nav-cta {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    border-radius: 4px;
}

.mobile-nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

/* -------------------------------------------------------------
   Hero Section
   ------------------------------------------------------------- */
.hero-section {
    padding: 10rem 0 6rem;
    background: radial-gradient(circle at 80% 20%, var(--color-accent-light) 0%, transparent 60%);
}

.hero-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    max-width: 650px;
}

.hero-tagline {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    color: var(--color-accent);
    display: block;
    margin-bottom: 1rem;
}

.hero-title {
    font-size: 3.5rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: var(--color-text-dark);
    overflow-wrap: break-word;
}

.hero-description {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.hero-visual {
    position: relative;
}

.hero-image-wrapper {
    width: 92%;
    aspect-ratio: 7 / 10;
    margin: 0 auto;
    border-radius: 20px;
    overflow: visible;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Kaynak (1152×2048) çerçeveden dar: ölçek genişliğe göre yapılıyor,
       taşma DİKEYDE. center ile üstten ve alttan eşit ~%10 kırpılıyor;
       yüz kaynakta %42'de olduğu için çerçevenin %40'ına oturuyor ve
       kadrajda kalıyor. Bu yüzden ayrı bir yüzde gerekmiyor. */
    object-position: center;
    background-color: #172740;
    border-radius: 20px;
}

@media (min-width: 1025px) {
    .hero-image-wrapper {
        width: auto;
        height: min(66vh, 650px);
        max-width: 92%;
    }
}

.accent-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-lg);
    max-width: 250px;
    animation: float 6s ease-in-out infinite;
}

.badge-number {
    font-size: 2rem;
    font-family: var(--font-serif);
    color: var(--color-accent);
    font-weight: 700;
    line-height: 1;
}

.badge-text {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-dark);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* -------------------------------------------------------------
   Philosophy Section
   ------------------------------------------------------------- */
.philosophy-section {
    padding: 3rem 0;
    background-color: var(--color-bg-primary);
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.philosophy-card {
    background-color: var(--color-bg-card);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 221, 213, 0.4);
    transition: var(--transition-smooth);
}

.philosophy-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.icon-box {
    width: 48px;
    height: 48px;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.philosophy-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.philosophy-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------
   About Section
   ------------------------------------------------------------- */
.about-section {
    padding: 8rem 0;
    background-color: var(--color-bg-secondary);
}

.about-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-image-wrapper {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 0.85 / 1;
    border-radius: 16px;
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.about-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bio-text {
    margin-bottom: 2.5rem;
}

.bio-text p {
    font-size: 1.05rem;
    color: var(--color-text-main);
    margin-bottom: 1.25rem;
    text-align: justify;
}

.bio-text p:last-child {
    margin-bottom: 0;
}

/* Timeline */
.education-timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 1px solid var(--border-color);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-icon {
    position: absolute;
    left: calc(-2rem - 6px);
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: 2px solid var(--color-bg-secondary);
}

.timeline-body h4 {
    font-size: 1.1rem;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

.timeline-body p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

/* -------------------------------------------------------------
   Expertise Section (Tabs)
   ------------------------------------------------------------- */
.expertise-section {
    padding: 8rem 0;
    background-color: var(--color-bg-primary);
}

.tabs-container {
    width: 100%;
}

.tabs-nav {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4rem;
    gap: 1.5rem;
}

.tab-btn {
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 1rem 1.5rem;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.tab-btn:hover {
    color: var(--color-accent);
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent);
    transition: width var(--transition-fast);
}

.tab-btn.active {
    color: var(--color-accent);
    font-weight: 600;
}

.tab-btn.active::after {
    width: 100%;
}

/* Panels */
.tabs-content {
    position: relative;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.4s ease-in-out;
}

.tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.panel-info {
    background-color: var(--color-bg-secondary);
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid rgba(226, 221, 213, 0.4);
}

.panel-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.panel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.panel-info:hover .panel-img {
    transform: scale(1.04);
}

.panel-info h3 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    color: var(--color-text-dark);
}

.panel-info p {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.panel-cta {
    width: 100%;
}

.panel-list-wrapper {
    padding-top: 1rem;
}

.expertise-list {
    list-style: none;
}

.expertise-list li {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
    position: relative;
    padding-left: 1.75rem;
    color: var(--color-text-main);
}

.expertise-list li:last-child {
    margin-bottom: 0;
}

.expertise-list li::before {
    content: '•';
    color: var(--color-accent);
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -2px;
}

.expertise-list li strong {
    color: var(--color-text-dark);
    font-weight: 600;
}

/* -------------------------------------------------------------
   Therapeutic Approaches (Ekoller)
   ------------------------------------------------------------- */
.approaches-section {
    padding: 8rem 0;
    background-color: var(--color-bg-secondary);
}

.approaches-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.approach-card {
    background-color: var(--color-bg-card);
    padding: 3rem 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 221, 213, 0.3);
    transition: var(--transition-smooth);
}

.approach-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.approach-icon {
    width: 52px;
    height: 52px;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.approach-card h3 {
    font-size: 1.35rem;
    margin-bottom: 1.25rem;
    color: var(--color-text-dark);
}

.approach-card p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* -------------------------------------------------------------
   Gallery Section
   ------------------------------------------------------------- */
.gallery-section {
    padding: 8rem 0;
    background-color: var(--color-bg-primary);
}

.gallery-content {
    padding-right: 2rem;
}

.gallery-content p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

.bullet-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feature-icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.feature-item span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-dark);
}

.gallery-image-wrapper {
    aspect-ratio: 1.2 / 1;
    border-radius: 16px;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* -------------------------------------------------------------
   Appointment Banner
   ------------------------------------------------------------- */
.appointment-banner-section {
    padding: 4rem 0;
    background-color: var(--color-bg-primary);
}

.banner-box {
    background-color: var(--color-accent);
    color: #FFFFFF;
    border-radius: 20px;
    padding: 4.5rem 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    box-shadow: 0 20px 40px rgba(154, 44, 60, 0.15);
}

.banner-content {
    max-width: 650px;
}

.banner-content h2 {
    color: #FFFFFF;
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}

.banner-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.banner-action {
    flex-shrink: 0;
}

/* -------------------------------------------------------------
   Contact Section
   ------------------------------------------------------------- */
.contact-section {
    padding: 8rem 0;
    background-color: var(--color-bg-secondary);
}

.contact-info-block {
    display: flex;
    flex-direction: column;
    /* Ortalanınca kısa içerik sütunun ortasında asılı kalıyordu. */
    justify-content: flex-start;
}

.contact-desc {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 3rem;
}

.contact-details {
    display: grid;
    /* Üç öğe iki sütunda öksüz kalıyor, saatler dört satıra sarıyordu. */
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.contact-detail-item {
    display: flex;
    gap: 1.25rem;
}

.contact-icon {
    width: 44px;
    height: 44px;
    background-color: var(--color-bg-card);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 221, 213, 0.5);
}

.contact-text h4 {
    font-size: 1rem;
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.4rem;
}

.contact-text p {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.contact-text a:hover {
    color: var(--color-accent);
}

.contact-map-block {
    height: 100%;
    min-height: 450px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

#map-container {
    width: 100%;
    height: 100%;
}

/* -------------------------------------------------------------
   Footer
   ------------------------------------------------------------- */
.main-footer {
    background-color: var(--color-text-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 6rem 0 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 6rem;
    margin-bottom: 5rem;
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    height: 45px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1.5rem;
    filter: brightness(0) invert(1); /* Forces logo to be clean white in footer */
}

.brand-tagline {
    font-size: 0.95rem;
    line-height: 1.5;
}

.footer-links h4,
.footer-services-links h4 {
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-links ul,
.footer-services-links ul {
    list-style: none;
}

.footer-links li,
.footer-services-links li {
    margin-bottom: 0.9rem;
}

.footer-links a,
.footer-services-links a {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-links a:hover,
.footer-services-links a:hover {
    color: #FFFFFF;
    padding-left: 4px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.85rem;
}

.legal-disclaimer {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.4);
    max-width: 800px;
    line-height: 1.5;
}

/* -------------------------------------------------------------
   Sağ Alt Köşe Yığını — yukarı çık oku + WhatsApp hapı

   İkisi de kendi position:fixed'ini taşımıyor; sarmalayıcı hizalıyor.
   Sabit piksel kaydırmayla (bottom: 2rem + hap yüksekliği + boşluk)
   konumlandırmak kırılgan olurdu: hapın boyu değişince ok kayardı.
   ------------------------------------------------------------- */
.kose-yigin {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* ok dar, hap geniş — sağdan hizalı dursunlar */
    gap: 0.75rem;
}

/* --- Yukarı çık düğmesi --- */
.yukari-cik {
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--color-accent);
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);

    /* Sayfa başındayken gizli: en üstteyken "yukarı çık" işe yaramaz.
       visibility de kapanıyor — yalnız opacity:0 bıraksaydık görünmezken
       tıklanabilir kalırdı. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition-fast),
                visibility var(--transition-fast),
                transform var(--transition-fast);
}

.yukari-cik.gorunur {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.yukari-cik:hover { background: var(--color-accent-light); }

.yukari-cik:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.yukari-ok {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
}

/* --- İlerleme halkası ---
   SVG tercih edildi, conic-gradient değil: konik degradeyle halka yapmak
   radial-gradient maskesi gerektiriyor, SVG'de stroke-dasharray doğrudan
   ve maskesiz çalışıyor. Dolum yüzdesini JavaScript --ilerleme
   değişkenine yazıyor, hesabı CSS yapıyor. */
.ilerleme {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);   /* dolum saat 12'den başlasın */
}

.ilerleme circle {
    fill: none;
    stroke-width: 3;
    cx: 24px;
    cy: 24px;
    r: 21px;
}

.ilerleme-iz { stroke: var(--border-color); }

.ilerleme-dolgu {
    stroke: var(--color-accent);
    stroke-linecap: round;
    /* Çevre = 2 · π · 21 = 131.95 */
    stroke-dasharray: 131.95;
    stroke-dashoffset: calc(131.95 * (1 - var(--ilerleme, 0)));
}

/* --- WhatsApp hapı --- */
.whatsapp-hap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.15rem;
    border-radius: 999px;
    background-color: #25D366;
    color: #fff;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    transition: var(--transition-smooth);
}

.whatsapp-hap:hover {
    background-color: #128C7E;
    box-shadow: 0 8px 25px rgba(18, 140, 126, 0.5);
    transform: translateY(-2px);
}

.whatsapp-hap:focus-visible {
    outline: 3px solid var(--color-topbar);
    outline-offset: 3px;
}

.whatsapp-hap svg { width: 24px; height: 24px; flex-shrink: 0; }

/* -------------------------------------------------------------
   Responsive Media Queries
   ------------------------------------------------------------- */

@media (max-width: 1024px) {
    .grid-2 {
        gap: 3rem;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .philosophy-grid {
        gap: 1.5rem;
    }
    
    .panel-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .approaches-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .footer-top {
        grid-template-columns: 1.2fr 0.9fr 0.9fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    /* Layout */
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .section-container {
        padding: 0 1.5rem;
    }
    
    .section-title {
        font-size: 2.1rem;
    }
    
    /* Header & Navigation */
    .mobile-nav-toggle {
        display: block;
        z-index: 1001;
    }
    
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--color-bg-primary);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
        padding: 6rem 2rem 2rem;
        transition: right var(--transition-smooth);
        z-index: 1000;
        align-items: flex-start;
    }
    
    .main-nav.open {
        right: 0;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 1.75rem;
    }
    
    .nav-cta-item {
        width: 100%;
        margin-top: 1rem;
    }
    
    .nav-cta {
        width: 100%;
        text-align: center;
        padding: 0.9rem 2rem;
        font-size: 0.95rem;
    }
    
    /* Hamburger Icon */
    .hamburger {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-text-dark);
        position: relative;
        transition: background-color var(--transition-fast);
    }
    
    .hamburger::before, .hamburger::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        background-color: var(--color-text-dark);
        transition: transform var(--transition-fast), top var(--transition-fast);
    }
    
    .hamburger::before { top: -6px; }
    .hamburger::after { top: 6px; }
    
    .mobile-nav-toggle[aria-expanded="true"] .hamburger {
        background-color: transparent;
    }
    
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
        transform: rotate(45deg);
        top: 0;
    }
    
    .mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
        transform: rotate(-45deg);
        top: 0;
    }
    
    /* Hero */
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .hero-content {
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: 2.1rem;
    }

    .hero-actions {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-visual {
        max-width: 450px;
        margin: 0 auto;
        width: 100%;
    }
    
    /* Philosophy */
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* About */
    .about-visual {
        order: 2; /* Put photo below the text on mobile */
    }
    
    /* Tabs */
    .tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }
    
    .tabs-nav::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }
    
    .tab-btn {
        flex-shrink: 0;
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
    }
    
    .panel-info {
        padding: 2rem;
    }
    
    /* Approaches */
    .approaches-grid {
        grid-template-columns: 1fr;
    }
    
    /* Gallery */
    .gallery-content {
        padding-right: 0;
    }
    
    /* Banner */
    .banner-box {
        flex-direction: column;
        padding: 3rem 2rem;
        text-align: center;
        gap: 2.5rem;
    }
    
    .banner-action {
        width: 100%;
    }
    
    .banner-action .btn {
        width: 100%;
    }
    
    /* Contact */
    .contact-details {
        grid-template-columns: 1fr;
    }
    
    .contact-map-block {
        min-height: 350px;
    }
    
    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .footer-brand {
        max-width: 100%;
    }
    
}

/* -------------------------------------------------------------
   Subpages Expansion Styles (Timeline, Infographics, Forms, FAQ)
   ------------------------------------------------------------- */

/* Panel actions helper */
.panel-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.panel-cta-secondary {
    border: 1px solid var(--color-accent) !important;
    color: var(--color-accent) !important;
    background: transparent !important;
}

.panel-cta-secondary:hover {
    background: var(--color-accent-light) !important;
    transform: translateY(-2px);
}

/* Subpage Common Hero & Header */
.subpage-hero {
    padding: 10rem 0 5rem;
    background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
    border-bottom: 1px solid var(--border-color);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.breadcrumb-separator {
    color: var(--border-color);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

/* Infographic Process Flow (Terapi Şeması) */
.infographic-section {
    padding: 7rem 0;
    background-color: var(--color-bg-primary);
}

.infographic-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3.5rem;
    position: relative;
}

.flow-step {
    background-color: var(--color-bg-card);
    padding: 2.5rem 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 221, 213, 0.4);
    text-align: center;
    position: relative;
    transition: var(--transition-smooth);
}

.flow-step:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.flow-step-icon {
    width: 60px;
    height: 60px;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.flow-step h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--color-text-dark);
}

.flow-step p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.flow-arrow {
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent);
    z-index: 2;
    pointer-events: none;
}

.flow-step:last-child .flow-arrow {
    display: none;
}

/* Roadmap (Terapi Yol Haritası) Section */
.roadmap-section {
    padding: 7rem 0;
    background-color: var(--color-bg-secondary);
}

.roadmap-timeline {
    position: relative;
    max-width: 900px;
    margin: 4rem auto 0;
    padding-left: 3rem;
}

.roadmap-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 28px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-accent) 0%, var(--border-color) 100%);
}

.roadmap-step {
    position: relative;
    margin-bottom: 3.5rem;
}

.roadmap-step:last-child {
    margin-bottom: 0;
}

.roadmap-marker {
    position: absolute;
    left: -2.85rem;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 10px rgba(154, 44, 60, 0.2);
    border: 3px solid var(--color-bg-secondary);
    z-index: 2;
}

.roadmap-step:last-child .roadmap-marker {
    background-color: var(--color-text-dark);
}

.roadmap-card {
    background-color: var(--color-bg-card);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(226, 221, 213, 0.4);
    transition: var(--transition-smooth);
}

.roadmap-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.roadmap-card h3 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.roadmap-card p {
    font-size: 0.98rem;
    color: var(--color-text-muted);
}

/* Intake Form (Başvuru Formu) Section */
.intake-section {
    padding: 8rem 0;
    background-color: var(--color-bg-primary);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 5rem;
    align-items: start;
}

.form-marketing-info h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.form-marketing-info p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

.guarantees {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.guarantee-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.guarantee-icon {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 3px;
}

.guarantee-text h4 {
    font-size: 1.1rem;
    font-family: var(--font-sans);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.guarantee-text p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.intake-form-card {
    background-color: var(--color-bg-card);
    padding: 3.5rem 3rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(226, 221, 213, 0.4);
}

.intake-form-card h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.intake-form-card .form-subtitle {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.5rem;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 0.9rem 1.1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background-color: var(--color-bg-primary);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text-main);
    transition: var(--transition-fast);
    outline: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--color-accent);
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.btn-submit {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
}

/* SSS / Accordion Section */
.faq-section {
    padding: 7rem 0;
    background-color: var(--color-bg-secondary);
}

.accordion-container {
    max-width: 800px;
    margin: 3.5rem auto 0;
}

.accordion-item {
    background-color: var(--color-bg-card);
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid rgba(226, 221, 213, 0.4);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-fast);
}

.accordion-item:hover {
    border-color: var(--color-accent);
}

.accordion-header {
    width: 100%;
    background: none;
    border: none;
    padding: 1.5rem 2rem;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    outline: none;
}

.accordion-icon {
    font-size: 1.4rem;
    color: var(--color-accent);
    font-weight: 300;
    transition: transform var(--transition-smooth);
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 2rem;
    background-color: #FAF9F6;
}

.accordion-panel-content {
    padding-bottom: 1.5rem;
    font-size: 0.98rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Responsive adjustments for subpages */
@media (max-width: 1024px) {
    .infographic-flow {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .flow-arrow {
        display: none;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

@media (max-width: 768px) {
    .subpage-hero {
        padding: 8rem 0 4rem;
        text-align: center;
    }
    
    .breadcrumb {
        justify-content: center;
    }
    
    .infographic-flow {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .roadmap-timeline {
        padding-left: 2rem;
    }
    
    .roadmap-timeline::before {
        left: 15px;
    }
    
    .roadmap-marker {
        left: -1.75rem;
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }
    
    .intake-form-card {
        padding: 2.5rem 1.5rem;
    }
    
    .accordion-header {
        padding: 1.25rem 1.5rem;
        font-size: 1rem;
    }
    
    .accordion-panel {
        padding: 0 1.5rem;
    }
}

/* Form Success Message States */
.form-success-message {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--color-bg-card);
    border-radius: 12px;
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-success-message svg {
    margin-bottom: 1.5rem;
    color: var(--color-accent);
}

.form-success-message h3 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-dark);
}

.form-success-message p {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* -------------------------------------------------------------
   Global overflow safety (prevent horizontal shift on mobile)
   ------------------------------------------------------------- */
html {
    overflow-x: hidden;
}

img,
iframe {
    max-width: 100%;
}

/* -------------------------------------------------------------
   Mobile Bottom Navigation Bar (visible on phones only)
   ------------------------------------------------------------- */
.mobile-bottom-bar {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        background-color: #FFFFFF;
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
        justify-content: space-around;
        align-items: flex-end;
        padding: 0.45rem 0.25rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    }

    .mbb-item {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        color: var(--color-text-muted);
        font-family: var(--font-sans);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-align: center;
        padding: 0.3rem 0;
        transition: color var(--transition-fast);
    }

    .mbb-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mbb-item span {
        line-height: 1;
    }

    .mbb-item:active {
        color: var(--color-accent);
    }

    /* Elevated center call button */
    .mbb-call {
        flex: 0 0 auto;
        width: 60px;
        height: 60px;
        margin: 0 0.25rem;
        transform: translateY(-18px);
        background-color: var(--color-accent);
        color: #FFFFFF;
        border-radius: 50%;
        border: 4px solid #FFFFFF;
        box-shadow: 0 8px 20px rgba(154, 44, 60, 0.45);
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    .mbb-call svg {
        width: 26px;
        height: 26px;
    }

    /* Space so fixed bar never covers footer content */
    body {
        padding-bottom: 68px;
    }

    /* Alttaki çubuk WhatsApp'ın işini görüyor; hap gizleniyor.
       Ok GÖRÜNÜR kalıyor: uzun sayfada başa dönmek asıl telefonda
       zahmetli. Çubuğun üstüne alınıyor. */
    .whatsapp-hap { display: none; }

    .kose-yigin {
        right: 1rem;
        bottom: 84px;
    }

    /* Make sure the hamburger toggle is clearly tappable on mobile */
    .mobile-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   SSS (Sıkça Sorulan Sorular)
   05.08.2026 — head'deki FAQPage şemasının görünür karşılığı.
   <details>/<summary> kullanıldı: açılır-kapanır davranış tarayıcının
   kendisinden geliyor, klavye ve ekran okuyucu desteği hazır, JavaScript
   gerekmiyor. Böylece app.js'e dokunmadan çalışıyor.
   ========================================================================== */
.faq-section {
    padding: 6rem 0;
    background-color: var(--color-bg-secondary);
}

.faq-list {
    max-width: 820px;
    margin: 3rem auto 0;
}

.faq-item {
    background-color: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.faq-item[open] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.faq-item summary {
    /* Varsayılan ok işareti kaldırılıyor; yerine sağda kendi +/- işaretimiz var. */
    list-style: none;
    cursor: pointer;
    padding: 1.25rem 3.25rem 1.25rem 1.5rem;
    position: relative;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--color-text-dark);
    /* Dokunma hedefi: 44px minimumun üstünde kalsın. */
    min-height: 44px;
    display: flex;
    align-items: center;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--color-accent); }

.faq-item summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* +/- işareti: iki çizgi, açıkken dikey olan kayboluyor. */
.faq-item summary::after,
.faq-item summary::before {
    content: '';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    width: 14px;
    height: 2px;
    background-color: var(--color-accent);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.faq-item summary::before { transform: translateY(-50%); }
.faq-item summary::after  { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary::after { opacity: 0; transform: translateY(-50%) rotate(0deg); }

.faq-answer {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.faq-answer p { margin: 0; }

@media (max-width: 768px) {
    .faq-section { padding: 4rem 0; }
    .faq-item summary { font-size: 1rem; padding: 1.1rem 3rem 1.1rem 1.25rem; }
    .faq-answer { padding: 0 1.25rem 1.25rem; }
}

/* Hareket azaltma tercihi olan kullanıcılarda geçişleri kapat. */
@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item summary::before,
    .faq-item summary::after { transition: none; }
}

/* ==========================================================================
   Sosyal medya ikonları (header + footer)
   ========================================================================== */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44×44: dokunma hedefi minimumu. İkonun kendisi 20px, kutu büyük. */
    width: 44px;
    height: 44px;
    border-radius: 10px;
    color: var(--color-text-muted);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.social-icon svg { width: 20px; height: 20px; }

.social-icon:hover,
.social-icon:focus-visible {
    color: var(--color-accent);
    background-color: var(--color-accent-light);
}

.social-icon:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Header — menü listesinin bir öğesi olarak duruyor. */
.nav-social-item {
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Footer — logonun altında. */
.footer-social {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}

.main-footer .social-icon { color: var(--color-text-muted); }

.main-footer .social-icon:hover,
.main-footer .social-icon:focus-visible {
    color: var(--color-accent);
    background-color: rgba(154, 44, 60, .08);
}

/* ==========================================================================
   Künye kartları (Hakkımda bölümü)
   ========================================================================== */
.credential-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2.5rem 0;
}

.stat-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.4rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    margin-bottom: .5rem;
}

.stat-icon svg { width: 20px; height: 20px; }

.stat-value {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 600;
    color: var(--color-text-dark);
    /* "PACT" gibi harf değerlerde de aynı yükseklikte dursun. */
    letter-spacing: -0.01em;
}

.stat-label {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* Tablette 3 sütun sıkışıyor; kartlar dar kalıp değer taşıyor. */
@media (max-width: 1024px) {
    .credential-stats { gap: .75rem; }
    .stat-value { font-size: 1.7rem; }
    .stat-label { font-size: .78rem; }
}

@media (max-width: 768px) {
    /* Tek sütun yerine 3'lü kalıyor ama daha küçük — künye satırı olarak
       okunuyor, dikey listeye dönüşünce bölüm gereksiz uzuyordu. */
    .credential-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: .6rem;
        margin: 2rem 0;
    }
    .stat-card { padding: 1rem .8rem; }
    .stat-icon { width: 34px; height: 34px; margin-bottom: .35rem; }
    .stat-icon svg { width: 17px; height: 17px; }
    .stat-value { font-size: 1.4rem; }
    .stat-label { font-size: .72rem; }
}

@media (max-width: 420px) {
    /* En dar ekranlarda 3 sütun taşırıyor — 1 sütuna düşüyor. */
    .credential-stats { grid-template-columns: 1fr; }
    .stat-card { flex-direction: row; align-items: center; gap: .9rem; padding: .9rem 1rem; }
    .stat-icon { margin-bottom: 0; flex-shrink: 0; }
    .stat-value { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .social-icon, .stat-card { transition: none; }
}

/* ==========================================================================
   Üst şerit (header top bar)
   Header position:fixed olduğu için şerit onun İÇİNDE. Dışarıda bırakılsaydı
   sayfa kaydırılınca header'ın altında kalıp görünmez olurdu.
   ========================================================================== */
.header-top {
    /* Sitenin paleti sıcak (krem #FAF8F5 + bordo #9A2C3C). Önceki
       #1A1C1E soğuk kömürdü ve zeminle ilişkisiz duruyordu. Bu ton koyu
       derin şarap: bordo ile kömür arası; marka hissi verirken altındaki
       bordo "Randevu Al" butonunun önüne geçmiyor.
       Beyaz %82 metinle kontrast 10.4:1 — WCAG AAA. */
    background-color: var(--color-topbar, #3A1E26);
    color: rgba(255, 255, 255, .82);
    /* Kaydırınca kapanıyor: dikey alan header'a kalsın. max-height ile
       animasyon yapılıyor çünkü height:auto geçiş almıyor. */
    max-height: 60px;
    overflow: hidden;
    transition: max-height var(--transition-fast), opacity var(--transition-fast);
    /* Header'ın kendi padding'inin dışında kalsın diye negatif marj. */
    margin: -1.25rem 0 1.25rem;
}

/* Üst şerit kaydırınca KAPANMIYOR.
   Önce dikey alanı menüye bırakmak için kapatılıyordu, ama sonuç
   "header'ın yarısı kayboldu" gibi okunuyordu: telefon ve konum ilk
   ekranda görünüp sonra yok oluyordu. Sabit kalması hem daha dingin
   hem de iletişim bilgisini her an erişilir tutuyor.

   Karşılığı: sabit başlık ~40 piksel daha yer kaplıyor. Dar ekranda
   şerit zaten gizli (aşağıdaki 768px kuralı), orada bir kayıp yok. */
.main-header.scrolled .header-top {
    max-height: 60px;
    opacity: 1;
}

.header-top-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.header-top-contact {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-width: 0;
}

.header-top-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    line-height: 1;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}

.header-top-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.header-top-link:hover { color: #fff; }

.header-top-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 4px;
}

.header-top-social {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}

/* Şeritteki ikonlar koyu zeminde: taban .social-icon kuralı açık zemine göre. */
.header-top .social-icon {
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, .78);
}

.header-top .social-icon svg { width: 17px; height: 17px; }

.header-top .social-icon:hover,
.header-top .social-icon:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
}

.header-top .social-icon:focus-visible {
    outline-color: #fff;
}

/* Şerit header'ı ~40px uzatıyor; hero'nun üst boşluğu elle ayarlı olduğu için
   (position:fixed header) aynı kadar artırılıyor, yoksa başlık şeridin altına
   girer. */
.hero-section { padding-top: 12.5rem; }

@media (max-width: 1024px) {
    .header-top-inner { padding: 0 1.5rem; gap: 1rem; }
    .header-top-contact { gap: 1rem; }
    .header-top-link { font-size: .78rem; }
}

@media (max-width: 768px) {
    /* Şerit mobilde kapalı: dar ekranda hem taşıyor hem de alt bar zaten
       arama/WhatsApp veriyor. Sosyal ikonlar menü çekmecesinde. */
    .header-top { display: none; }
    .hero-section { padding-top: 8rem; }
}

/* Masaüstünde çekmece ikonları gizli — üst şerit zaten gösteriyor. */
.nav-social-item { display: none; }

@media (max-width: 768px) {
    .nav-social-item {
        display: flex;
        align-items: center;
        gap: .25rem;
        margin-top: .5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-top, .header-top-link { transition: none; }
}

/* ==========================================================================
   Yasal metin sayfası (KVKK)
   ========================================================================== */
.legal-section {
    /* Header fixed + üst şerit: içerik altına girmesin. */
    padding: 12.5rem 0 6rem;
    background-color: var(--color-bg-primary);
}

.legal-head { max-width: 780px; margin-bottom: 2.5rem; }

.legal-updated {
    color: var(--color-text-muted);
    font-size: .88rem;
    margin-top: .75rem;
}

.legal-toc {
    max-width: 780px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
}

.legal-toc h2 {
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 .9rem;
}

.legal-toc ol {
    margin: 0;
    padding-left: 1.15rem;
    columns: 2;
    column-gap: 2rem;
}

.legal-toc li { margin-bottom: .4rem; break-inside: avoid; }

.legal-toc a {
    color: var(--color-text-main);
    font-size: .92rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.legal-toc a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.legal-body { max-width: 780px; }

.legal-intro {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--color-text-main);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2.5rem;
}

.legal-body h2 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--color-text-dark);
    margin: 2.5rem 0 .85rem;
    /* Sabit header + şerit yüzünden çapa hedefi altta kalmasın. */
    scroll-margin-top: 9rem;
}

.legal-body h2:first-of-type { margin-top: 0; }

.legal-body p,
.legal-body li {
    color: var(--color-text-muted);
    line-height: 1.85;
}

.legal-body p { margin: 0 0 1rem; }

.legal-body ul { margin: 0 0 1.25rem 1.2rem; }
.legal-body li { margin-bottom: .5rem; }

.legal-body strong { color: var(--color-text-dark); font-weight: 600; }

.legal-body a {
    color: var(--color-accent);
    border-bottom: 1px solid rgba(154, 44, 60, .3);
    transition: border-color var(--transition-fast);
}

.legal-body a:hover { border-bottom-color: var(--color-accent); }

.legal-contact { list-style: none; margin-left: 0 !important; }
.legal-contact li { padding-left: 0; }

/* Özel nitelikli veri uyarısı — metnin en kritik kısmı, ayırt edilsin. */
.legal-callout {
    background-color: var(--color-accent-light);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.4rem;
    margin: 1.5rem 0 2rem;
}

.legal-callout strong {
    display: block;
    color: var(--color-accent-hover);
    margin-bottom: .5rem;
    font-size: .95rem;
}

.legal-callout p { margin: 0; color: var(--color-text-main); }

.legal-back {
    max-width: 780px;
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .legal-section { padding: 8rem 0 4rem; }
    .legal-toc { padding: 1.25rem; }
    .legal-toc ol { columns: 1; }
    .legal-body h2 { font-size: 1.2rem; scroll-margin-top: 6rem; }
}

/* ==========================================================================
   Form — KVKK açık rıza onayı
   ========================================================================== */
.form-consent {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin: .25rem 0 1.5rem;
}

.form-consent input[type="checkbox"] {
    /* Dokunma hedefi için kutunun kendisi büyütülüyor. */
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.form-consent label {
    font-size: .86rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    cursor: pointer;
}

.form-consent a {
    color: var(--color-accent);
    border-bottom: 1px solid rgba(154, 44, 60, .35);
}

.form-consent a:hover { border-bottom-color: var(--color-accent); }

.form-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.footer-legal-link {
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.footer-legal-link:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ==========================================================================
   Süreç akışı — "Nasıl Çalışıyoruz"
   Zikzak düzen: tek adımlar aşağıda, çift adımlar yukarıda. Aralarındaki
   dalgalı kesikli çizgi SVG; sadece görsel, ekran okuyucudan gizli.
   İşaretleme <ol> çünkü sıra anlamlı — ekran okuyucu "1/4" diye okur.
   ========================================================================== */
.process-section {
    padding: 6rem 0;
    background-color: var(--color-bg-primary);
}

.process-flow {
    position: relative;
    margin-top: 3.5rem;
}

.process-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 120px;
    color: var(--color-accent);
    opacity: .28;
    pointer-events: none;
}

.process-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.process-step {
    text-align: center;
    padding: 0 .5rem;
}

/* Zikzak: 1. ve 3. adım aşağı, 2. ve 4. yukarı iter. */
.process-step:nth-child(odd)  { margin-top: 5rem; }
.process-step:nth-child(even) { margin-bottom: 5rem; }

.process-num {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-accent);
    opacity: .45;
    margin-bottom: .75rem;
}

.process-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--color-bg-card);
    border: 1px solid var(--border-color);
    color: var(--color-accent);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.process-icon svg { width: 24px; height: 24px; }

.process-step h3 {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 0 0 .5rem;
}

.process-step p {
    font-size: .88rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 1024px) {
    .process-steps { gap: 1rem; }
    .process-step:nth-child(odd)  { margin-top: 3.5rem; }
    .process-step:nth-child(even) { margin-bottom: 3.5rem; }
    .process-step p { font-size: .84rem; }
}

@media (max-width: 768px) {
    .process-section { padding: 4rem 0; }
    /* Dalga yatay bir düzen içindi; tek sütunda anlamsız ve bozuk görünür. */
    .process-wave { display: none; }
    .process-steps { grid-template-columns: 1fr; gap: 0; }
    .process-step {
        text-align: left;
        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-areas: "icon num" "icon baslik" "icon metin";
        column-gap: 1.1rem;
        padding: 0 0 2rem;
        margin: 0 !important;   /* zikzak marjlarını iptal et */
        position: relative;
    }
    /* Dikey bağlantı çizgisi — son adım hariç. */
    .process-step:not(:last-child)::before {
        content: '';
        position: absolute;
        left: 25px;
        top: 58px;
        bottom: .5rem;
        width: 2px;
        background: repeating-linear-gradient(
            to bottom,
            var(--color-accent) 0 5px,
            transparent 5px 12px
        );
        opacity: .3;
    }
    .process-icon { grid-area: icon; margin-bottom: 0; align-self: start; }
    .process-num  { grid-area: num; font-size: 1.4rem; margin-bottom: .15rem; text-align: left; }
    .process-step h3 { grid-area: baslik; }
    .process-step p  { grid-area: metin; }
}

/* ==========================================================================
   Panik Atak Ön Değerlendirme Testi (panik-atak-testi.html)
   Bileşenin tüm stilleri .panik-testi altında kapsüllü — sitenin geri kalanına
   sızmaz. Özgün sürüm yeşil-teal bir palet kullanıyordu (#2F6F63); değerler
   sitenin bordo paletine eşlendi. Şiddet ölçeğindeki yeşil/amber/gül tonları
   korundu çünkü anlam taşıyorlar (düşük/orta/yüksek).
   ========================================================================== */
.test-section { padding: 12.5rem 0 6rem; background-color: var(--color-bg-primary); }
.test-intro { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.test-intro .section-subtitle { margin-top: .75rem; }
.test-back {
    max-width: 760px;
    margin: 3rem auto 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.panik-testi {
    --pnk-bg: var(--color-bg-secondary);
    --pnk-card: var(--color-bg-card);
    --pnk-ink: var(--color-text-dark);
    --pnk-ink2: var(--color-text-muted);
    --pnk-line: var(--border-color);
    --pnk-accent: var(--color-accent);
    --pnk-soft: var(--color-accent-light);
    --pnk-r: 14px;
    background: var(--pnk-bg);
    color: var(--pnk-ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    padding: 28px 20px 24px;
    border-radius: var(--pnk-r);
    max-width: 760px;
    margin: 0 auto;
    box-sizing: border-box;
}
.panik-testi * { box-sizing: border-box; }
.panik-testi p { margin: 0 0 14px; }

.panik-testi .pnk-eyebrow {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--pnk-accent); font-weight: 700; margin: 0 0 8px;
}
.panik-testi h2.pnk-title {
    font-family: var(--font-serif); font-weight: 500;
    font-size: clamp(22px, 4.2vw, 30px); line-height: 1.25; margin: 0 0 12px; color: var(--pnk-ink);
}
.panik-testi .pnk-lead { color: var(--pnk-ink2); font-size: 15.5px; margin-bottom: 18px; }

.panik-testi .pnk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.panik-testi .pnk-meta li {
    background: var(--pnk-card); border: 1px solid var(--pnk-line); border-radius: 999px;
    padding: 5px 12px; font-size: 13px; color: var(--pnk-ink2);
}

.panik-testi .pnk-note {
    background: var(--pnk-soft); border-left: 3px solid var(--pnk-accent);
    padding: 12px 14px; border-radius: 0 10px 10px 0; font-size: 14px; color: var(--pnk-ink2); margin: 0 0 24px;
}
.panik-testi .pnk-note strong { color: var(--pnk-ink); }

.panik-testi .pnk-q {
    background: var(--pnk-card); border: 1px solid var(--pnk-line); border-radius: 12px;
    padding: 16px 16px 12px; margin: 0 0 12px;
}
/* <legend> tarayıcıda fieldset'in KENARLIK yuvasına yerleşir, normal blok
   gibi davranmaz; display:block bunu değiştirmiyor. Sonuç: çok satırlı
   sorularda metin kartın dışına, üstüne taşıyordu. float onu normal
   akışa sokuyor; kapsayıcıya clearfix gerekiyor. */
.panik-testi .pnk-q legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--pnk-ink);
    margin: 0 0 14px;
}
.panik-testi .pnk-q::after { content: ''; display: table; clear: both; }
.panik-testi .pnk-num {
    font-family: var(--font-serif); font-size: 13px; color: var(--pnk-accent);
    display: inline-block; margin-right: 8px; font-weight: 400;
}

.panik-testi .pnk-opt { position: relative; }
/* Radyo görsel olarak gizli ama odaklanabilir kalıyor — klavye ve ekran
   okuyucu desteği korunuyor (display:none olsaydı ikisi de kaybolurdu). */
.panik-testi .pnk-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.panik-testi .pnk-opt span {
    display: block; text-align: center; cursor: pointer; user-select: none;
    border: 1px solid var(--pnk-line); border-radius: 8px; padding: 11px 8px;
    font-size: 13.5px; color: var(--pnk-ink2); background: #fff;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    /* Dokunma hedefi. */
    min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.panik-testi .pnk-opt span:hover { border-color: var(--pnk-accent); color: var(--pnk-ink); }
.panik-testi .pnk-opt input:checked + span {
    background: var(--pnk-accent); border-color: var(--pnk-accent); color: #fff; font-weight: 600;
}
.panik-testi .pnk-opt input:focus-visible + span { outline: 3px solid rgba(154, 44, 60, .35); outline-offset: 2px; }

.panik-testi .pnk-bar {
    position: sticky;
    bottom: 10px;
    z-index: 5;
    margin-top: 18px;
    background: var(--pnk-card); border: 1px solid var(--pnk-line); border-radius: 12px;
    padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    box-shadow: 0 6px 18px rgba(26, 28, 30, .09);
}
.panik-testi .pnk-track { flex: 1 1 140px; height: 6px; background: var(--pnk-soft); border-radius: 99px; overflow: hidden; }
.panik-testi .pnk-fill { height: 100%; width: 0; background: var(--pnk-accent); border-radius: 99px; transition: width .25s; }
.panik-testi .pnk-count { font-size: 13px; color: var(--pnk-ink2); white-space: nowrap; }

.panik-testi .pnk-btn {
    border: 0; border-radius: 10px; padding: 12px 20px; font-size: 15px; font-weight: 600;
    background: var(--pnk-accent); color: #fff; cursor: pointer; font-family: inherit;
    transition: background-color var(--transition-fast); min-height: 44px;
}
.panik-testi .pnk-btn:hover { background: var(--color-accent-hover); }
.panik-testi .pnk-btn:disabled { background: #C6BDB8; cursor: not-allowed; }
.panik-testi .pnk-btn.pnk-ghost { background: transparent; color: var(--pnk-accent); border: 1px solid var(--pnk-line); }
.panik-testi .pnk-btn.pnk-ghost:hover { background: var(--pnk-soft); }

.panik-testi .pnk-result { display: none; margin-top: 22px; }
.panik-testi .pnk-result.is-open { display: block; }
.panik-testi .pnk-card { background: var(--pnk-card); border: 1px solid var(--pnk-line); border-radius: 12px; padding: 22px 18px; }
.panik-testi .pnk-score { font-family: var(--font-serif); font-size: 15px; color: var(--pnk-ink2); margin: 0 0 4px; }
.panik-testi .pnk-band { font-family: var(--font-serif); font-size: clamp(20px, 3.4vw, 25px); margin: 0 0 16px; line-height: 1.3; color: var(--pnk-ink); }

/* Şiddet ölçeği renkleri anlam taşıdığı için markadan bağımsız korundu. */
.panik-testi .pnk-meter {
    position: relative; height: 10px; border-radius: 99px; overflow: hidden; margin: 0 0 8px;
    background: linear-gradient(90deg, #CFE3D8 0%, #CFE3D8 33%, #F0DCBE 33%, #F0DCBE 66%, #EBCFC8 66%, #EBCFC8 100%);
}
.panik-testi .pnk-pin {
    position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 99px;
    background: var(--pnk-ink); transform: translateX(-50%); transition: left .5s ease;
}
.panik-testi .pnk-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--pnk-ink2); margin: 0 0 18px; }

.panik-testi .pnk-list { margin: 0 0 18px; padding-left: 18px; }
.panik-testi .pnk-list li { margin-bottom: 7px; font-size: 15px; color: var(--pnk-ink2); }
.panik-testi .pnk-list strong { color: var(--pnk-ink); }

.panik-testi .pnk-cta { background: var(--pnk-soft); border-radius: 12px; padding: 18px; margin: 18px 0 0; }
.panik-testi .pnk-cta p { font-size: 15px; color: var(--pnk-ink2); }
.panik-testi .pnk-cta a.pnk-link {
    display: inline-block; background: var(--pnk-accent); color: #fff; text-decoration: none;
    padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 15px; margin-top: 4px;
    transition: background-color var(--transition-fast);
}
.panik-testi .pnk-cta a.pnk-link:hover { background: var(--color-accent-hover); }

.panik-testi .pnk-emergency {
    border: 1px dashed #C99A8F; border-radius: 10px; padding: 12px 14px; margin-top: 16px;
    font-size: 14px; color: var(--pnk-ink2); background: #FDF6F4;
}
.panik-testi .pnk-emergency a { color: var(--pnk-accent); font-weight: 700; }

.panik-testi .pnk-breath { margin-top: 16px; }
.panik-testi .pnk-circle {
    width: 120px; height: 120px; border-radius: 50%; margin: 16px auto 8px;
    background: radial-gradient(circle at 50% 45%, #FBF1F2 0%, #EDD3D7 100%);
    border: 2px solid var(--pnk-accent); display: none;
    animation: pnkBreathe 10s ease-in-out infinite;
}
.panik-testi .pnk-breath.is-on .pnk-circle { display: block; }
.panik-testi .pnk-breath-txt { display: none; text-align: center; font-size: 14px; color: var(--pnk-ink2); }
.panik-testi .pnk-breath.is-on .pnk-breath-txt { display: block; }
@keyframes pnkBreathe {
    0% { transform: scale(.72); } 40% { transform: scale(1); }
    60% { transform: scale(1); } 100% { transform: scale(.72); }
}

.panik-testi .pnk-disclaimer { font-size: 13px; color: var(--pnk-ink2); margin-top: 18px; line-height: 1.55; }
.panik-testi .pnk-disclaimer a { color: var(--pnk-accent); }

@media (max-width: 768px) {
    .test-section { padding: 8rem 0 4rem; }
    /* ÇAKIŞMA DÜZELTMESİ: mobil alt bar fixed, bottom:0, 68px yüksekliğinde
       ve z-index 1200. Yapışkan çubuk bottom:10px kalsaydı "Sonucu gör"
       butonu barın ARKASINDA kalır, görünmezdi. */
    .panik-testi .pnk-bar { bottom: 78px; }
}

@media (max-width: 520px) {
    .panik-testi { padding: 22px 14px; }
    .test-back { flex-direction: column; }
    .test-back .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .panik-testi .pnk-circle { animation: none; transform: scale(.9); }
    .panik-testi .pnk-pin, .panik-testi .pnk-fill, .panik-testi .pnk-opt span, .panik-testi .pnk-btn { transition: none; }
}

/* ==========================================================================
   Test penceresi (modal)
   ========================================================================== */
.pnk-pencere {
    position: fixed;
    inset: 0;
    /* Mobil alt bar 1200; pencere onun da üstünde olmalı. */
    z-index: 1300;
    background: rgba(26, 28, 30, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: none;
    padding: 2rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pnk-pencere.is-open { display: block; }

.pnk-pencere-ic {
    background-color: var(--color-bg-primary);
    border-radius: 18px;
    max-width: 820px;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.pnk-pencere-ust {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    background-color: var(--color-bg-card);
    border-bottom: 1px solid var(--border-color);
}

.pnk-pencere-baslik {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    margin: 0;
    color: var(--color-text-dark);
    line-height: 1.3;
}

.pnk-pencere-kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pnk-pencere-kapat svg { width: 20px; height: 20px; }
.pnk-pencere-kapat:hover { background-color: var(--color-accent-light); color: var(--color-accent); }
.pnk-pencere-kapat:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.pnk-pencere-govde { padding: 1.5rem; }

/* Pencere içinde bileşenin kendi zemini ve dış boşluğu gereksiz —
   pencere zaten bir kart. */
.pnk-pencere-govde .panik-testi {
    background: transparent;
    padding: 0;
    max-width: none;
}

/* Yapışkan çubuk pencerenin içinde kaydığı için sayfadaki 78px payına
   ihtiyaç yok; pencere kendi kaydırma bağlamı. */
.pnk-pencere-govde .pnk-bar { bottom: 0; }

@media (max-width: 768px) {
    .pnk-pencere { padding: 0; }
    .pnk-pencere-ic { border-radius: 0; min-height: 100%; }
    .pnk-pencere-govde { padding: 1.25rem 1rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pnk-pencere-kapat { transition: none; }
}

/* ==========================================================================
   Test görünümü — iyileştirmeler
   ========================================================================== */
/* Soru numarası yuvarlak rozet: metinden ayrışsın, sıralama okunsun. */
.panik-testi .pnk-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--pnk-soft);
    color: var(--pnk-accent);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
    vertical-align: 2px;
}

/* Soru kartı: yanıtlananı belli et. */
.panik-testi .pnk-q {
    padding: 18px 18px 14px;
    margin: 0 0 14px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.panik-testi .pnk-q:has(input:checked) {
    border-color: var(--pnk-accent);
    box-shadow: 0 2px 10px rgba(154, 44, 60, .07);
}

/* İlerleme çubuğu ve sonuç kartı biraz daha belirgin. */
.panik-testi .pnk-bar { padding: 14px 16px; gap: 14px; }
.panik-testi .pnk-track { height: 8px; }
.panik-testi .pnk-card { padding: 26px 22px; }


/* ==========================================================================
   Test motoru — ek öğeler (ergenlik testinde kullanılıyor)
   ========================================================================== */
/* Bölüm ara başlığı ("Son bir ayda ne sıklıkla gözlemlediniz?") */
.panik-testi .pnk-sub {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--pnk-ink);
    margin: 26px 0 12px;
}
.panik-testi .pnk-sub:first-child { margin-top: 0; }

/* Kontrol maddeleri: puanlamaya girmeyen, önceliklendirme sinyalleri.
   Sorulardan görsel olarak ayrışmalı — aksi hâlde 13-16. soru sanılır. */
.panik-testi .pnk-flags {
    background: #FDF6F4;
    border: 1px solid #E0BDB5;
    border-radius: 12px;
    padding: 18px 18px 8px;
    margin-bottom: 14px;
}
.panik-testi .pnk-flags-lead {
    font-size: 14px;
    color: var(--pnk-ink2);
    margin-bottom: 16px;
}
.panik-testi .pnk-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 14px;
    cursor: pointer;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--pnk-ink);
}
.panik-testi .pnk-check input {
    margin-top: 3px;
    width: 20px;
    height: 20px;
    accent-color: #9E4A3C;
    flex: 0 0 auto;
    cursor: pointer;
}
.panik-testi .pnk-check input:focus-visible {
    outline: 2px solid #9E4A3C;
    outline-offset: 2px;
}

/* Öncelik uyarısı — kontrol maddelerinden biri işaretlenirse görünür.
   Puandan bağımsız çalışır ve sonuç kartının EN ÜSTÜNDE durur. */
.panik-testi .pnk-priority {
    display: none;
    background: #FDF6F4;
    border: 1px solid #E0BDB5;
    border-left: 4px solid #9E4A3C;
    border-radius: 10px;
    padding: 18px;
    margin: 0 0 22px;
}
.panik-testi .pnk-priority.is-on { display: block; }
.panik-testi .pnk-priority h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.15rem;
    margin: 0 0 10px;
    color: #9E4A3C;
    line-height: 1.3;
}
.panik-testi .pnk-priority p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--pnk-ink2);
    margin-bottom: 10px;
}
.panik-testi .pnk-priority p:last-child { margin-bottom: 0; }
.panik-testi .pnk-priority a { color: #9E4A3C; font-weight: 700; }

/* Sonuçtaki ek bölüm ("Konuşmayı kolaylaştıran birkaç şey") */
.panik-testi .pnk-talk {
    background: var(--pnk-soft);
    border-radius: 12px;
    padding: 18px 20px;
    margin: 18px 0 0;
}
.panik-testi .pnk-talk h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.05rem;
    margin: 0 0 10px;
    color: var(--pnk-ink);
}
.panik-testi .pnk-talk .pnk-list { margin-bottom: 0; }

@media (max-width: 520px) {
    .panik-testi .pnk-flags { padding: 14px 14px 4px; }
    .panik-testi .pnk-check { font-size: 14px; }
}

/* Koyu güvenlik kutusu — ilişki testinde kullanılır.
   Ton farkı kasıtlı: aile içi şiddet/kontrol maddeleri, ergen testindeki
   kontrol maddelerinden daha ağır bir alana işaret ediyor. */
.panik-testi .pnk-flags--koyu {
    background: #2E2126;
    border-color: #2E2126;
    color: #F0E7E9;
}
.panik-testi .pnk-flags--koyu .pnk-flags-lead { color: #D8C6CB; }
.panik-testi .pnk-flags--koyu .pnk-check { color: #F0E7E9; }
.panik-testi .pnk-flags--koyu .pnk-check input { accent-color: #C98A93; }
.panik-testi .pnk-flags--koyu .pnk-check input:focus-visible {
    outline-color: #C98A93;
}

.panik-testi .pnk-priority--koyu {
    background: #2E2126;
    border-color: #2E2126;
    border-left-color: #C98A93;
    color: #F0E7E9;
}
.panik-testi .pnk-priority--koyu h3 { color: #fff; }
.panik-testi .pnk-priority--koyu p { color: #E6D9DC; }
.panik-testi .pnk-priority--koyu strong { color: #fff; }
.panik-testi .pnk-priority--koyu a { color: #E8B9C0; }

/* ==========================================================================
   Ön değerlendirme testleri — tanıtım panelleri (3 sütun)
   Üç panel yan yana. Dar sütunda "solda metin / sağda fotoğraf" düzeni
   çalışmadığı için panel içi DİKEY: fotoğraf üstte bir bant, altında metin.
   Fotoğraf aşağı doğru maskeyle degradeye karışıyor — kırpma çizgisi yok.
   Görsel dil (koyu degrade, gül tonları, rozet, tik listesi) korunuyor.
   ========================================================================== */
#dt-testler {
    --dt-deep: #2B1015;
    --dt-mid:  #5E1D28;
    --dt-wine: #9A2C3C;
    --dt-btn:  #C0374A;
    --dt-cream:#FBF6F5;
    --dt-rose: #E9C2C7;
    --dt-soft: #C9A0A7;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 6rem;
    box-sizing: border-box;
}
#dt-testler * { box-sizing: border-box; }

#dt-testler .dt-head { text-align: center; margin: 0 auto 2.5rem; max-width: 660px; }
#dt-testler .dt-head h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(28px, 4.6vw, 42px);
    line-height: 1.18;
    margin: 0 0 12px;
    color: var(--dt-deep);
}
#dt-testler .dt-head h2 em { font-style: normal; color: var(--dt-wine); }
#dt-testler .dt-head p { font-size: 16px; line-height: 1.65; color: var(--color-text-muted); margin: 0; }

/* Üç panelin ızgarası. */
#dt-testler .dt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

#dt-testler .dt-panel {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    margin: 0;
    background: linear-gradient(160deg, var(--dt-deep) 0%, var(--dt-mid) 55%, var(--dt-wine) 100%);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

/* Fotoğraf bandı — kaynakta metinden SONRA geliyor (ekran okuyucu önce
   içeriği okusun); görsel olarak order ile üste alınıyor. */
#dt-testler .dt-media {
    order: -1;
    position: relative;
    height: 190px;
    flex: 0 0 auto;
    z-index: 0;
}
#dt-testler .dt-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
    /* Alta doğru şeffaflaşır: fotoğraf degradeye karışır. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.75) 55%, transparent 100%);
}

#dt-testler .dt-body {
    position: relative;
    z-index: 2;
    padding: 0 28px 32px;
    /* Fotoğrafın soluk alt kenarıyla metnin üstü çakışmasın. */
    margin-top: -46px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

#dt-testler .dt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    border: 1px solid rgba(233, 194, 199, .45);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--dt-rose);
    margin: 0 0 14px;
    background: rgba(43, 16, 21, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#dt-testler .dt-eyebrow svg { width: 13px; height: 13px; flex: 0 0 auto; }

#dt-testler .dt-panel h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.55rem;
    line-height: 1.2;
    color: var(--dt-cream);
    margin: 0 0 10px;
}
#dt-testler .dt-sub {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--dt-rose);
    margin: 0 0 18px;
}

#dt-testler .dt-checks { list-style: none; margin: 0 0 18px; padding: 0; }
#dt-testler .dt-checks li {
    display: flex; gap: 9px; align-items: flex-start;
    color: #EEDDDF; font-size: 14px; line-height: 1.5; margin: 0 0 9px;
}
#dt-testler .dt-checks li svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--dt-rose); }
#dt-testler .dt-checks strong { color: #fff; font-weight: 600; }

/* Dar sütunda rozetler yan yana sığmıyor — alt alta diziliyor. */
#dt-testler .dt-pills {
    display: flex; flex-direction: column; gap: 9px;
    margin: 0 0 20px; padding: 0; list-style: none;
}
#dt-testler .dt-pills li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--dt-soft); }
#dt-testler .dt-pills .dt-dot {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: rgba(233, 194, 199, .13);
    border: 1px solid rgba(233, 194, 199, .3);
    display: flex; align-items: center; justify-content: center; color: var(--dt-rose);
}
#dt-testler .dt-pills svg { width: 12px; height: 12px; }

/* CTA en alta yapışsın — panel yükseklikleri eşit, butonlar aynı hizada. */
#dt-testler .dt-cta {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    text-decoration: none;
    background: var(--dt-btn); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
    padding: 14px 22px; border-radius: 10px; text-transform: uppercase;
    min-height: 48px;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
#dt-testler .dt-cta:hover { background: #D34356; transform: translateY(-1px); }
#dt-testler .dt-cta:focus-visible { outline: 3px solid var(--dt-rose); outline-offset: 3px; }
#dt-testler .dt-cta svg { width: 16px; height: 16px; }

#dt-testler .dt-fine { font-size: 12px; color: rgba(201, 160, 167, .85); margin: 10px 0 0; text-align: center; }
#dt-testler .dt-foot { text-align: center; font-size: 13px; color: var(--color-text-muted); margin: 2rem 0 0; }

/* Tablet: üç sütun sıkışıyor, tek sütuna inip yatay düzene dönüyor —
   geniş alan varken fotoğrafı yan tarafta göstermek daha iyi duruyor. */
@media (max-width: 1024px) and (min-width: 721px) {
    #dt-testler .dt-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    #dt-testler .dt-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 340px; }
    #dt-testler .dt-media {
        order: 0; height: auto;
        -webkit-mask-image: none; mask-image: none;
    }
    #dt-testler .dt-media img {
        object-position: center;
        -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%);
                mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%);
    }
    #dt-testler .dt-body { margin-top: 0; padding: 32px 28px; }
    #dt-testler .dt-panel h3 { font-size: 1.8rem; }
    #dt-testler .dt-pills { flex-direction: row; flex-wrap: wrap; gap: 10px 20px; }
    #dt-testler .dt-cta { align-self: flex-start; }
    #dt-testler .dt-fine { text-align: left; }
}

@media (max-width: 720px) {
    #dt-testler .dt-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    #dt-testler .dt-media { height: 170px; }
    #dt-testler .dt-pills { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
}

@media (max-width: 520px) {
    #dt-testler { padding: 0 1rem 4rem; }
    #dt-testler .dt-body { padding: 0 20px 26px; }
    #dt-testler .dt-media { height: 150px; }
    #dt-testler .dt-pills { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    #dt-testler .dt-cta { transition: none; }
    #dt-testler .dt-cta:hover { transform: none; }
}

/* ==========================================================================
   Test şıkları — TEK YER
   Daha önce kurallar üç ayrı bloğa dağılmıştı ve çakışıyorlardı; mobilde
   şıklar karttan taşıyordu. Hepsi burada toplandı.

   legend float:left ile normal akışa alındığı için (fieldset'in kenarlık
   yuvasından çıkarmanın tek güvenilir yolu) ızgaraya clear ZORUNLU —
   yoksa şıklar floatın yanına, kartın dışına akıyor.
   ========================================================================== */
.panik-testi .pnk-opts {
    clear: both;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    /* Izgara öğeleri içeriğe göre taşmasın. */
    align-items: stretch;
}

.panik-testi .pnk-opt {
    position: relative;
    /* min-width:0 olmadan uzun etiket ("Neredeyse her zaman") sütunu
       şişirip ızgarayı kaptan taşırıyor. */
    min-width: 0;
    display: flex;
}

/* Radyo görsel olarak gizli ama odaklanabilir — klavye ve ekran okuyucu
   desteği korunuyor (display:none olsaydı ikisi de kaybolurdu). */
.panik-testi .pnk-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.panik-testi .pnk-opt span {
    /* Kutular eşit yükseklikte: en uzun etiket iki satıra sarınca
       diğerleri de onunla aynı boyda kalıyor. */
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--pnk-line);
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--pnk-ink2);
    background: #fff;
    white-space: normal;
    overflow-wrap: break-word;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.panik-testi .pnk-opt span:hover { border-color: var(--pnk-accent); color: var(--pnk-ink); }

.panik-testi .pnk-opt input:checked + span {
    background: var(--pnk-accent);
    border-color: var(--pnk-accent);
    color: #fff;
    font-weight: 600;
}

.panik-testi .pnk-opt input:focus-visible + span {
    outline: 3px solid rgba(154, 44, 60, .35);
    outline-offset: 2px;
}

/* Orta genişlik: 5 sütun sıkışıyor, 3'e iniyor. */
@media (max-width: 760px) {
    .panik-testi .pnk-opts { grid-template-columns: repeat(3, 1fr); gap: 7px; }
}

/* Dar ekran: tek sütun. Likert ölçeğinde en okunur ve en büyük dokunma
   hedefini veren düzen; iki sütunda etiketler hâlâ kırpılıyordu. */
@media (max-width: 560px) {
    .panik-testi .pnk-opts { grid-template-columns: 1fr; gap: 6px; }
    .panik-testi .pnk-opt span {
        justify-content: flex-start;
        text-align: left;
        padding: 11px 14px;
        min-height: 48px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panik-testi .pnk-opt span { transition: none; }
}

/* ==========================================================================
   Hero — ön değerlendirme testleri butonu
   Diğer iki butonun ÜSTÜNDE, ayrı satırda. Konum olarak öne çıkıyor ama
   dolgusu yumuşak tutuldu: asıl dönüşüm eylemi "Randevu Oluştur" bordo dolu
   kalsın, bu onun önüne geçmesin.

   Animasyon bilinçli olarak yavaş (3.2s) ve düşük genlikli. Psikoloji
   sitesinde hızlı, zıplayan ya da yanıp sönen hareket kaygıyı artırabilir;
   amaç dikkat çekmek, rahatsız etmek değil. Fare üzerine gelince duruyor —
   kullanıcı zaten bulmuş demektir.
   ========================================================================== */
.hero-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.btn-test {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 0.85rem 1.6rem 0.85rem 1.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 999px;
    background-color: var(--color-accent-light);
    color: var(--color-accent-hover);
    border: 1px solid rgba(154, 44, 60, .22);
    cursor: pointer;
    /* Nabız halkası box-shadow ile; layout'u etkilemediği için
       transform/opacity gibi ucuz bir özellik ve reflow yaratmıyor. */
    animation: testNabiz 3.2s ease-in-out infinite;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-test:hover,
.btn-test:focus-visible {
    animation-play-state: paused;
    background-color: #F8DFE2;
    border-color: rgba(154, 44, 60, .45);
    transform: translateY(-1px);
}

.btn-test:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.btn-test .btn-icon { flex-shrink: 0; }

/* Sol taraftaki küçük nokta — "burada bir şey var" sinyali. */
.btn-test-nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-accent);
    flex-shrink: 0;
    animation: testNokta 3.2s ease-in-out infinite;
}

/* Aşağı ok: bölümün sayfada aşağıda olduğunu anlatıyor. */
.btn-test-ok {
    flex-shrink: 0;
    opacity: .55;
    animation: testOk 3.2s ease-in-out infinite;
}

.hero-highlight-not {
    font-size: .78rem;
    color: var(--color-text-muted);
    padding-left: .35rem;
    letter-spacing: .01em;
}

@keyframes testNabiz {
    0%, 100% { box-shadow: 0 0 0 0 rgba(154, 44, 60, .26); }
    50%      { box-shadow: 0 0 0 10px rgba(154, 44, 60, 0); }
}

@keyframes testNokta {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.35); opacity: .65; }
}

@keyframes testOk {
    0%, 100% { transform: translateY(0);   opacity: .55; }
    50%      { transform: translateY(3px); opacity: .9; }
}

@media (max-width: 560px) {
    .hero-highlight { align-items: stretch; }
    .btn-test { justify-content: center; }
    .hero-highlight-not { text-align: center; padding-left: 0; }
}

/* Hareket azaltma tercihi: psikoloji sitesinde bu ayarı ciddiye almak
   ayrıca önemli — kaygı ve vestibüler duyarlılıkta hareket rahatsız eder. */
@media (prefers-reduced-motion: reduce) {
    .btn-test,
    .btn-test-nokta,
    .btn-test-ok { animation: none; }
    .btn-test { transition: none; border-color: rgba(154, 44, 60, .35); }
    .btn-test:hover { transform: none; }
    .btn-test-ok { opacity: .7; }
}

/* Üç buton dar ekranda tek satıra sığmıyor — sarsın. */
.hero-actions { flex-wrap: wrap; }

@media (max-width: 560px) {
    .hero-actions { gap: .75rem; }
    .hero-actions .btn { width: 100%; }
}

/* Çapa hedefi sabit header'ın altında kalmasın. */
#dt-testler { scroll-margin-top: 8rem; }
@media (max-width: 768px) {
    #dt-testler { scroll-margin-top: 5rem; }
}

/* ==========================================================================
   Süreç yolu — birlikte yürüyen danışan ve uzman
   Konum ve poz değişimini app.js yönetiyor (11. blok). Buradaki CSS yalnız
   görünüm ve poz geçişleri; hareketin zamanlaması JS'te çünkü duraklarda
   bacakların durması ve sonda iki figürün ayrılması gerekiyor.
   ========================================================================== */
.process-yuruyen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* Figür kabı: YERDEKİ konum. Adım sıçraması içteki .yy-govde'ye uygulanıyor
   ki zemin gölgesi yerinde kalsın — gölge de zıplayınca figür yürümüyor,
   süzülüyor gibi görünüyordu. */
.yy-kisi {
    position: absolute;
    top: 50%;
    left: 0;
    /* Dalga kutusu 120px; figürün dikey sıfırı kutunun üst kenarı. */
    margin-top: -60px;
    width: 34px;
    height: 44px;
    /* Metinlerin üstünden geçerken figür okunur kalsın. */
    filter: drop-shadow(0 0 3px var(--color-bg-primary)) drop-shadow(0 0 6px var(--color-bg-primary));
    /* JS transform'u her karede yazıyor; geçiş yok, akış zaten sürekli. */
    will-change: transform;

    /* Ten her ikisinde ortak; giysi rengi kişiyi ayırıyor. */
    --ten: #E9C6AB;
    --ten-golge: #D2A98C;
    --sac: #3B2A24;
}

/* Danışan: nötr füme — marka bordosu uzmana ayrıldı. */
.yy-hasta {
    --ust: #46536B;
    --alt: #2F3A4D;
    --uzak-ust: #6B7894;
    --uzak-alt: #4A5878;
}

/* Uzman: marka bordosu. */
.yy-dr {
    --ust: #9A2C3C;
    --alt: #7E202D;
    --uzak-ust: #BE5B6C;
    --uzak-alt: #A34252;
}

/* Yükünü bıraktıktan sonra danışanın giysisi bir ton açılıyor. */
.yy-hasta[data-hafif="1"] {
    --ust: #5E7391;
    --alt: #43536E;
    --uzak-ust: #8797B2;
    --uzak-alt: #64769A;
}

.yy-govde {
    position: absolute;
    inset: 0;
    will-change: transform;
}

/* Zemin gölgesi: figür yükselince JS küçültüyor — temas hissini veren şey bu. */
.yy-golge {
    position: absolute;
    left: 50%;
    bottom: -2px;
    width: 26px;
    height: 7px;
    margin-left: -13px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(42, 46, 53, 0.28), rgba(42, 46, 53, 0));
    will-change: transform, opacity;
}

/* Danışanın iki gövde seti: her turda biri gösteriliyor — sürekli aynı
   kişinin gelmesi gerçekçi değildi. Uzman tek set. */
.yy-set { position: absolute; inset: 0; }
.yy-hasta[data-cins="e"] .yy-set-k,
.yy-hasta[data-cins="k"] .yy-set-e { display: none; }

.yy-poz {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/* Görünür poz JS tarafından data-poz ile seçiliyor. Dört kareli yürüyüş
   döngüsü: temas → geçiş → karşı temas → geçiş. İki kareyle "yerinde marş"
   görünüyordu. */
.yy-kisi[data-poz="yuru-1"] .yy-yuru-1,
.yy-kisi[data-poz="yuru-2"] .yy-yuru-2,
.yy-kisi[data-poz="yuru-3"] .yy-yuru-3,
.yy-kisi[data-poz="yuru-4"] .yy-yuru-4,
.yy-kisi[data-poz="dur"]    .yy-dur,
.yy-kisi[data-poz="selam"]  .yy-selam { opacity: 1; }

/* El sallama — yalnız selam pozunda, omuzdan döner. */
.yy-kisi[data-poz="selam"] .yy-el {
    transform-origin: 20px 18px;
    animation: elSalla 0.9s ease-in-out infinite;
}

/* Danışanın sırtındaki yük. Son durakta çözülüp düşüyor: "sorunlardan
   kurtularak ayrılmak" tek bir görsel olayla anlatılıyor — yolun sonunda
   figürün yanında hiçbir şey kalmıyor. */
.yy-yuk {
    position: absolute;
    inset: 0;
    color: #6E6156;
    opacity: 0.9;
}
.yy-yuk svg { width: 100%; height: 100%; display: block; }

.yy-hasta[data-yuk="yok"] .yy-yuk { display: none; }
.yy-hasta[data-yuk="dusuyor"] .yy-yuk {
    animation: yukBirak 0.9s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

@keyframes yukBirak {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0.9; }
    25%  { transform: translate(-4px, -3px) rotate(-14deg); opacity: 0.9; }
    100% { transform: translate(-13px, 30px) rotate(-62deg); opacity: 0; }
}

/* Konuşma baloncuğu — durakta danışan derdini söylüyor, uzman karşılık
   veriyor. İkisi hiçbir zaman AYNI ANDA konuşmuyor: figürler yan yana
   olduğu için iki baloncuk üst üste binerdi; sıralı olunca hem çakışma
   yok hem de gerçek bir diyalog gibi okunuyor. */
.yy-balon {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    z-index: 3;
    white-space: nowrap;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(154, 44, 60, 0.16);
    box-shadow: 0 4px 14px rgba(42, 46, 53, 0.10);
    color: var(--color-text-main);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Baloncuk kuyruğu: gövdeyle aynı beyaz, kenarlığı taklit eden ikinci
   üçgen bir piksel altta. */
.yy-balon::before,
.yy-balon::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
}
.yy-balon::before { border-top-color: rgba(154, 44, 60, 0.16); }
.yy-balon::after  { border-top-color: #fff; margin-top: -1px; }

.yy-kisi[data-balon="1"] .yy-balon {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Danışan sonda geri dönüp el sallarken figür scaleX(-1) ile aynalanıyor;
   baloncuk metni de ters dönmesin diye geri çevriliyor. */
.yy-kisi[data-ters="1"] .yy-balon { transform: translateX(-50%) scaleX(-1); }
.yy-kisi[data-ters="1"][data-balon="1"] .yy-balon {
    transform: translateX(-50%) scaleX(-1) translateY(0);
}
@keyframes elSalla {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-26deg); }
}

/* Sola bakan figür (danışan dönüp el sallarken). */
.yy-kisi.yy-ters { transform-origin: 50% 50%; }

@media (max-width: 768px) {
    /* Dalga 768px altında gizli — figürler de gizli, yolu olmayan yerde
       yürümesinler. */
    .process-yuruyen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .process-yuruyen { display: none; }
}

/* ==========================================================================
   KONU DİZİNİ
   ========================================================================== */
.dizin-section {
    padding: 6.5rem 0;
    background-color: var(--color-bg-secondary);
}

.dizin-gizli-etiket {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Arama --- */
.dizin-ara {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;
    margin: 2.75rem auto 0;
}

.dizin-ara-ikon {
    position: absolute;
    left: 1.1rem;
    width: 18px; height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
    transition: color 0.25s ease;
}
.dizin-ara:focus-within .dizin-ara-ikon { color: var(--color-accent); }

.dizin-giris {
    width: 100%;
    padding: 0.95rem 3rem 0.95rem 3rem;
    border: 1px solid rgba(226, 221, 213, 0.9);
    border-radius: 999px;
    background-color: var(--color-bg-card);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text-main);
    transition: var(--transition-smooth);
    -webkit-appearance: none;
            appearance: none;
}
.dizin-giris::placeholder { color: var(--color-text-muted); }
.dizin-giris::-webkit-search-cancel-button { display: none; }
.dizin-giris:focus {
    outline: none;
    border-color: rgba(154, 44, 60, 0.5);
    box-shadow: 0 0 0 4px rgba(154, 44, 60, 0.08);
}

.dizin-temizle {
    position: absolute;
    right: 0.7rem;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: var(--transition-smooth);
}
.dizin-temizle svg { width: 15px; height: 15px; }
.dizin-temizle:hover { background-color: var(--color-bg-secondary); color: var(--color-accent); }

.dizin-sayac {
    min-height: 1.4rem;
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

/* --- Izgara --- */
.dizin-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    /* Sütunlar içeriğe göre yükselsin; en uzun sütun diğerlerini uzatmasın. */
    align-items: start;
    gap: 3rem 2.5rem;
    margin-top: 2.5rem;
}

/* hidden niteliği display:flex/grid tarafından eziliyor; bu öğelerde
   açıkça bastırılması gerekiyor. Bastırılmazsa JS kapalıyken arama kutusu
   da açılırdı. */
.dizin-ara[hidden],
.dizin-temizle[hidden],
.dizin-bos[hidden],
.dizin-sutun[hidden],
.dizin-oge[hidden] { display: none; }

.dizin-baslik {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.85rem;
    /* İki satırlık başlık payı: kimi başlık tek, kimi çift satır sarıyor;
       sabit yükseklik olmadan ayraç çizgileri sütunlar arasında kayıyordu. */
    min-height: 3.4rem;
    border-bottom: 1px solid rgba(154, 44, 60, 0.22);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--color-text-dark);
}

/* Sıra numarası: dizin havasını veren ayrıntı. */
.dizin-no {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    opacity: 0.75;
}

.dizin-liste { list-style: none; margin: 0; padding: 0; }
.dizin-oge[hidden] { display: none; }

.dizin-oge a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.2s ease;
}
.dizin-oge a:hover,
.dizin-oge a:focus-visible { color: var(--color-accent); }
.dizin-oge a:focus-visible { outline: 2px solid rgba(154, 44, 60, 0.45); outline-offset: 3px; border-radius: 3px; }

/* Ok yalnız üzerine gelince beliriyor: 40 satırda sürekli duran ok
   listeyi gürültüye çeviriyordu. */
.dizin-ok {
    width: 14px; height: 14px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.dizin-oge a:hover .dizin-ok,
.dizin-oge a:focus-visible .dizin-ok { opacity: 1; transform: translateX(0); }

/* Aramada eşleşen harfler */
.dizin-oge mark {
    background: transparent;
    color: var(--color-accent);
    font-weight: 600;
}

/* --- Sonuç yok --- */
.dizin-bos {
    margin-top: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
}
.dizin-bos-ust {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
    color: var(--color-text-dark);
}
.dizin-bos-alt { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

.dizin-alt {
    margin: 4rem 0 0;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.dizin-bos-alt a,
.dizin-alt a {
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(154, 44, 60, 0.35);
    transition: var(--transition-smooth);
}
.dizin-bos-alt a:hover,
.dizin-alt a:hover { border-bottom-color: currentColor; }

@media (max-width: 768px) {
    .dizin-section { padding: 4rem 0; }
    .dizin-ara { margin-top: 2rem; }
    .dizin-izgara {
        /* Telefonda iki sütun: 40 başlık tek sütunda 2142px'lik bir şerit oluyor. */
        grid-template-columns: repeat(2, 1fr);
        gap: 2.25rem 1.25rem;
        margin-top: 2rem;
    }
    .dizin-baslik { font-size: 0.68rem; letter-spacing: 0.08em; }
    .dizin-oge a { font-size: 0.86rem; padding: 0.28rem 0; }
    .dizin-ok { display: none; }
    .dizin-alt { margin-top: 2.5rem; }
}

/* ==========================================================================
   HARİTA — TIKLA-YÜKLE
   ========================================================================== */
/* Kutu ölçüleri .contact-map-block'tan geliyor; burada yalnız iç düzen var.
   Önizleme dış istek yapmıyor: zemin CSS, iğne satır içi SVG. */
.harita-kutu { position: relative; }

.harita-onizleme {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    height: 100%;
    min-height: 450px;
    padding: 2.5rem 1.75rem;
    text-align: center;
    background-color: var(--color-bg-secondary);
    /* Kağıt harita hissi veren ince ızgara — görsel indirmeden. */
    background-image:
        linear-gradient(rgba(154, 44, 60, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 44, 60, 0.045) 1px, transparent 1px);
    background-size: 34px 34px;
}

.harita-pin {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--color-bg-card);
    box-shadow: var(--shadow-md);
    color: var(--color-accent);
}
.harita-pin svg { width: 27px; height: 27px; }

/* Adres ve yol tarifi bordo kartta; burada tekrarlanmıyor. */
.harita-not-ust {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.6;
    color: var(--color-text-main);
}

.harita-dugmeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.harita-ac,
.harita-tarif {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem 1.5rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.harita-ac {
    border: 0;
    background-color: var(--color-accent);
    color: #fff;
}
.harita-ac:hover { background-color: var(--color-accent-hover); }

.harita-tarif {
    border: 1px solid rgba(154, 44, 60, 0.35);
    background-color: transparent;
    color: var(--color-accent);
}
.harita-tarif:hover { background-color: var(--color-accent-light); }

.harita-ac:focus-visible,
.harita-tarif:focus-visible {
    outline: 2px solid rgba(154, 44, 60, 0.5);
    outline-offset: 3px;
}

.harita-not {
    max-width: 30ch;
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* Yüklendikten sonra çerçeve kutuyu tamamen dolduruyor. */
.harita-cerceve {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 0;
}

@media (max-width: 768px) {
    .harita-onizleme {
        min-height: 260px;
        padding: 2rem 1.25rem;
        gap: 0.9rem;
    }
    .harita-cerceve { min-height: 300px; }
    .harita-pin { width: 50px; height: 50px; }
    .harita-pin svg { width: 23px; height: 23px; }
    .harita-adres { font-size: 0.88rem; }
    .harita-dugmeler { width: 100%; }
    .harita-ac,
    .harita-tarif {
        flex: 1 1 auto;
        /* Parmakla basılan hedef en az 44px olsun. */
        min-height: 46px;
    }
}

/* ==========================================================================
   ULAŞIM
   ========================================================================== */
.ulasim {
    /* .section-container.grid-2 ızgaranın kendisi; blok sütuna
       sıkışmasın diye tüm satırı kaplıyor. */
    grid-column: 1 / -1;
    display: grid;
    gap: 1.25rem;
    margin-top: 4.5rem;
}


/* --- Adres kartı --- */
.contact-info-block .ulasim-adres { margin-top: 2.5rem; }

.ulasim-adres {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
    border-radius: 16px;
    background-color: var(--color-accent);
    color: #fff;
}

.ulasim-etiket {
    margin: 0 0 1.1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.ulasim-satir {
    margin: 0 0 1.75rem;
    font-size: 1.18rem;
    font-weight: 500;
    line-height: 1.62;
    letter-spacing: 0.005em;
}

.ulasim-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

/* Sütun içinde üç düğme tek satıra sığmıyor; birincil tam satır,
   diğer ikisi altında yan yana — sarkan tek düğmeden düzenli. */
.contact-info-block .ulasim-btn { flex: 1 1 calc(50% - 0.35rem); }
.contact-info-block .ulasim-btn--dolu { flex-basis: 100%; }

.ulasim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 46px;
    padding: 0.7rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    background-color: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.ulasim-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.ulasim-btn:hover { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.75); }

/* Birincil eylem: yol tarifi. Ziyaretçilerin çoğu bunu istiyor. */
.ulasim-btn--dolu {
    background-color: #fff;
    border-color: #fff;
    color: var(--color-accent);
}
.ulasim-btn--dolu:hover { background-color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.9); }

.ulasim-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.ulasim-durum {
    min-height: 1.2rem;
    margin: 0.85rem 0 0;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Ulaşım kartları --- */
.ulasim-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    /* Eşit yükseklik: üç kart bir küme, farklı boylarda bitince alt kenar
       tırtıklı görünüyordu. */
    align-items: stretch;
    gap: 1.25rem;
}

.ulasim-kart {
    padding: 1.75rem 1.6rem;
    border: 1px solid rgba(154, 44, 60, 0.14);
    border-radius: 14px;
    background-color: var(--color-accent-light);
}

.ulasim-kart-baslik {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem;
    /* Gövde yazı tipi: bunlar dekoratif başlık değil, yönerge etiketi. */
    font-family: inherit;
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-accent);
}
.ulasim-kart-baslik svg { width: 21px; height: 21px; flex-shrink: 0; }

.ulasim-kart p {
    margin: 0 0 0.9rem;
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--color-text-main);
}
.ulasim-kart p:last-child { margin-bottom: 0; }

.ulasim-ek {
    font-size: 0.88rem !important;
    color: var(--color-text-muted) !important;
}

.ulasim-secenek {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
}
.ulasim-secenek li {
    margin-bottom: 0.7rem;
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--color-text-main);
}
.ulasim-secenek li:last-child { margin-bottom: 0; }
.ulasim-secenek strong { color: var(--color-text-dark); }

/* Hat listesi: güzergâh solda, numara sağda — göz numarayı tarayarak buluyor. */
.ulasim-hat {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ulasim-hat li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.52rem 0;
    border-bottom: 1px solid rgba(154, 44, 60, 0.12);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-main);
}
.ulasim-hat li:last-child { border-bottom: 0; padding-bottom: 0; }
.ulasim-hat b {
    flex-shrink: 0;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-accent);
}

/* --- Bina içi not --- */
.ulasim-not {
    margin: 0;
    padding: 1.5rem 1.85rem;
    border: 1px solid rgba(226, 221, 213, 0.7);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    background-color: var(--color-bg-card);
    font-size: 0.94rem;
    line-height: 1.75;
    color: var(--color-text-main);
}
.ulasim-not strong { color: var(--color-accent); }

/* Harita bu blokta tam genişlikte duruyor. */
/* Harita bölümün kapanışı: tam genişlik, ölçülü yükseklik. */
.ulasim .harita-kutu { height: auto; }
.ulasim .harita-onizleme { min-height: 320px; }
.ulasim .harita-cerceve { min-height: 380px; }

@media (max-width: 768px) {
    .ulasim { margin-top: 3rem; gap: 1rem; }
    .ulasim-adres { padding: 2rem 1.5rem 1.75rem; border-radius: 14px; }
    .ulasim-satir { font-size: 1.1rem; }
    .ulasim-etiket { margin-bottom: 1rem; font-size: 0.7rem; }
    /* Yol tarifi tam satır (birincil eylem), diğer ikisi yan yana:
       üçü alt alta dizilince kart 486px'e çıkıyordu. */
    .ulasim-dugmeler { flex-wrap: wrap; gap: 0.6rem; }
    .ulasim-btn { flex: 1 1 calc(50% - 0.3rem); padding: 0.65rem 0.9rem; font-size: 0.86rem; }
    .ulasim-btn--dolu { flex-basis: 100%; }
    .ulasim-kartlar { grid-template-columns: 1fr; gap: 1.1rem; }
    .ulasim-kart { padding: 1.6rem 1.35rem; }
    .ulasim-not { padding: 1.25rem 1.35rem; font-size: 0.9rem; }
}

/* Ulaşım kartları mobilde açılır-kapanır. Üç kart üst üste 1119px tutuyordu
   ve ziyaretçi genellikle tek bir ulaşım yolunu okuyor. Masaüstünde hepsi
   açık ve başlık tıklanamaz; open niteliği HTML'de durduğu için JS kapalıysa
   da her şey açık kalıyor. */
.ulasim-kart-baslik::-webkit-details-marker { display: none; }
.ulasim-kart-baslik::marker { content: ''; }

.ulasim-ok {
    width: 18px;
    height: 18px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.ulasim-kart[open] .ulasim-ok { transform: rotate(180deg); }

/* Masaüstünde başlık bir düğme değil, yalnızca etiket. */
@media (min-width: 769px) {
    .ulasim-kart-baslik { pointer-events: none; }
    .ulasim-ok { display: none; }
}

@media (max-width: 768px) {
    .ulasim-kart-baslik {
        cursor: pointer;
        margin-bottom: 0;
        padding: 0.2rem 0;
    }
    .ulasim-kart[open] .ulasim-kart-baslik { margin-bottom: 0.9rem; }
    .ulasim-kart-baslik:focus-visible {
        outline: 2px solid rgba(154, 44, 60, 0.45);
        outline-offset: 4px;
        border-radius: 4px;
    }
}
@media (max-width: 768px) {
    /* Yer tutucu haritanın kendisi değil; ekranın yarısını yemesin. */
    .ulasim .harita-onizleme { min-height: 240px; }
    .ulasim .harita-cerceve { min-height: 300px; }
}

/* =============================================================
   Diploma ve Sertifikalar
   -------------------------------------------------------------
   Kart üstte belgenin TAMAMINI gösterir (contain): kırpılmış bir
   sertifika okunmaz, okunmayan belge de kanıt sayılmaz.

   Kartlar tek satırda yan yana durur ve yatay kaydırılır. Oklar ve
   noktalar app.js tarafından yalnızca gerekiyorsa açılır — iki belge
   varken ok göstermenin anlamı yok. JS yoksa şerit yine parmakla
   kaydırılabilir kalır.
   ============================================================= */

.belgeler-blok {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid var(--border-color);
}

.belgeler-ust {
    max-width: 760px;
    margin: 0 auto clamp(2rem, 4vw, 2.75rem);
    text-align: center;
}

.belgeler-h {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin: 0.6rem 0 0.75rem;
}

.belgeler-alt {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

/* -------------------------------------------------------------
   Kaydırak
   ------------------------------------------------------------- */

.belge-kaydirak { position: relative; }

/* hidden niteliği tarayıcının kendi tablosunda display:none olarak tanımlı,
   ama oradaki kural sınıf seçicilerinden zayıf: aşağıdaki display: grid /
   flex bildirimleri onu eziyor ve hidden'lanmış öğe ekranda kalıyordu.
   Bu bileşenler JS ile gizlendiği için kuralı burada geri kazandırıyoruz. */
.belge-ok[hidden],
.belge-noktalar[hidden],
.belge-pencere-tarih[hidden],
.belge-pencere-yazi [hidden] { display: none; }

.belge-ray {
    display: flex;
    /* Kartlar satırı doldurmuyorsa ortalanır. "safe": taşma durumunda
       ortalama iptal olur, yoksa ilk kart sola kayıp erişilemez hâle gelirdi. */
    justify-content: flex-start;
    justify-content: safe center;
    gap: clamp(1rem, 2vw, 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Kartın gölgesi kırpılmasın diye iç boşluk; negatif kenar boşluğu
       hizayı bölüm kenarına geri çeker. */
    padding: 0.5rem;
    margin: -0.5rem;
    scrollbar-width: none;
}
.belge-ray::-webkit-scrollbar { display: none; }

.belge-kart {
    display: flex;
    flex-direction: column;
    /* Üç sütun hedef. Kart sayısı üçten azsa büyüyerek boşluğu kapatır ama
       bir sınırın ötesine geçmez — iki belge yan yana devasa görünmesin. */
    flex: 1 0 calc((100% - 2 * clamp(1rem, 2vw, 1.5rem)) / 3);
    max-width: 430px;
    scroll-snap-align: start;
    background: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.belge-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 1024px) {
    .belge-kart { flex-basis: calc((100% - clamp(1rem, 2vw, 1.5rem)) / 2); }
}
@media (max-width: 680px) {
    .belge-kart { flex-basis: 86%; max-width: none; }
}

/* -------------------------------------------------------------
   Kartın görsel kısmı
   ------------------------------------------------------------- */

.belge-ac {
    display: block;
    width: 100%;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    cursor: zoom-in;
}

.belge-cerceve {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0.9rem;
    border-radius: 10px;
    background: var(--color-bg-secondary);
    overflow: hidden;
}

.belge-gorsel {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-smooth);
}

.belge-ac:hover .belge-gorsel { transform: scale(1.03); }

.belge-ac:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
    border-radius: 16px 16px 0 0;
}

/* Görseli henüz yüklenmemiş belge */
.belge-bos {
    display: grid;
    place-items: center;
    color: var(--border-color);
}
.belge-bos svg { width: 54px; height: 54px; }

.belge-buyutec {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    transition: var(--transition-fast);
}

.belge-buyutec svg { width: 17px; height: 17px; }
.belge-ac:hover .belge-buyutec { background: var(--color-accent); color: #fff; }

/* -------------------------------------------------------------
   Kartın metin kısmı
   ------------------------------------------------------------- */

.belge-govde {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.85rem;
    padding: 1.25rem 1.35rem 1.5rem;
}

.belge-kimlik {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.belge-ikon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-accent-light);
    color: var(--color-accent);
}
.belge-ikon svg { width: 20px; height: 20px; }

.belge-kimlik-metin { min-width: 0; }

.belge-baslik {
    font-family: var(--font-sans);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 0.3rem;
}

.belge-kurum {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.belge-tarih {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    color: var(--color-accent);
    font-size: 0.86rem;
    font-weight: 600;
}
.belge-tarih svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Rozet, açıklama ve doğrulama kartta gizli; büyütme penceresi ikisini de
   kartın DOM'undan okuyor. Etkileşimle açılan içerik — bu sayfadaki sekme
   ve akordeon kalıbının aynısı. */
.belge-kart .belge-rozet,
.belge-kart .belge-aciklama { display: none; }

/* -------------------------------------------------------------
   Oklar ve noktalar
   ------------------------------------------------------------- */

.belge-ok {
    position: absolute;
    top: 38%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--color-bg-card);
    color: var(--color-text-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: var(--transition-fast);
}

.belge-ok svg { width: 20px; height: 20px; }
.belge-ok-geri  { left: clamp(-22px, -1.5vw, 0px); }
.belge-ok-ileri { right: clamp(-22px, -1.5vw, 0px); }

.belge-ok:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.belge-ok:disabled { opacity: 0.32; cursor: default; }
.belge-ok:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.belge-noktalar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.75rem;
}

.belge-nokta {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--border-color);
    cursor: pointer;
    transition: var(--transition-fast);
}

.belge-nokta[aria-selected="true"] {
    width: 28px;
    background: var(--color-accent);
}
.belge-nokta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* -------------------------------------------------------------
   Büyütme penceresi
   ------------------------------------------------------------- */

.belge-pencere {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: rgba(26, 28, 30, 0.86);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.belge-pencere.acik { display: flex; opacity: 1; }

.belge-pencere-ic {
    position: relative;
    width: min(1140px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--color-bg-card);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(10px) scale(0.985);
    transition: transform var(--transition-smooth);
}

.belge-pencere.acik .belge-pencere-ic { transform: none; }

.belge-pencere-kapat {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: var(--transition-fast);
}

.belge-pencere-kapat svg { width: 20px; height: 20px; }
.belge-pencere-kapat:hover { background: var(--color-accent); color: #fff; }

.belge-pencere-figur {
    display: grid;
    /* Sertifikalar çoğunlukla yatay: sol sütun geniş tutuluyor ki belge
       okunabilecek büyüklükte çıksın. */
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    align-items: stretch;
    margin: 0;
}

/* Belge, açık zeminde bol boşlukla ve TAM görünür. */
.belge-pencere-sol {
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    background: var(--color-bg-secondary);
}

.belge-pencere-gorsel {
    max-width: 100%;
    max-height: 74vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}

/* Görseli olmayan belgede sol sütun yer kaplamasın. */
.belge-pencere-figur.gorselsiz { grid-template-columns: minmax(0, 1fr); }
.belge-pencere-figur.gorselsiz .belge-pencere-sol { display: none; }

.belge-pencere-yazi {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.belge-pencere-yazi .belge-rozet {
    align-self: flex-start;
    padding: 0.24rem 0.72rem;
    border-radius: 100px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.belge-pencere-yazi .belge-rozet-diploma { background: #EDF1F7; color: #33507A; }

.belge-pencere-baslik {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    line-height: 1.25;
    margin: 0.1rem 0 0;
}

.belge-pencere-kurum {
    color: var(--color-accent);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
}

.belge-pencere-tarih {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    font-weight: 500;
}
.belge-pencere-tarih svg { width: 17px; height: 17px; flex-shrink: 0; }

.belge-pencere-aciklama {
    margin-top: 0.35rem;
    color: var(--color-text-main);
    font-size: 1rem;
    line-height: 1.8;
}


@media (max-width: 860px) {
    /* Dar ekranda yan yana iki sütun okunmuyor: belge üste geçiyor. */
    .belge-pencere-figur { grid-template-columns: minmax(0, 1fr); }
    .belge-pencere-sol { padding: 1.35rem; }
    .belge-pencere-gorsel { max-height: 46vh; }
    .belge-ok { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .belge-ray { scroll-behavior: auto; }
    .belge-kart,
    .belge-gorsel,
    .belge-pencere,
    .belge-pencere-ic { transition: none; }
    .belge-kart:hover { transform: none; }
    .belge-ac:hover .belge-gorsel { transform: none; }
}

/* =============================================================
   Hizmet sayfalarında ofis konumu
   -------------------------------------------------------------
   Bu sayfalarda görünür bir adres hiç yoktu. Adres artık
   /izmir-bayrakli-... olduğuna göre sayfanın da o vaadi
   karşılaması gerekiyor.

   Harita ana sayfadaki .harita-kutu kalıbını kullanıyor;
   önizleme, düğme ve çerçeve stilleri oradan geliyor.
   ============================================================= */

.ofis-konum {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--color-bg-secondary);
}

.ofis-konum-govde {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}

.ofis-konum-kart {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.ofis-konum-kart h3 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.ofis-adres {
    font-style: normal;
    line-height: 1.75;
    color: var(--color-text-main);
    padding-bottom: 1.15rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid var(--border-color);
}

/* Ulaşım satırları: etiket üstte küçük, açıklama altında. */
.ofis-ulasim { margin: 0 0 1.5rem; }
.ofis-ulasim dt {
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.9rem;
}
.ofis-ulasim dt:first-child { margin-top: 0; }
.ofis-ulasim dd {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.ofis-konum-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: auto;
}
.ofis-konum-eylem .btn { flex: 1 1 auto; text-align: center; }

.ofis-konum-harita {
    position: relative;
    min-height: 340px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

@media (max-width: 860px) {
    .ofis-konum-govde { grid-template-columns: minmax(0, 1fr); }
    .ofis-konum-harita { min-height: 280px; }
}

/* =============================================================
   Yapımcı imzası — altbilgi telif satırının solunda
   -------------------------------------------------------------
   İmza, telif <p>'sinin İÇİNDE değil KARDEŞİ. Telif satırı
   panelden düzenlenebilir bir düğüm; imza oraya yazılsaydı bir
   içerik düzenlemesinde silinebilirdi.

   Logo hiç değiştirilmiyor. Altbilgi koyu olduğu için lacivert
   kısmı okunmuyordu; renkleri CSS'ten ezmek yerine logo beyaz
   bir zemine alındı. Marka kimliği bozulmuyor.
   ============================================================= */

.footer-alt-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 0.9rem;
}

.footer-imza {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-imza-yazi {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.footer-imza-bag {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    transition: box-shadow var(--transition-fast);
}
.footer-imza-bag:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
    border-radius: 3px;
}

.imza-logo { width: auto; height: 18px; display: block; }

/* Logo hiç değiştirilmiyor: kendi renkleriyle duruyor ve koyu altbilgide
   okunabilmesi için beyaz bir zemine alınıyor. Renkleri CSS'ten ezmek
   markanın kimliğini bozardı. */
.footer-imza-bag {
    padding: 0.32rem 0.6rem;
    border-radius: 6px;
    background: #fff;
    opacity: 1;
}
.footer-imza-bag:hover,
.footer-imza-bag:focus-visible { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18); }

/* Telif satırıyla imzayı ayıran ince çizgi. */
.footer-imza-ayrac {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.18);
}

.footer-alt-satir > p { margin: 0; }

@media (max-width: 640px) {
    /* Dar ekranda alt alta; ayraç yatayken anlamlıydı, dikeyde değil. */
    .footer-alt-satir { flex-direction: column; gap: 0.7rem; }
    .footer-imza-ayrac { display: none; }
}

/* -------------------------------------------------------------
   Test penceresi imzası
   -------------------------------------------------------------
   Pencere açıkken sayfanın altbilgisi görünmüyor; imza pencerenin
   kendi altında duruyor. Zemin açık olduğu için logo yerine sade
   metin kullanıldı — küçük bir alanda okunması daha kolay.
   ------------------------------------------------------------- */

.pnk-pencere-imza {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.85rem 1rem 1.1rem;
    border-top: 1px solid var(--border-color);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.pnk-pencere-imza a {
    color: #2a9d8f;
    font-weight: 600;
}
.pnk-pencere-imza a:hover { text-decoration: underline; }

/* =============================================================
   Randevu talebi penceresi
   -------------------------------------------------------------
   Solda kim ve nerede, sağda seçim. Dar ekranda tek sütuna
   iniyor ve yan panel kısalıyor — telefonda asıl iş sağdaki
   seçimler, kartvizit değil.
   ============================================================= */

.randevu-pencere {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, 2rem);
    background: rgba(26, 28, 30, 0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.randevu-pencere.acik { display: flex; opacity: 1; }

.randevu-ic {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    width: min(940px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--color-bg-card);
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(12px) scale(0.985);
    transition: transform var(--transition-smooth);
}
.randevu-pencere.acik .randevu-ic { transform: none; }

.randevu-kapat {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: var(--color-text-dark);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: var(--transition-fast);
}
.randevu-kapat svg { width: 19px; height: 19px; }
.randevu-kapat:hover { background: var(--color-accent); color: #fff; }

/* -------- Sol: kartvizit -------- */
.randevu-yan {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--color-bg-secondary);
    border-radius: 20px 0 0 20px;
    text-align: center;
}

.randevu-foto {
    width: 108px;
    height: 108px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: var(--shadow-sm);
    display: block;
}

.randevu-ad {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--color-text-dark);
}

.randevu-unvan {
    margin-top: 0.3rem;
    color: var(--color-accent);
    font-size: 0.82rem;
    font-weight: 500;
}

.randevu-bilgi {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-color);
    text-align: left;
}
.randevu-bilgi dt {
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 0.9rem;
}
.randevu-bilgi dt:first-child { margin-top: 0; }
.randevu-bilgi dd {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}
.randevu-bilgi a { color: var(--color-text-main); text-decoration: underline; }

/* -------- Sağ: seçim -------- */
.randevu-govde { padding: clamp(1.5rem, 3vw, 2.25rem); }

.randevu-baslik {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    margin-bottom: 0.5rem;
}

.randevu-giris {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 1.4rem;
}

.randevu-alan {
    border: 0;
    padding: 0;
    margin: 0 0 1.2rem;
}
.randevu-alan legend {
    padding: 0;
    margin-bottom: 0.55rem;
    color: var(--color-text-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.randevu-secenek { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Seçim düğmeleri gerçek <button> ve aria-pressed taşıyor: klavyeyle
   seçilebiliyor, ekran okuyucu durumu bildiriyor. Rakip sitede bunlar
   <div> ve yalnız fareyle çalışıyor. */
.randevu-cip,
.randevu-saat {
    padding: 0.52rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    background: #fff;
    color: var(--color-text-main);
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    transition: var(--transition-fast);
}
.randevu-cip:hover,
.randevu-saat:hover { border-color: var(--color-accent); color: var(--color-accent); }

.randevu-cip[aria-pressed="true"],
.randevu-saat[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.randevu-cip:focus-visible,
.randevu-saat:focus-visible,
.randevu-gun:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Günler ızgarada, YATAY KAYDIRMA YOK.
   Önce tek satırda kayan bir şeritti; hem masaüstünde hem telefonda
   sağa-sola sürmek gerekiyordu ve sağdaki günler görünmüyordu.
   auto-fill ile satır atlıyor: hangi genişlikte olursa olsun bütün
   günler tek bakışta görünüyor. */
.randevu-gunler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 0.45rem;
}

.randevu-gun {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    color: var(--color-text-main);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
}
.randevu-gun:hover { border-color: var(--color-accent); }
.randevu-gun[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.randevu-gun-ad  { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.randevu-gun-sayi { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }
.randevu-gun-ay  { font-size: 0.7rem; opacity: 0.75; }

.randevu-saatler { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.randevu-ipucu,
.randevu-bos {
    margin-top: 0.55rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.randevu-ad-alan { display: block; margin-bottom: 1.2rem; }
.randevu-ad-alan > span {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--color-text-dark);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.randevu-ad-alan em { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.6; }
.randevu-ad-alan input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 0.95rem;
}
.randevu-ad-alan input:focus {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(154, 44, 60, 0.1);
}

.randevu-gonder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    text-align: center;
}
.randevu-gonder svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Pasif hâl: bağlantı kaldırılmıyor, yalnız sönükleşiyor. JS çalışmasa
   bile düğme WhatsApp'a giden geçerli bir bağlantı olarak kalıyor. */
.randevu-gonder--pasif {
    background: var(--border-color);
    border-color: var(--border-color);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.randevu-gonder--pasif:hover { background: var(--border-color); }

.randevu-not {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.9rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.55;
}
.randevu-not svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.12rem; }
/* Simge artık <p>'nin dışında: düzenlenebilir metin yalnız yazıdan
   ibaret, temizleyici işaretlemeyi bozamıyor. */
.randevu-not > p { margin: 0; }

/* Eylem alanı: gönder düğmesi ve uyarı notu birlikte. Mobilde alta
   yapışıyor, masaüstünde olağan akışta duruyor. */
.randevu-eylem { margin-top: 0.4rem; }

@media (max-width: 800px) {
    /* Telefonda pencere değil TAM EKRAN sayfa: 940 pikselik bir kutuyu
       390 piksele sıkıştırmak yerine ekranı komple kullanıyor.
       100dvh kullanılıyor — 100vh, adres çubuğu açıkken taşıyor. */
    .randevu-pencere { padding: 0; align-items: stretch; }

    .randevu-ic {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        overflow: hidden;          /* kaydırma gövdeye ait */
        transform: none;
    }

    /* Kartvizit tek satıra iniyor. Kapat düğmesine yer bırakılıyor:
       önce üstüne biniyordu. */
    .randevu-yan {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem 3.5rem 1rem 1.15rem;
        border-radius: 0;
        text-align: left;
    }
    .randevu-foto { width: 52px; height: 52px; margin: 0; flex-shrink: 0; }
    .randevu-ad { font-size: 0.92rem; line-height: 1.3; }
    /* <br> gizleniyor ama işaretlemede öncesinde gerçek bir boşluk var:
       display:none olan öğeye ::after eklemek işe yaramıyor, o yüzden
       boşluk HTML'e konuldu. Aksi hâlde "PsikologDerya" diye bitişiyor. */
    .randevu-ad br { display: none; }
    .randevu-unvan,
    .randevu-bilgi { display: none; }

    /* Gövde kaydırılıyor, gönder düğmesi altta sabit kalıyor. */
    .randevu-govde {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.15rem 1.15rem 0;
    }
    .randevu-baslik { font-size: 1.25rem; }
    .randevu-giris { font-size: 0.86rem; margin-bottom: 1rem; }
    .randevu-alan { margin-bottom: 1rem; }

    /* Alta yapışan eylem alanı. Zemin düz ve üstünde ince bir çizgi var:
       geçişli zeminde altındaki metin yarı görünür kalıyor ve alanın
       nerede bittiği belirsizleşiyordu. */
    .randevu-eylem {
        position: sticky;
        bottom: 0;
        /* margin-top:auto YOK: yapışkan öğe normal akış kardeşlerinin
           ÜSTÜNE boyanıyor, auto marj onu yukarı ittiğinde isim alanının
           üzerini kapatıyordu. Akışta kalıp yalnız kaydırmada pinleniyor. */
        margin-top: 0;
        padding: 0.85rem 0 1rem;
        background: var(--color-bg-card);
        border-top: 1px solid var(--border-color);
    }
    /* Son alan yapışkan şeridin altında kalmasın. */
    .randevu-ad-alan { margin-bottom: 0.6rem; }
    .randevu-not { font-size: 0.75rem; margin-top: 0.6rem; }

    .randevu-kapat { top: 0.7rem; right: 0.7rem; }
}

@media (max-width: 380px) {
    .randevu-cip, .randevu-saat { padding: 0.45rem 0.75rem; font-size: 0.83rem; }
    .randevu-gunler { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .randevu-pencere, .randevu-ic, .randevu-cip, .randevu-saat, .randevu-gun { transition: none; }
}

/* -------------------------------------------------------------
   Sol Kenar Hızlı Erişim Sekmeleri

   İki dikey sekme: WhatsApp'tan online görüşme ve sayfa içindeki
   ön değerlendirme testleri. Mobilde gizli — orada zaten
   .mobile-bottom-bar var ve dar ekranda sabit sekme içeriğin
   üstüne biniyor.
   ------------------------------------------------------------- */
.yan-sekmeler {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Sitedeki sıra: pencereler 1200-1300, başlık 1000, WhatsApp 999.
       998 hepsinin altında: randevu penceresi veya mobil menü açıkken
       sekmeler üste binmez. */
    z-index: 998;
}

.yan-sekme {
    position: relative;
    display: flex;              /* ikon üstte, yazı altta */
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 0 10px 10px 0;   /* yalnız sağ köşeler */
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12);
    padding: 0.95rem 0.6rem;
    animation: ys-giris 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both,
               ys-nabiz 1.9s ease-out 0.6s infinite;
}

/* İKON DÖNMÜŞ KATMANIN DIŞINDA.
   İçeri konunca writing-mode + rotate(180deg) ikonu da çeviriyor ve
   WhatsApp logosu baş aşağı duruyor. Burada dik kalır. */
.yan-sekme-ikon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/* Dönme İÇ katmanda: dış katman animasyonlar için serbest kalsın.
   Aynı öğeye hem rotate hem translate koyulursa her keyframe'de
   rotate'i tekrarlamak gerekir; biri unutulunca yazı ters döner. */
.yan-sekme-yazi {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.yan-sekme:hover,
.yan-sekme:focus-visible { background: var(--color-accent-hover); }

.yan-sekme:focus-visible {
    outline: 3px solid var(--color-topbar);
    outline-offset: 2px;
}

@keyframes ys-giris {
    from { opacity: 0; transform: translateX(-100%); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Nabız box-shadow ile, transform ile DEĞİL: giriş animasyonu zaten
   transform kullanıyor, ikisi aynı özelliği çekiştirmesin. Halka öğenin
   dışına taşar; overflow onu kırpmaz (overflow yalnız çocukları kırpar). */
@keyframes ys-nabiz {
    0% {
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12),
                    0 0 0 0 rgba(154, 44, 60, 0.7),
                    0 0 0 0 rgba(154, 44, 60, 0.45);
    }
    45% {
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12),
                    0 0 0 14px rgba(154, 44, 60, 0),
                    0 0 0 6px rgba(154, 44, 60, 0.3);
    }
    100% {
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.12),
                    0 0 0 22px rgba(154, 44, 60, 0),
                    0 0 0 22px rgba(154, 44, 60, 0);
    }
}

@media (max-width: 768px) {
    .yan-sekmeler { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .yan-sekme { animation: none; }
}

/* #iletisim çapasına giden 44 bağlantı var ve bölümde scroll-margin
   tanımlı değildi: hepsi başlığı yapışkan header'ın altına indiriyordu.
   #dt-testler'de bu değer zaten var. */
#iletisim { scroll-margin-top: 8rem; }

/* ==========================================================================
   Çerez onay bandı
   ==========================================================================
   NEDEN VAR: sitede GTM, GA4 ve Google Ads çalışıyor; üçü de çerez
   yerleştiriyor. KVKK zorunlu olmayan çerezler için açık rıza arıyor.

   KABUL VE RET AYNI AĞIRLIKTA: reddetmek kabul etmek kadar kolay olmazsa
   rıza geçerli sayılmıyor. Bu yüzden iki düğme aynı boyutta ve aynı
   görsel önemde — biri renkli büyük, diğeri soluk küçük DEĞİL.

   position: fixed — akışta yer kaplamıyor, düzen kaymasına (CLS) yol
   açmıyor. Mobil alt çubuğun üstünde duruyor. */
.onay-bandi {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;              /* mobil çubuk 1200, pencereler 1300 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
    padding: 1.15rem 1.5rem;
    background: var(--color-topbar);
    color: #fff;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .22);
    animation: onay-gir .32s ease-out both;
}

.onay-bandi-metin {
    flex: 1 1 22rem;
    max-width: 46rem;
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
}

.onay-bandi-metin a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.onay-bandi-dugmeler {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

.onay-dugme {
    min-width: 8.5rem;
    padding: .7rem 1.35rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

/* Kabul dolu, ret çerçeveli: ikisi de aynı boyutta ve okunaklı.
   Fark yalnız hangisinin varsayılan olduğunu belli ediyor, reddi
   zorlaştırmıyor. */
.onay-dugme--kabul { background: #fff; color: var(--color-topbar); }
.onay-dugme:hover  { background: rgba(255, 255, 255, .18); }
.onay-dugme--kabul:hover { background: rgba(255, 255, 255, .85); }

.onay-dugme:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

@keyframes onay-gir {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 768px) {
    /* Mobil alt çubuğun üstüne çıkıyor, onu kapatmıyor. */
    .onay-bandi { bottom: 64px; padding: 1rem; }
    .onay-bandi-dugmeler { width: 100%; }
    .onay-dugme { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .onay-bandi { animation: none; }
    .onay-dugme { transition: none; }
}

/* Teşekkür sayfası — yalnız form gönderimi sonrası görülüyor. */
.tesekkur-bolum { padding: 8rem 0 5rem; }

.tesekkur-kutu {
    max-width: 42rem;
    text-align: center;
}

.tesekkur-ikon { color: var(--color-accent); margin-bottom: 1.25rem; }

/* Sitenin genel sıfırlaması bütün marjinleri 0 yapıyor ve h1 için tanımlı
   kural yalnız renk/yazı tipi. Bu boşluk verilmezse başlık altındaki
   paragrafa yapışık duruyor. Boyut da .section-title ile hizalanıyor,
   yoksa sayfanın tek h1'i sitedeki diğer başlıklardan küçük kalıyor. */
.tesekkur-kutu h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}

.tesekkur-acil-uyari {
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.6;
}

.tesekkur-saat {
    margin-top: 1rem;
    font-size: .88rem;
    color: var(--color-text-muted);
}

.tesekkur-giris { font-size: 1.1rem; line-height: 1.7; margin-bottom: 2.5rem; }

.tesekkur-acil {
    padding: 1.75rem;
    border: 1px solid var(--border-color);   /* sitede 16 yerde kullanılan değişken */
    border-radius: 14px;
    margin-bottom: 2.5rem;
}

.tesekkur-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    margin-top: 1rem;
}

.tesekkur-arada { margin-bottom: .75rem; }

.tesekkur-baglantilar {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.tesekkur-donus a { text-decoration: underline; text-underline-offset: 3px; }