/* CSS Variables - Consistent Palette */
:root {
    --birincil-renk: #f9deb6; /* Light Beige/Peach */
    --ikincil-renk: #f9ead4; /* Lighter Beige/Cream */
    --koyu-kontrast: #6b4f4b; /* Dark Brown for text, accents */
    --metin-rengi: var(--koyu-kontrast);
    --buton-yazi-renk: var(--koyu-kontrast); /* Text/Icon color for yeni-buton */
    --arka-plan: #fdfcfa;
    --buton-metin: #ffffff; /* White text for dark elements */
    --border-renk: #e0e0e0;
    --buton-hover-bg: #e4c8a0; /* Darker beige for hover */
    --buton-normal-bg: #ffffff;
    --transition-duration: 0.3s;
    --font-ana: 'Poppins', sans-serif;
    --yesil-durum: #2ecc71; /* Green for open status */
    --kirmizi-durum: #e74c3c; /* Red for closed status */
}

/* General Page Styles */
body {
    font-family: var(--font-ana);
    background-color: var(--arka-plan);
    color: var(--metin-rengi);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Card Container */
.hukuk-kartvizit-container {
    max-width: 520px;
    width: 100%;
    box-sizing: border-box;
}

/* Card Styles */
.hukuk-kartvizit {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: center;
    border-top: 5px solid var(--birincil-renk);
    box-sizing: border-box;
    position: relative;
}

/* Language Switcher Styles with Flags */
.language-switcher {
    position: absolute; top: 18px; right: 20px; display: flex; align-items: center; gap: 8px; z-index: 10;
}
.language-switcher a { display: inline-block; line-height: 0; cursor: pointer;}
.language-switcher img {
    width: 28px; height: auto; border-radius: 3px; vertical-align: middle; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--border-renk);
}
.language-switcher img:hover { transform: scale(1.1); box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
.language-switcher a.active img { border: 2px solid var(--koyu-kontrast); box-shadow: 0 0 8px rgba(107, 79, 75, 0.3); }
.language-switcher a:not(.active) img { opacity: 0.7; }


/* Top Save Button Container */
.top-save-button-container {
    margin-top: 55px; margin-bottom: 15px; display: flex; justify-content: center;
}
.top-save-button-container .yeni-buton {
     max-width: 350px;
     width: 100%;
     font-size: 1em;
     padding: .9em 1em;
}

/* Header Section */
 .kartvizit-header .profil-resmi {
    width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; border: 4px solid var(--koyu-kontrast);
}
.kartvizit-header .isim {
    font-family: var(--font-ana); font-weight: 700; font-size: 1.8em; color: var(--metin-rengi); margin: 10px 0 5px 0;
}
.kartvizit-header .unvan, .kartvizit-header .firma {
    font-family: var(--font-ana); font-weight: 400; font-size: 1.1em; color: var(--metin-rengi); opacity: 0.8; margin: 0 0 15px 0;
}

/* --- UPDATED YENI BUTON STYLE (Always Visible Icon) --- */
.yeni-buton {
    display: grid;
    grid-gap: .8em;
    grid-template-columns: 1.8em 1fr;
    align-items: center;
    width: 100%;
    border: none;
    padding: .75em 1em; /* Default padding */
    border-radius: 2em;
    background: color-mix(in hsl, var(--buton-hover-bg) calc(var(--hov, 0)*100%), var(--buton-normal-bg));
    color: var(--buton-yazi-renk);
    font-family: var(--font-ana);
    font-weight: 500;
    font-size: 0.95em; /* Default font size */
    line-height: 1.375;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-duration) ease,
                box-shadow var(--transition-duration) ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    border: 1px solid var(--border-renk);
    text-align: left;
    box-sizing: border-box;
}
.yeni-buton span[data-lang-key] {
     display: inline-block;
}

.yeni-buton::before { /* Icon element */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: var(--buton-yazi-renk);
    color: var(--buton-metin);
    font-size: 0.8em;
    content: attr(data-ico);
    display: grid;
    place-items: center;
}

.yeni-buton:is(:hover, :focus) {
    --hov: 1;
    outline: none;
    box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}
/* --- End Updated Yeni Buton Style --- */

