/* ==========================================================================
   HOW PROCESS (Dosyanızdan kapınıza, dört adımda)
   ========================================================================== */
.how-process {
    max-width: var(--container);
    margin: 100px auto 60px;
    padding: 0 48px;
}
.how-process-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: end;
    margin-bottom: 48px;
}
.how-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.how-eyebrow-line { width: 24px; height: 1px; background: var(--ink); }
.how-eyebrow .t-mono {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
}
.how-title {
    font-size: clamp(36px, 5.5vw, 64px);
    margin: 0;
    max-width: 900px;
    line-height: 0.98;
}
.how-title-accent {
    color: var(--lime);
    font-style: italic;
}
.how-time {
    text-align: right;
    font-size: 13px;
    color: var(--muted);
    font-family: var(--mono);
}
.how-time-value {
    font-size: 36px;
    color: var(--ink);
    margin: 4px 0 0;
}
.how-time-note { font-size: 11px; }

.how-timeline {
    position: relative;
}
.how-line {
    position: absolute;
    top: 44px;
    left: 6%;
    right: 6%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--ink) 0 8px, transparent 8px 14px);
    opacity: 0.25;
}
.how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
.how-step {
    padding: 0 20px;
    position: relative;
}
.how-step + .how-step {
    border-left: 1px dashed rgba(20,20,20,0.12);
}
.how-step-circle {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 20px rgba(20,20,20,.12);
}
.how-step-circle.dark { background: var(--ink); color: var(--cream); }
.how-step-circle.lime { background: var(--lime); color: var(--ink); }
.how-step-num {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--ink);
}
.how-step-time {
    font-size: 11px;
    color: var(--lime);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.how-step-title {
    font-size: 26px;
    margin: 0 0 10px;
    line-height: 1.1;
}
.how-step-desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 900px) {
    .how-process { padding: 0 24px; margin-top: 60px; }
    .how-process-head { grid-template-columns: 1fr; gap: 16px; }
    .how-steps { grid-template-columns: 1fr 1fr; gap: 32px 0; }
    .how-line { display: none; }
    .how-step + .how-step { border-left: none; }
    .how-step:nth-child(n+3) { padding-top: 16px; border-top: 1px dashed rgba(20,20,20,0.12); }
}
@media (max-width: 560px) {
    .how-steps { grid-template-columns: 1fr; }
    .how-step { padding: 0; }
    .how-step:nth-child(n+2) { padding-top: 24px; border-top: 1px dashed rgba(20,20,20,0.12); margin-top: 24px; }
}

/* ==========================================================================
   BLOG SECTION (Atölyeden notlar)
   ========================================================================== */
.blog-section {
    max-width: var(--container);
    margin: 60px auto 40px;
    padding: 0 48px;
}
.blog-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}
.blog-section-head h2 {
    font-size: clamp(32px, 4vw, 48px);
    margin: 12px 0 0;
}
.blog-section-desc {
    color: var(--muted);
    font-size: 15px;
    margin: 10px 0 0;
    max-width: 520px;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 20px;
}
.blog-card-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-card {
    padding: 20px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: transform .15s, box-shadow .15s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }

.blog-card-featured {
    gap: 18px;
    padding: 20px;
}

.blog-card-compact {
    flex-direction: row;
    gap: 16px;
    padding: 16px;
    align-items: stretch;
    flex: 1;
}
.blog-card-cover-sm {
    flex: 0 0 40%;
    min-width: 120px;
}
.blog-card-compact .blog-card-body { flex: 1; padding: 0; justify-content: flex-start; gap: 8px; }

.blog-cover {
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.blog-card-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--muted);
    flex-wrap: wrap;
}
.chip-lime { background: var(--lime); color: #fff; }
.chip-dark { background: var(--ink); color: var(--lime); }

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.blog-card-title-big {
    font-size: 32px;
    margin: 0 0 12px;
    line-height: 1.05;
}
.blog-card-title-md {
    font-size: 22px;
    margin: 0 0 8px;
    line-height: 1.15;
}
.blog-card-title-sm {
    font-size: 18px;
    margin: 0 0 8px;
    line-height: 1.2;
}
.blog-card-excerpt {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
}
.blog-card-excerpt-sm {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}
.blog-card-excerpt-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 8px;
}
.blog-card-author-sm {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
    margin-top: auto;
}
.blog-card-author-name {
    font-size: 13px;
    font-weight: 500;
}

.author-avatar {
    border-radius: 50%;
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--mono);
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .blog-card-compact { flex-direction: column; }
    .blog-card-cover-sm { flex: none; }
}
@media (max-width: 700px) {
    .blog-section { padding: 0 24px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-section-head { flex-direction: column; align-items: start; }
}

/* ==========================================================================
   BLOG LIST PAGE (/blog)
   ========================================================================== */
.blog-list-page {
    max-width: 1200px;
    margin: 40px auto 60px;
    padding: 0 48px;
}
.blog-list-head {
    margin-bottom: 40px;
}
.blog-list-head h1 {
    font-size: clamp(40px, 6vw, 64px);
    margin: 16px 0 8px;
}
.blog-list-desc {
    color: var(--muted);
    font-size: 16px;
    max-width: 600px;
    margin: 0;
}
.blog-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* ==========================================================================
   BLOG DETAIL (/blog/slug)
   ========================================================================== */
.blog-detail {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 48px;
}
.blog-back-btn {
    margin-bottom: 24px;
    padding: 8px 14px !important;
    font-size: 13px !important;
}
.blog-detail-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
    font-size: 12px;
    font-family: var(--mono);
    color: var(--muted);
}
.blog-detail-title {
    font-size: clamp(36px, 6vw, 52px);
    line-height: 1.02;
    margin: 0 0 28px;
}
.blog-detail-excerpt {
    font-size: 20px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0 0 32px;
    font-weight: 400;
}
.blog-detail-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 32px;
}
.blog-detail-author-name { font-size: 14px; font-weight: 600; }
.blog-detail-author-sub { font-size: 12px; color: var(--muted); }

