:root {
    --background-color: #000000;
    --primary-color: #c4a85d;
    --secondary-color: #D1B06B;
    --text-color: #FEFCE1;
    --text-muted-color: #D8D6BF;
    --border-color: rgba(254, 252, 225, 0.15);
    --card-bg-color: rgba(254, 252, 225, 0.05);
    --font-family: 'Plus Jakarta Sans', sans-serif;
}

/* General Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-muted-color);
    font-size: 16px;
    line-height: 1.7;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

h1, h2, h3, h4 {
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

section {
    padding: 100px 0;
    border-bottom: 1px solid var(--border-color);
}

/* Header */
header {
    padding: 20px 0;
    position: absolute;
    width: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(14,16,15,0.7) 0%, rgba(14,16,15,0) 100%);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 40px;
}

.main-nav {
    display: block;
}

header nav ul {
    display: flex;
    gap: 40px;
}

header nav a {
    color: var(--text-color);
    font-weight: 600;
    position: relative;
    padding: 5px 0;
}

header nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

header nav a:hover::after {
    width: 100%;
}

.auth-buttons {
    display: flex;
    gap: 10px;
}

.auth-buttons a {
    padding: 12px 24px;
    border-radius: 48px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.login-btn {
    background-color: rgba(254, 252, 225, 0.1);
    color: var(--text-color);
}

.login-btn:hover {
    background-color: rgba(254, 252, 225, 0.2);
}

.signup-btn {
    background-color: var(--primary-color);
    color: var(--background-color);
}

.signup-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
}

/* Hero Section */
.hero {
    height: 885px;
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: none;
    overflow: hidden;
}

.hero-background,
.hero-foreground {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
}

.hero-background img,
.hero-foreground img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right;
}

.hero-background {
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-foreground {
    z-index: 3;
    pointer-events: none;
}

.hero-text {
    width: 100%;
}

.hero-heading {
    font-size: 120px;
    font-weight: 700;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hero-heading div {
    width: 100%;
}

.align-left {
    text-align: left;
    padding-left: 5%;
}

.align-center {
    text-align: center;
    padding-right: 10%;
}

.align-right {
    text-align: right;
    padding-right: 5%;
}

.hero-subtext {
    margin-top: 40px;
    max-width: 400px;
    padding-left: 5%;
}

.hero-subtext p {
    font-size: 18px;
    opacity: 0.8;
}

.btn {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: 16px 40px;
    border-radius: 48px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 30px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(196, 168, 93, 0.2);
}

.btn-outline {
    padding: 10px 20px;
    font-size: 14px;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 48px;
    display: inline-block;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: var(--text-color);
    color: var(--background-color);
    box-shadow: 0 5px 15px rgba(254, 252, 225, 0.2);
}

.btn:disabled,
.btn[disabled] {
    background-color: #88784a; /* Soluk bir renk */
    color: #c4c4c4;
    opacity: 0.7;
    cursor: not-allowed; /* Tıklanamaz imleci */
    transform: none; /* Hover efektlerini iptal et */
    box-shadow: none; /* Hover efektlerini iptal et */
}

/* Experience Section */
.experience {
    text-align: center;
}

.experience > p {
    font-size: 18px;
    max-width: 600px;
    margin: 20px auto 60px;
    opacity: 0.6;
}

.experience-stats {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.stat h3 {
    font-size: 48px;
}

.stat p {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Attorneys Section */
.attorneys {
    text-align: center;
}

.attorney-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.attorney-cards .card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.attorney-cards .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.attorney-cards .card:hover::after {
    opacity: 1;
}

.attorney-cards .card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    color: var(--text-color);
    text-align: left;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
}

.attorney-cards .card:hover .card-content {
    opacity: 1;
    transform: translateY(0);
}

.card-content h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-color);
}

.card-content p {
    font-size: 14px;
    margin: 0 0 16px 0;
    opacity: 0.9;
}

/* Practice Areas Section */
.practice-areas {
    text-align: center;
}

.practice-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    text-align: left;
}

.practice-cards .card {
    padding: 32px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--card-bg-color);
    transition: all 0.3s ease;
}

.practice-cards .card:hover, .practice-cards .card.active {
    background-color: var(--text-color);
    transform: translateY(-5px);
}