/* --- ICON BUTTON STYLE (for social media/directions - unchanged) --- */
.ikon-buton {
    display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border-radius: 12px; background-color: var(--buton-normal-bg); color: var(--buton-yazi-renk); font-size: 1.2em; text-decoration: none; cursor: pointer; border: 1px solid var(--border-renk); box-shadow: 0 3px 6px rgba(0,0,0,0.06);
    transition: background-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease, transform var(--transition-duration) ease;
}
.ikon-buton:hover {
    background-color: var(--buton-hover-bg); box-shadow: 0 5px 10px rgba(0,0,0,0.1); transform: translateY(-2px);
}
.ikon-buton i { line-height: 1; margin: 0; }
/* --- End Icon Button Style --- */


/* Horizontal Button Group Styling (Only for Social now) */
.button-group {
    display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 15px; margin-bottom: 30px; flex-wrap: wrap;
}

/* Stacked Button Container Styling (For Primary, Links, Directions) */
.stacked-button-container {
     display: grid;
     grid-template-columns: 1fr; /* Single column */
     gap: 12px; /* Vertical gap */
     margin: 25px auto 30px auto;
     max-width: 350px;
     justify-items: center;
}
 /* Size/Style for Stacked Yeni Buttons */
.stacked-button-container .yeni-buton {
     width: 100%;
     max-width: 100%;
     font-size: 1em;
     padding: .9em 1em;
}

/* Primary Contact Buttons Section (Uses Stacked Style) */
.primary-contact-buttons {
     /* Inherits .stacked-button-container styles */
}

/* Bio Section */
.kartvizit-bio {
    margin: 30px 0;
    padding: 0 15px;
    font-size: 0.95em;
    line-height: 1.7;
    color: var(--metin-rengi);
    opacity: 0.9;
    font-weight: 400;
    text-align: left; /* Align text left */
    position: relative; /* For fade-out effect */
}
 /* Container for collapsible text */
.bio-text-container {
    transition: max-height 0.5s ease-out;
    position: relative; /* Needed for pseudo-element */
}
 /* Collapsed state */
.bio-text-container.collapsed {
    max-height: 6.8em; /* Approx 4 lines (adjust 1.7em line-height * 4) */
    overflow: hidden;
}
 /* Fade-out effect for collapsed text */
.bio-text-container.collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em; /* Height of the fade */
    /* Use card background color (white) for the fade */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow clicking through the fade */
}
 /* Expanded state */
.bio-text-container.expanded {
    max-height: 1000px; /* Large enough height to show all content */
    overflow: visible;
}
.bio-text-container.expanded::after {
     display: none; /* Hide fade when expanded */
}
.bio-text-container p {
     margin-bottom: 1em; /* Space between paragraphs */
}
 /* Read More Button */
.read-more-button {
    display: block;
    margin: 10px auto 0 auto; /* Center button below text */
    padding: 5px 10px;
    font-family: var(--font-ana);
    font-size: 0.9em;
    font-weight: 500;
    color: var(--koyu-kontrast);
    background-color: transparent;
    border: 1px solid var(--koyu-kontrast);
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.read-more-button:hover {
    background-color: var(--koyu-kontrast);
    color: var(--buton-metin);
}
/* Hide button when expanded */
.bio-text-container.expanded + .read-more-button {
    display: none;
}


/* Section Headings */
.hukuk-kartvizit h3 {
    font-family: var(--font-ana); font-weight: 700; color: var(--koyu-kontrast); margin-top: 35px; margin-bottom: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--koyu-kontrast); display: inline-block; font-size: 1.3em;
}

/* Practice Areas Section Styles */
.kartvizit-uzmanlik { }
.uzmanlik-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 5px; }
.uzmanlik-tag {
    display: inline-block;
    background-color: var(--koyu-kontrast);
    color: var(--buton-metin);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-decoration: none; /* For link consistency */
    transition: background-color 0.2s ease;
}
a.uzmanlik-tag {
     cursor: pointer;
     background-color: var(--koyu-kontrast);
}
a.uzmanlik-tag:hover {
    background-color: #8a6f6a;
    text-decoration: underline;
}


/* Action Links/Buttons Section (Uses Stacked Style) */
.kartvizit-linkler {
     /* Inherits .stacked-button-container styles */
}