.blog-detail-cover { margin-bottom: 40px; }

.blog-detail-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
}
.blog-detail-body p { margin: 0 0 20px; }
.blog-detail-body h2 {
    font-size: 28px;
    margin: 40px 0 14px;
    line-height: 1.15;
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
}
.blog-detail-body h3 {
    font-size: 22px;
    margin: 32px 0 12px;
    color: var(--ink);
}
.blog-detail-body ul, .blog-detail-body ol {
    padding-left: 22px;
    margin: 16px 0;
    list-style: disc;
}
.blog-detail-body ul li, .blog-detail-body ol li {
    margin: 6px 0;
}
.blog-detail-body a {
    color: var(--lime);
    text-decoration: underline;
}
.blog-detail-body code {
    background: var(--cream-deep);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: .9em;
}
.blog-detail-body pre {
    background: var(--ink);
    color: var(--cream);
    padding: 16px;
    border-radius: 12px;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 13px;
}
.blog-detail-body pre code { background: none; padding: 0; color: inherit; }

.blog-detail-body aside,
.blog-detail-body .callout {
    background: var(--lime);
    color: #fff;
    padding: 20px 24px;
    border-radius: 18px;
    margin: 28px 0;
    border-left: 4px solid #fff;
}
.blog-detail-body aside p:last-child,
.blog-detail-body .callout p:last-child { margin-bottom: 0; }

.blog-detail-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0;
}
.blog-detail-body table thead { background: var(--cream-deep); }
.blog-detail-body table th,
.blog-detail-body table td {
    padding: 12px;
    text-align: left;
}
.blog-detail-body table tr { border-top: 1px solid var(--rule); }
.blog-detail-body table th { font-weight: 600; }

.blog-detail-body blockquote {
    border-left: 4px solid var(--ink);
    padding: 4px 0 4px 20px;
    margin: 24px 0;
    color: var(--ink-soft);
    font-style: italic;
}

.blog-detail-body img {
    border-radius: 14px;
    max-width: 100%;
    margin: 24px 0;
}

.blog-cta {
    background: var(--ink);
    color: var(--cream);
    padding: 32px;
    border-radius: 22px;
    margin: 48px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.blog-cta-title { font-size: 24px; margin-bottom: 6px; }
.blog-cta-desc { font-size: 14px; color: rgba(245,241,234,0.65); }

.blog-related { margin-bottom: 64px; }
.blog-related-title {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 16px;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 760px) {
    .blog-detail, .blog-list-page { padding: 0 24px; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .blog-cta { flex-direction: column; align-items: start; text-align: left; }
}

/* ==========================================================================
   INFO DETAIL (/gizlilik-politikasi vb)
   ========================================================================== */
.info-detail {
    max-width: 860px;
    margin: 40px auto;
    padding: 0 48px;
}
.info-detail-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.info-detail-title {
    font-size: clamp(36px, 5vw, 52px);
    margin: 16px 0 12px;
    line-height: 1.05;
}
.info-detail-subtitle {
    font-size: 18px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0 0 12px;
}
.info-detail-meta {
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 760px) {
    .info-detail { padding: 0 24px; }
}

/* ==========================================================================
   FAQ PAGE (/sss)
   ========================================================================== */
.faq-page {
    max-width: 860px;
    margin: 40px auto 64px;
    padding: 0 48px;
}

.faq-content { min-width: 0; }
.faq-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}
.faq-head-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
}
.faq-title {
    font-size: clamp(40px, 6vw, 56px);
    line-height: 1;
    margin: 12px 0 24px;
}

/* FAQ Accordion */
.faq-list {
    display: grid;
    gap: 8px;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s;
}
.faq-item.open { border-color: var(--ink); }

.faq-q {
    width: 100%;
    text-align: left;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1.3;
    gap: 16px;
}

.faq-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cream-deep);
    color: var(--ink);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform .2s, background .2s, color .2s;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}
.faq-item.open .faq-plus {
    background: var(--lime);
    color: #fff;
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0 20px;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.65;
}
.faq-item.open .faq-a {
    max-height: 1000px;
    padding: 0 20px 20px;
}
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul, .faq-a ol { padding-left: 20px; margin: 8px 0; }
.faq-a li { margin: 4px 0; }
.faq-a a { color: var(--lime); text-decoration: underline; }

.faq-disclaimer {
    margin-top: 48px;
    padding: 24px;
    background: var(--cream-deep);
    border-radius: 18px;
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
}
.faq-disclaimer a { color: var(--ink); text-decoration: underline; font-style: normal; }

@media (max-width: 560px) {
    .faq-page { padding: 0 24px; }
    .faq-q { font-size: 15px; padding: 16px 18px; }
    .faq-item.open .faq-a { padding: 0 18px 18px; }
}