.practice-cards .card:hover h3, .practice-cards .card.active h3,
.practice-cards .card:hover p, .practice-cards .card.active p,
.practice-cards .card:hover .learn-more, .practice-cards .card.active .learn-more {
    color: var(--background-color);
}

.practice-cards .icon {
    background-color: rgba(254, 252, 225, 0.15);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.practice-cards .card:hover .icon, .practice-cards .card.active .icon {
    background-color: rgba(14, 16, 15, 0.15);
}

.practice-cards h3 {
    font-size: 24px;
    font-weight: 600;
}

.practice-cards p {
    opacity: 0.7;
    margin: 16px 0;
}

.learn-more {
    color: var(--secondary-color);
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Consultation Section */
.consultation {
    text-align: center;
}

.consultation form {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}

.input-group img {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
}

.consultation input, .consultation textarea {
    width: 100%;
    padding: 16px 0 16px 35px; /* Add padding for icon */
    background-color: transparent;
    border: none;
    color: var(--text-muted-color);
    font-size: 16px;
    font-family: var(--font-family);
}

.consultation input:focus, .consultation textarea:focus {
    outline: none;
}

.consultation textarea {
    height: 88px;
    resize: vertical;
}

.input-group:focus-within {
    border-bottom-color: var(--primary-color);
}

/* FAQ Section */
.faq .container {
    display: flex;
    gap: 60px;
    align-items: center;
}

.faq-image {
    flex: 1;
}

.faq-image img {
    width: 100%;
    border-radius: 12px;
}

.faq-content {
    flex: 1.5;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 20px 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h3 {
    margin: 0;
    font-size: 20px;
}

.faq-toggle {
    font-size: 24px;
    color: var(--secondary-color);
    transition: transform 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding-top 0.5s ease;
}

.faq-answer p {
    margin: 0;
    padding-top: 15px;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

/* Testimonials Section */
.testimonials {
    text-align: center;
}

.testimonial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    text-align: left;
}

.testimonial-cards .card {
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--card-bg-color);
}

.testimonial-cards img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.testimonial-cards p {
    font-size: 20px;
    margin: 20px 0;
    font-weight: 500;
}

.testimonial-cards h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 20px 0 5px 0;
}

.testimonial-cards span {
    font-size: 14px;
    opacity: 0.7;
}

/* Footer */
footer {
    padding: 100px 0 20px;
    border-bottom: none;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

.footer-about, .footer-links, .footer-subscribe, .footer-contact {
    flex: 1;
    min-width: 250px;
}

.footer-logo {
    height: 40px;
    margin-bottom: 20px;
}

.footer-about p {
    font-size: 14px;
    opacity: 0.7;
    max-width: 270px;
}

.social-icons {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.social-icons a {
    transition: transform 0.3s ease;
}

.social-icons a:hover {
    transform: scale(1.1);
}

.footer-links h4, .footer-subscribe h4, .footer-contact h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 24px;
}

.footer-links ul li {
    margin-bottom: 16px;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-subscribe p {
    font-size: 14px;
    opacity: 0.7;
}

.footer-subscribe form {
    margin-top: 24px;
}

.footer-subscribe input {
    width: 100%;
    padding: 16px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted-color);
}

.footer-subscribe input:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
}

.footer-subscribe .btn {
    margin-top: 20px;
    width: 100%;
}

.footer-contact p {
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    opacity: 0.8;
}

/* About Us Page Specific Styles */
.hero-about {
    background-image: url('images/about-hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 500px; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-about .container {
    position: relative;
    z-index: 2;
}

.hero-about-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-about-content .section-subtitle {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.hero-about-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero-about-content {
    padding-top: 100px;
}

.hero-about-description {
    font-size: 24px;
    opacity: 0.8;
}

.hero-about-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.hero-about-images .image-card {
    width: 30%; /* Adjust as needed */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.about-story, .about-mission, .about-vision {
    padding: 100px 0;
}

.story-content, .mission-content, .vision-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.story-text, .mission-text, .vision-text {
    flex: 1;
}

.story-image, .mission-image, .vision-image {
    flex: 1;
}

.story-image img, .mission-image img, .vision-image img {
    border-radius: 12px;
}

.story-features, .mission-features, .vision-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.story-features p, .mission-features p, .vision-features p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    opacity: 0.9;
}

.story-features img, .mission-features img, .vision-features img {
    width: 20px;
    height: 20px;
}

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

.experience-section .section-description {
    font-size: 18px;
    max-width: 600px;
    margin: 20px auto 60px;
    opacity: 0.6;
}

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

.trusted-companies .section-description {
    font-size: 18px;
    max-width: 600px;
    margin: 20px auto 60px;
    opacity: 0.6;
}

.company-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 60px;
}

.company-logos img {
    height: 50px; /* Adjust as needed */
    object-fit: contain;
}

/* Team Page Specific Styles */
.hero-team {
    background-image: url('images/team-hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-team::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-team .container {
    position: relative;
    z-index: 2;
}

.hero-team-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-team-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero-team-description {
    font-size: 24px;
    opacity: 0.8;
}

.team-single-section {
    padding: 100px 0;
}

.team-single-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.team-single-image {
    flex: 1;
}

.team-single-image img {
    border-radius: 12px;
}

.team-single-details {
    flex: 2;
    text-align: left;
}

.team-single-details h2 {
    font-size: 48px;
    margin-bottom: 10px;
}

.attorney-description-box {
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.attorney-description-box p {
    margin: 0;
    opacity: 0.9;
}

.attorney-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.attorney-tags .tag {
    background-color: rgba(196, 168, 93, 0.2);
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
}

.attorney-stats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
}

.attorney-stats p {
    font-size: 16px;
    margin: 0;
}

.attorney-contact {
    display: flex;
    align-items: center;
    gap: 20px;
}

.attorney-contact .social-icons {
    margin-top: 0;
}

/* Contact Page Specific Styles */
.hero-contact {
    background-image: url('images/contact-hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-contact .container {
    position: relative;
    z-index: 2;
}

.hero-contact-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-contact-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero-contact-description {
    font-size: 24px;
    opacity: 0.8;
}

/* Practice Areas Page Specific Styles */
.hero-practice-areas {
    background-image: url('images/practice-areas-hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-practice-areas::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-practice-areas .container {
    position: relative;
    z-index: 2;
}

.hero-practice-areas-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-practice-areas-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero-practice-areas-description {
    font-size: 24px;
    opacity: 0.8;
}

.practice-areas-list {
    text-align: center;
}

.practice-area-detail-section {
    padding: 100px 0;
}

.practice-area-detail-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.practice-area-detail-text {
    flex: 1;
    text-align: left;
}

.practice-area-detail-text .section-subtitle {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.practice-area-detail-text .section-title {
    font-size: 48px;
    margin-bottom: 20px;
}

.practice-area-detail-text p {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 20px;
}

.practice-area-detail-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.practice-area-detail-features p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    opacity: 0.9;
}

.practice-area-detail-features img {
    width: 20px;
    height: 20px;
}

.practice-area-detail-image {
    flex: 1;
}

.practice-area-detail-image img {
    border-radius: 12px;
}

/* Login Page Specific Styles */
.hero-login {
    background-image: url('images/login-hero-bg.png');
    background-size: cover;
    background-position: center;
    /* height: 500px;  -> Sabit yükseklik kaldırıldı */
    padding: 120px 0 100px 0; /* İçeriğe göre esnemesi için padding eklendi */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-login .container {
    position: relative;
    z-index: 2;
    /* Başlık ve formun dikey olarak hizalanması için eklendi */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-login-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-login-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

/* Bu tanım artık kullanılmadığı için kaldırılabilir, ancak zararı yok. */
.hero-login-description {
    font-size: 24px;
    opacity: 0.8;
}

/* Bu bölüm artık HTML'de olmadığı için stilleri kaldırıldı. */
/*
.login-form-section {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/

.login-form-container {
    background-color: var(--card-bg-color);
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    margin-top: 40px; /* Başlık ile form arasına boşluk eklendi */
}

/* --- DEĞİŞİKLİKLER SONU --- */


.login-header h2 {
    font-size: 32px;
    margin-bottom: 30px;
}

.login-form-container form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form-container .input-group {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    background-color: rgba(254, 252, 225, 0.05);
}

.login-form-container .input-group img {
    position: static;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.login-form-container .input-group input {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    font-family: var(--font-family);
}

.login-form-container .input-group input:focus {
    outline: none;
}

.login-form-container .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(196, 168, 93, 0.3);
}

.login-form-container .btn {
    width: 100%;
    margin-top: 20px;
}

.login-footer {
    margin-top: 30px;
}

.login-footer p {
    font-size: 14px;
}

.login-footer a {
    color: var(--primary-color);
    font-weight: 600;
}


/* --- KAYIT OLMA SAYFASI DEĞİŞİKLİKLERİ SONU --- */



/* Signup Page Specific Styles */
.hero-signup {
    /* İstenen arka plan resmi eklendi */
    background-image: url('images/signup-hero-bg.png'); 
    background-size: cover;
    background-position: center;
    /* Sabit yükseklik kaldırılarak esnek hale getirildi */
    padding: 120px 0 100px 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-signup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-signup .container {
    position: relative;
    z-index: 2;
    /* Başlık ve formu dikeyde ortalamak için eklendi */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-signup-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-signup-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

/* Bu tanım artık kullanılmıyor */
.hero-signup-description {
    font-size: 24px;
    opacity: 0.8;
}

/* Bu bölüm artık HTML'de olmadığı için stilleri kaldırıldı. */
/* 
.signup-form-section {
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
} 
*/

.signup-form-container {
    background-color: var(--card-bg-color);
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    /* Başlık ile form arasına boşluk eklendi */
    margin-top: 40px; 
}

/* --- KAYIT OLMA SAYFASI DEĞİŞİKLİKLERİ SONU --- */


.signup-header h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

.signup-header p {
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 30px;
}

.signup-form-container form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.signup-form-container .input-group {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    background-color: rgba(254, 252, 225, 0.05);
}

.signup-form-container .input-group img {
    position: static;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.signup-form-container .input-group input {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    font-family: var(--font-family);
}

.signup-form-container .input-group input:focus {
    outline: none;
}

.signup-form-container .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(196, 168, 93, 0.3);
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px; /* Increased gap for better spacing */
    margin-top: 10px;
    font-size: 14px;
    text-align: left;
    cursor: pointer; /* Indicate it's clickable */
}

.checkbox-group input[type="checkbox"] {
    /* Hide the default checkbox */
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* Ensure it doesn't interfere with custom checkbox click */
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color); /* Unchecked state border */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background-color: transparent;
}

.checkbox-group input[type="checkbox"]:checked + .custom-checkbox {
    background-color: var(--primary-color); /* Checked state background */
    border-color: var(--primary-color); /* Checked state border */
}

.custom-checkbox::after {
    content: '';
    width: 8px;
    height: 12px;
    border: solid var(--background-color); /* Checkmark color */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
}

.checkbox-group input[type="checkbox"]:checked + .custom-checkbox::after {
    opacity: 1; /* Show checkmark when checked */
}

.checkbox-group label {
    cursor: pointer; /* Make label clickable */
    color: var(--text-muted-color); /* Ensure label color matches theme */
}

.checkbox-group:hover .custom-checkbox {
    border-color: var(--primary-color); /* Highlight border on hover */
}


.signup-form-container .btn {
    width: 100%;
    margin-top: 20px;
}

.signup-footer {
    margin-top: 30px;
}

.signup-footer p {
    font-size: 14px;
}

.signup-footer a {
    color: var(--primary-color);
    font-weight: 600;
}


/* 404 SAYFASI - DOĞRU VE BASİT ÇÖZÜM
   ========================================================================== */

.hero-404 {
    /* ----- YERLEŞİM ----- */
    min-height: 100vh; /* Sayfanın tüm yüksekliği kaplamasını sağlar */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 40px;
    border-bottom: none;
    position: relative; /* Overlay katmanı için gerekli */

    /* ----- ARKA PLAN ----- */
    /* İstenen görsel, tek arka plan olarak ayarlandı */
    background-image: url('images/404-hero-bg.png');
    
    /* Bu 3 satır, görselin tüm alanı kaplamasını ve ortalanmasını sağlar */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}

/* Metnin okunabilirliğini sağlamak için görselin üzerine karartma katmanı ekliyoruz */
.hero-404::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Yarı saydam siyah bir katman */
    background-color: rgba(14, 16, 15, 0.75); 
    z-index: 1; /* Bu katman, arka planın üstünde durur */
}

/* Metin içeriğinin, karartma katmanının da üzerinde durmasını sağlıyoruz */
.hero-404 .container {
    position: relative;
    z-index: 2; /* İçerik en üstte */
}

/* ----- METİN STİLLERİ ----- */
.hero-404-content {
    max-width: 800px;
}

.hero-404-content .section-title {
    font-size: 180px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0;
    color: var(--primary-color);
}

.hero-404-content h2 {
    font-size: 48px;
    margin: 10px 0 20px 0;
    color: var(--text-color);
}

.hero-404-content .hero-404-description {
    font-size: 18px;
    opacity: 0.9;
    max-width: 550px;
    margin: 0 auto 40px auto;
}
/* ==========================================================================
   404 SAYFASI - SON
   ========================================================================== */

/* Password Protected Page Specific Styles */
.hero-password-protected {
    background-image: url('images/password-protected-hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-password-protected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-password-protected .container {
    position: relative;
    z-index: 2;
}

.hero-password-protected-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-password-protected-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero-password-protected-description {
    font-size: 24px;
    opacity: 0.8;
}

.password-protected-form-section {
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.password-protected-form-container {
    background-color: var(--card-bg-color);
    padding: 40px;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.password-protected-form-container .lock-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.password-protected-form-container h2 {
    font-size: 32px;
    margin-bottom: 20px;
}

.password-protected-form-container p {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 30px;
}

.password-protected-form-container .input-group {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 15px;
    background-color: rgba(254, 252, 225, 0.05);
}

.password-protected-form-container .input-group img {
    position: static;
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.password-protected-form-container .input-group input {
    width: 100%;
    padding: 0;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    font-family: var(--font-family);
}

.password-protected-form-container .input-group input:focus {
    outline: none;
}

.password-protected-form-container .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(196, 168, 93, 0.3);
}

.password-protected-form-container .btn {
    width: 100%;
    margin-top: 20px;
}

/* Changelog Page Specific Styles */
.hero-changelog {
    background-image: url('images/changelog-hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    border-bottom: none;
}

.hero-changelog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay for readability */
    z-index: 1;
}

.hero-changelog .container {
    position: relative;
    z-index: 2;
}

.hero-changelog-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-changelog-content .section-title {
    font-size: 60px;
    margin-bottom: 20px;
}

.hero-changelog-description {
    font-size: 24px;
    opacity: 0.8;
}

.changelog-section {
    padding: 100px 0;
}

.changelog-item {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    align-items: flex-start;
}

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

.changelog-version {
    flex: 0 0 150px;
    text-align: right;
}

.changelog-version h3 {
    font-size: 24px;
    margin-bottom: 5px;
}

.changelog-version p {
    font-size: 14px;
    opacity: 0.7;
}

.changelog-content {
    flex: 1;
    text-align: left;
}

.changelog-content p {
    font-size: 18px;
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 992px) {
    .main-nav {
        display: none;
        position: fixed;
        top: 0;
        right: -300px; /* Start off-screen */
        width: 300px;
        height: 100%;
        background-color: #1a1c1b;
        flex-direction: column;
        padding-top: 80px;
        transition: right 0.3s ease-in-out;
    }
    .main-nav.active {
        display: flex;
        right: 0; /* Slide in */
    }
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .main-nav ul li {
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }
    .auth-buttons {
        display: none; /* Hide desktop auth buttons */
    }
    .mobile-menu-toggle {
        display: block;
        z-index: 11; /* Ensure it's above the nav */
    }
    .hero-text h1 {
        font-size: 80px;
    }
    .attorney-cards, .form-row, .faq .container {
        flex-direction: column;
    }
    .attorney-cards .card {
        width: 100%;
        max-width: 400px;
    }
    .story-content, .mission-content, .vision-content {
        flex-direction: column;
    }
    .hero-about-images {
        flex-direction: column;
        align-items: center;
    }
    .hero-about-images .image-card {
        width: 80%;
    }
    .team-single-content {
        flex-direction: column;
    }
    .practice-area-detail-content {
        flex-direction: column;
    }
    .changelog-item {
        flex-direction: column;
        text-align: center;
    }
    .changelog-version {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    .hero-text h1 {
        font-size: 60px;
    }
    .experience-stats, .testimonial-cards {
        flex-direction: column;
    }
    .stat, .testimonial-cards .card {
        margin-bottom: 40px;
    }
    .footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-about,
    .footer-links,
    .footer-subscribe,
    .footer-contact {
        align-items: center;
    }
    .footer-contact p {
        justify-content: center;
    }
    .story-features, .mission-features, .vision-features {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   MAKALELER SAYFASI STİLLERİ
   ========================================================================== */

/* Hero Alanı (Sayfa Başlığı) */
.hero-articles {
    background-color: #1a1c1b; /* Sitenizin koyu tonlarından biri */
    padding: 120px 0 100px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.hero-articles-content .section-subtitle {
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 600;
}

.hero-articles-content .section-title {
    font-size: 52px;
    margin-bottom: 15px;
}

.hero-articles-description {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted-color);
}

/* Makale Listesi */
.articles-section {
    padding: 100px 0;
}

.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.article-card {
    display: block;
    background-color: var(--card-bg-color);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.article-card-image {
    height: 220px;
    background-color: #333; /* Resim yüklenmezse diye */
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-content {
    padding: 25px;
}

.article-meta {
    font-size: 14px;
    color: var(--text-muted-color);
    margin-bottom: 15px;
}

.article-meta .separator {
    margin: 0 8px;
}

.article-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

.article-excerpt {
    font-size: 16px;
    color: var(--text-muted-color);
    line-height: 1.7;
    margin-bottom: 25px;
}

.article-card .learn-more {
    font-weight: 600;
    color: var(--primary-color);
}

.no-articles {
    text-align: center;
    padding: 80px 0;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
}
.no-articles h2 {
    font-size: 28px;
    margin-bottom: 15px;
}


/* ==========================================================================
   PREMIUM MAKALE SAYFASI TASARIMLARI
   ========================================================================== */

/* === GENEL SAYFA BAŞLIĞI === */
.page-hero {
    padding: 120px 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0; /* top, left, right, bottom: 0; */
    background: rgba(14, 16, 15, 0.7);
}
.page-hero-content {
    position: relative;
    z-index: 2;
}
.page-hero h1 {
    font-size: 56px;
    margin-bottom: 10px;
    font-weight: 800;
}
.page-hero p {
    font-size: 20px;
    color: var(--text-muted-color);
    max-width: 600px;
    margin: 0 auto;
}

/* === MAKALE LİSTELEME (articles.php) === */
.articles-layout {
    padding: 100px 0;
}
.premium-article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px 30px;
}
.premium-card {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}
.premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border-color: var(--primary-color);
}
.premium-card__image-wrapper {
    height: 200px;
    background-color: #333;
    overflow: hidden;
}
.premium-card__image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.premium-card:hover .premium-card__image-wrapper img {
    transform: scale(1.05);
}
.premium-card__content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.premium-card__title {
    font-size: 22px;
    line-height: 1.4;
    color: var(--text-color);
    margin: 0 0 15px 0;
}
.premium-card__excerpt {
    color: var(--text-muted-color);
    margin: 0 0 20px 0;
    flex-grow: 1; /* Bu satır metayı aşağı iter */
}
.premium-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--text-muted-color);
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    opacity: 0.8;
}
.no-content-info {
    text-align: center;
    padding: 80px 20px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
}

/* ==========================================================================
   PREMIUM MAKALE DETAY SAYFASI v2.0
   ========================================================================== */

/* Header'ın içerik altına girmesini engelleyen ana düzenleme */
.article-page-body {
    padding-top: 90px; /* Header yüksekliğiniz kadar bir boşluk */
}
.page-header--static {
    position: fixed; /* Ya da 'absolute' yerine 'fixed' yaparak yukarı sabitleriz */
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--background-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
}


/* Ana Makale Konteyneri */
.article-container {
    max-width: 760px; /* Okunabilirlik için ideal genişlik */
    margin: 60px auto 100px auto;
    padding: 0 20px;
}

/* Makale Başlık Alanı */
.article-header-premium {
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 30px;
}
.article-title-premium {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-color);
    margin-bottom: 20px;
}
.article-meta-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted-color);
    font-size: 15px;
}
.article-meta-premium .meta-separator {
    color: var(--primary-color);
    font-size: 20px;
}
.article-featured-image-premium {
    margin: 40px 0 0 0;
    border-radius: 8px;
    overflow: hidden;
}

/* İçindekiler Tablosu (TOC) */
.toc-premium {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    padding: 20px 25px;
    border-radius: 6px;
    margin: 40px 0;
}
.toc-premium h4 {
    margin: 0 0 15px 0;
    font-size: 18px;
    color: var(--text-color);
}
.toc-premium ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc-premium ul li {
    margin-bottom: 10px;
}
.toc-premium ul a {
    text-decoration: none;
    color: var(--text-muted-color);
    transition: color 0.2s;
}
.toc-premium ul a:hover {
    color: var(--primary-color);
}


/* Makale İçeriği (Okunabilirlik Odaklı) */
.article-body-premium h2,
.article-body-premium h3 {
    color: var(--text-color);
    margin-top: 2.5em;
    margin-bottom: 1em;
    line-height: 1.3;
}
.article-body-premium h2 { font-size: 32px; }
.article-body-premium h3 { font-size: 26px; }

.article-body-premium p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-muted-color);
    margin-bottom: 1.5em;
}
.article-body-premium a {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.article-body-premium ul {
    list-style-type: disc;
    padding-left: 25px;
    margin-bottom: 1.5em;
}
.article-body-premium li {
    margin-bottom: 0.8em;
    font-size: 18px;
    line-height: 1.8;
}

/* Makale Sonu ve Paylaşım */
.article-footer-premium {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.share-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}
.share-buttons span {
    font-weight: 600;
    color: var(--text-color);
}
.share-buttons a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted-color);
    background: var(--card-bg-color);
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.2s;
}
.share-buttons a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--background-color);
    transform: translateY(-2px);
}

/* ==========================================================================
   PREMIUM ADMIN PANELİ TASARIMI
   ========================================================================== */

body.admin-page {
    background-color: #0e100f; /* Ana sitenin siyahından biraz daha yumuşak bir ton */
}

.admin-wrapper {
    max-width: 1100px;
    margin: 50px auto;
    padding: 40px;
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-color);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 25px;
    margin-bottom: 30px;
}

.admin-header h2 {
    font-size: 28px;
    margin: 0;
    color: var(--text-color);
}

.admin-header .actions a {
    margin-left: 15px;
    text-decoration: none;
}

/* === Admin Tablosu (index.php) === */
.content-box {
    background-color: rgba(14, 16, 15, 0.5);
    padding: 30px;
    border-radius: 8px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th, .admin-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.admin-table thead th {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-muted-color);
    border-bottom-width: 2px;
}

.admin-table tbody tr:hover {
    background-color: rgba(254, 252, 225, 0.03);
}

.admin-table .article-title {
    font-weight: 600;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}
.action-btn.edit {
    background-color: rgba(196, 168, 93, 0.2);
    color: var(--primary-color);
}
.action-btn.edit:hover {
    background-color: var(--primary-color);
    color: var(--background-color);
}
.action-btn.delete {
    background-color: rgba(255, 82, 82, 0.15);
    color: #ff8a8a;
}
.action-btn.delete:hover {
    background-color: #c53030;
    color: #fff;
}
.no-articles-message {
    text-align: center;
    padding: 50px;
    color: var(--text-muted-color);
}


/* === Admin Formları (add & edit) === */
.admin-form .form-group {
    margin-bottom: 25px;
}

.admin-form label {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.admin-form input[type="text"],
.admin-form textarea {
    width: 100%;
    padding: 12px;
    background-color: #0e100f;
    border: 1px solid #444;
    border-radius: 6px;
    color: var(--text-color);
    font-size: 16px;
    font-family: var(--font-family);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form input[type="text"]:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(196, 168, 93, 0.2);
}

.admin-form input[type="file"] {
    color: #bbb;
    font-size: 14px;
}

.current-image-preview {
    margin-top: 15px;
}
.current-image-preview p {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-muted-color);
}
.current-image-preview img {
    max-width: 250px;
    border-radius: 6px;
    border: 2px solid #444;
}

.form-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}