/* UPDATED: Testimonials Section - Replaced with single paragraph */
.kartvizit-yorumlar {
     margin: 35px 0;
     padding: 0 15px;
}
.kartvizit-yorumlar p {
    padding: 20px;
    background-color: var(--ikincil-renk);
    border-radius: 8px;
    font-size: 1em;
    font-style: italic;
    line-height: 1.6;
    color: var(--koyu-kontrast);
    opacity: 0.9;
    text-align: center;
    border-left: 4px solid var(--birincil-renk);
}

/* Office Hours Section - Updated with Status */
.kartvizit-saatler { margin-bottom: 30px; font-size: 0.95em; line-height: 1.6; }
.kartvizit-saatler p { margin: 5px 0; color: var(--metin-rengi); opacity: 0.9; }
.office-status { margin-top: 10px; font-weight: 500; font-size: 1em; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background-color: #ccc; transition: background-color 0.5s ease; vertical-align: middle; }
.status-dot.open { background-color: var(--yesil-durum); }
.status-dot.closed { background-color: var(--kirmizi-durum); }
#office-status-text { vertical-align: middle; }

/* Map Section Styles */
.kartvizit-harita { }
.map-container { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; border-radius: 10px; border: 1px solid var(--border-renk); }
.map-container iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; border: 0; }
.kartvizit-harita p small { display: block; margin-top: 15px; font-size: 0.9em; color: var(--metin-rengi); opacity: 0.8; }
/* Directions Button Container (Uses Stacked Style) */
.directions-button-container {
     margin-top: 15px;
     margin-bottom: 30px;
}

/* Social Media Section (Remains Horizontal Icons) */
.kartvizit-sosyal { }
.social-media-buttons { /* Inherits .button-group styles */ gap: 12px; }
.social-media-buttons .ikon-buton { width: 45px; height: 45px; font-size: 1.2em; }

 /* FAQ Section Styles */
.kartvizit-faq { margin-bottom: 30px; text-align: left; }
.kartvizit-faq details { background-color: #fff; border: 1px solid var(--border-renk); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.kartvizit-faq summary { padding: 15px; font-weight: 500; cursor: pointer; outline: none; list-style: none; position: relative; color: var(--koyu-kontrast); }
.kartvizit-faq summary::after { content: '+'; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 1.2em; color: var(--koyu-kontrast); transition: transform 0.2s ease; }
.kartvizit-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.kartvizit-faq details div { padding: 0 15px 15px 15px; font-size: 0.9em; line-height: 1.6; color: var(--metin-rengi); opacity: 0.9; }

/* QR Code Section */
.kartvizit-qr { }
.kartvizit-qr img {
    display: block;
    margin: 15px auto;
    border: 1px solid var(--border-renk);
    padding: 5px; /* Add padding around QR */
    background-color: white;
    max-width: 140px; /* Max display width */
    width: 100%; /* Ensure it scales down */
    height: auto; /* Maintain aspect ratio */
    box-sizing: border-box;
 }
.kartvizit-qr p small { color: var(--metin-rengi); opacity: 0.7; font-size: 0.85em; margin-top: 5px; display: block; }

/* Mobile Adjustments */
@media (max-width: 550px) {
    .hukuk-kartvizit-container { max-width: 100%; }
     .stacked-button-container { max-width: 90%; } /* Apply to all stacked groups */
     .top-save-button-container { max-width: 90%; margin-left: auto; margin-right: auto;} /* Keep specific if needed */
    .button-group { gap: 10px; } /* Affects social media group */
}
@media (max-width: 450px) {
     body { padding: 5px; }
     .hukuk-kartvizit { padding: 20px 15px; }
     .language-switcher { top: 10px; right: 10px; }
     .language-switcher img { width: 24px; }
     .top-save-button-container { margin-top: 45px; }
     .kartvizit-header .isim { font-size: 1.5em; }
     /* Adjust stacked buttons for smaller screens */
     .stacked-button-container .yeni-buton {
         font-size: 0.95em;
         padding: .8em 1em;
         grid-template-columns: 1.7em 1fr;
     }
     .yeni-buton::before { width: 1.7em; height: 1.7em; font-size: 0.75em; }
     .ikon-buton { width: 40px; height: 40px; font-size: 1.1em; }
     .social-media-buttons .ikon-buton { width: 38px; height: 38px; font-size: 1em; }
     .uzmanlik-tag { font-size: 0.8em; padding: 6px 12px; }
     .bio-text-container.collapsed { max-height: 6em; } /* Adjust collapsed height for mobile */
}