/* ==========================================================================
   main.css — Reset, Base Styles, Layout ve Utility Sınıfları
   Kaya & Yılmaz Hukuk Bürosu — Archival Codex

   İçerik:
     1. Modern Reset
     2. Base / Element Stilleri
     3. Tipografi Sınıfları
     4. Layout: Container, Section, Grid
     5. Dekoratif Unsurlar (hairline, referans, filigran)
     6. Bağlantı ve Buton Temelleri
     7. Utility Sınıfları
     8. Erişilebilirlik
     9. Reveal / Animasyon Temelleri
    10. Responsive Ayarlamalar
    11. Print
   ========================================================================== */


/* ==========================================================================
   1. MODERN RESET
   ========================================================================== */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Yapışkan header'ın anchor hedeflerini kesmemesi için */
    scroll-padding-top: calc(var(--header-height) + var(--space-lg));
}

body {
    min-height: 100vh;
    /* Plan §14: yatay taşma kesinlikle yok */
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-leading);
    color: var(--color-text-primary);
    background-color: var(--color-bg-light-alt);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
}

/* Mobil menü açıkken arka plan kaydırmasını kilitle (JS ekler) */
body.is-nav-open {
    overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

svg {
    fill: currentColor;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

address {
    font-style: normal;
}

hr {
    border: none;
    border-top: var(--border-hairline) solid var(--color-border-light);
}

::selection {
    background-color: var(--color-burgundy);
    color: var(--color-cream);
}


/* ==========================================================================
   2. BASE / ELEMENT STİLLERİ
   ========================================================================== */

h1,
h2 {
    font-family: var(--font-display);
}

h1 {
    font-size: var(--text-h1);
    font-weight: var(--text-h1-weight);
    line-height: var(--text-h1-leading);
    letter-spacing: var(--text-h1-tracking);
}

h2 {
    font-size: var(--text-h2);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-leading);
    letter-spacing: var(--text-h2-tracking);
}

h3 {
    font-family: var(--font-body);
    font-size: var(--text-h3);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-leading);
}

h4 {
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: var(--text-h4-weight);
    line-height: var(--text-h4-leading);
    letter-spacing: var(--text-h4-tracking);
}

p {
    max-width: var(--max-line-length);
}

p + p {
    margin-top: var(--space-paragraph);
}

strong,
b {
    font-weight: var(--weight-semibold);
}

small {
    font-size: var(--text-small);
}

blockquote {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
}


/* ==========================================================================
   3. TİPOGRAFİ SINIFLARI
   ========================================================================== */

.text-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: var(--text-display-weight);
    line-height: var(--text-display-leading);
    letter-spacing: var(--text-display-tracking);
}

.text-h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--text-h1-weight);
    line-height: var(--text-h1-leading);
    letter-spacing: var(--text-h1-tracking);
}

.text-h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-leading);
    letter-spacing: var(--text-h2-tracking);
}

.text-h3 {
    font-size: var(--text-h3);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-leading);
}

.text-h4 {
    font-size: var(--text-h4);
    font-weight: var(--text-h4-weight);
    line-height: var(--text-h4-leading);
    letter-spacing: var(--text-h4-tracking);
}

.text-body {
    font-size: var(--text-body);
    line-height: var(--text-body-leading);
}

.text-small {
    font-size: var(--text-small);
}

.text-caption {
    font-size: var(--text-caption);
    line-height: 1.5;
}

/* Serif gövde — pull quote ve editoryal alıntılar için */
.text-serif {
    font-family: var(--font-display);
    font-weight: var(--weight-light);
}

/* Eyebrow / etiket — FELSEFEMİZ, İLKELERİMİZ gibi küçük tracked başlıklar */
.text-label {
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-tracking);
    text-transform: uppercase;
    color: var(--surface-text-muted, var(--color-text-muted));
}

/* Referans numarası (§01) */
.text-reference {
    font-family: var(--font-display);
    font-size: var(--text-reference);
    font-weight: var(--text-reference-weight);
    letter-spacing: var(--text-reference-tracking);
    color: var(--surface-accent, var(--color-burgundy));
}

/* Navigasyon tipografisi — plan §7 */
.text-nav {
    font-family: var(--font-body);
    font-size: var(--text-nav);
    font-weight: var(--text-nav-weight);
    letter-spacing: var(--text-nav-tracking);
    text-transform: uppercase;
}

.text-muted {
    color: var(--surface-text-muted, var(--color-text-muted));
}

.text-accent {
    color: var(--surface-accent, var(--color-burgundy));
}

.text-balance {
    text-wrap: balance;
}

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

.measure {
    max-width: var(--max-line-length);
}

.measure-narrow {
    max-width: var(--max-line-length-narrow);
}

.measure-wide {
    max-width: var(--max-line-length-wide);
}


/* ==========================================================================
   4. LAYOUT: CONTAINER, SECTION, GRID
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-gutter);
}

.container--content {
    max-width: calc(var(--container-content) + var(--space-gutter) * 2);
}

.container--narrow {
    max-width: calc(var(--container-narrow) + var(--space-gutter) * 2);
}

.container--text {
    max-width: calc(var(--container-text) + var(--space-gutter) * 2);
}

.container--wide {
    max-width: calc(var(--container-wide) + var(--space-gutter) * 2);
}

.container--flush {
    padding-inline: 0;
}

/* --- Bölüm (Section) — Archival Codex'in nefes alan dikey ritmi --- */
.section {
    position: relative;
    padding-block: var(--space-section-inner);
}

.section--tight {
    padding-block: var(--space-block);
}

.section--loose {
    padding-block: var(--space-section);
}

.section--flush-top {
    padding-block-start: 0;
}

.section--flush-bottom {
    padding-block-end: 0;
}

/* Ana içerik alanı — header yüksekliği kadar üst boşluk gerektiren sayfalarda */
.main-content {
    display: block;
    min-height: 60vh;
}

.main-content--offset {
    padding-block-start: var(--header-height);
}

/* --- Grid --- */
.grid {
    display: grid;
    gap: var(--grid-gap);
}

.grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Asimetrik bölmeler — plan §5 */
.grid--60-40 {
    grid-template-columns: var(--split-60-40);
}

.grid--40-60 {
    grid-template-columns: var(--split-40-60);
}

.grid--70-30 {
    grid-template-columns: var(--split-70-30);
}

.grid--30-70 {
    grid-template-columns: var(--split-30-70);
}

/* --- Flex yardımcıları --- */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

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

.items-start {
    align-items: flex-start;
}

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

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-2xs { gap: var(--space-2xs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }


/* ==========================================================================
   5. DEKORATİF UNSURLAR
   ========================================================================== */

/* İnce hairline ayırıcı — bölüm üstlerinde (plan §5) */
.hairline {
    display: block;
    width: 100%;
    height: var(--border-hairline);
    border: none;
    background-color: var(--surface-border, var(--color-border-light));
}

/* Kısa dekoratif çizgi segmenti — etiketlerin solunda */
.hairline--short {
    width: clamp(48px, 8vw, 96px);
}

/* Bordo vurgu çizgisi — hero altında (draw-in animasyonlu) */
.rule-accent {
    display: block;
    width: clamp(80px, 12vw, 160px);
    height: var(--border-hairline);
    background-color: var(--color-burgundy);
    transform-origin: left center;
}

/* Devasa soluk filigran numara (§01) — arka plan katmanı */
.watermark {
    position: absolute;
    z-index: var(--z-decor);
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    line-height: 0.8;
    color: var(--surface-text, currentColor);
    opacity: var(--watermark-opacity);
    pointer-events: none;
    user-select: none;
}

/* Mimari grid dokusu — arka plan katmanı */
.grid-texture {
    position: absolute;
    inset: 0;
    z-index: var(--z-decor);
    pointer-events: none;
    opacity: 0.35;
    background-image:
        repeating-linear-gradient(
            to right,
            var(--surface-border, var(--color-border-light)) 0,
            var(--surface-border, var(--color-border-light)) 1px,
            transparent 1px,
            transparent 120px
        );
}

/* Bölüm başlığı satırı: §02 + başlık */
.section-ref {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--text-reference);
    letter-spacing: var(--text-reference-tracking);
    color: var(--surface-accent, var(--color-burgundy));
}


/* ==========================================================================
   6. BAĞLANTI ve BUTON TEMELLERİ
   ========================================================================== */

.link {
    position: relative;
    display: inline-block;
    color: inherit;
    transition: var(--transition-color);
}

/* Alt çizgi soldan sağa açılır — micro-interaction */
.link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -2px;
    height: var(--border-hairline);
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease-out);
}

.link:hover::after,
.link:focus-visible::after {
    transform: scaleX(1);
}

.link--accent:hover {
    color: var(--surface-accent, var(--color-burgundy));
}

/* --- Buton: minimal, köşeli, ince kenarlıklı (Archival Codex) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--touch-target-min);
    padding: var(--space-xs) var(--space-md);
    border: var(--border-hairline) solid currentColor;
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--text-nav);
    font-weight: var(--text-nav-weight);
    letter-spacing: var(--text-nav-tracking);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--duration-base) var(--ease-subtle),
        color var(--duration-base) var(--ease-subtle),
        border-color var(--duration-base) var(--ease-subtle);
}

.btn__arrow {
    display: inline-block;
    transition: transform var(--duration-base) var(--ease-out);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
    transform: translateX(4px);
}

/* Bordo kenarlıklı, koyu yüzeyde birincil buton */
.btn--outline-accent {
    color: var(--color-stone);
    border-color: var(--color-burgundy);
}

.btn--outline-accent:hover,
.btn--outline-accent:focus-visible {
    background-color: var(--color-burgundy);
    border-color: var(--color-burgundy);
    color: var(--color-cream);
}

/* Dolgulu bordo buton */
.btn--solid {
    background-color: var(--color-burgundy);
    border-color: var(--color-burgundy);
    color: var(--color-cream);
}

.btn--solid:hover,
.btn--solid:focus-visible {
    background-color: var(--color-burgundy-light);
    border-color: var(--color-burgundy-light);
}

.btn--solid:active {
    background-color: var(--color-burgundy-dark);
    border-color: var(--color-burgundy-dark);
}

/* Bağlama duyarlı hayalet buton */
.btn--ghost {
    border-color: var(--surface-border, var(--color-border-light));
    color: var(--surface-text, inherit);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    border-color: var(--surface-accent, var(--color-burgundy));
    color: var(--surface-accent, var(--color-burgundy));
}


/* ==========================================================================
   7. UTILITY SINIFLARI
   ========================================================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none !important; }

.w-full  { width: 100%; }
.h-full  { height: 100%; }

.overflow-hidden { overflow: hidden; }

.uppercase { text-transform: uppercase; }
.tracked   { letter-spacing: var(--text-nav-tracking); }
.tracked-wide { letter-spacing: var(--text-label-tracking); }

.mt-0   { margin-top: 0; }
.mt-2xs { margin-top: var(--space-2xs); }
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-0   { margin-bottom: 0; }
.mb-2xs { margin-bottom: var(--space-2xs); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

.mx-auto { margin-inline: auto; }

/* Bölüm arka planları — .surface-* sınıfları variables.css içinde */
.bg-dark      { background-color: var(--color-bg-dark); }
.bg-dark-alt  { background-color: var(--color-bg-dark-alt); }
.bg-stone     { background-color: var(--color-bg-light); }
.bg-cream     { background-color: var(--color-bg-light-alt); }


/* ==========================================================================
   8. ERİŞİLEBİLİRLİK
   ========================================================================== */

/* Ekran okuyucuya özel — görsel olarak gizli */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* İçeriğe atla bağlantısı */
.skip-link {
    position: absolute;
    top: 0;
    left: var(--space-sm);
    z-index: var(--z-skip-link);
    padding: var(--space-2xs) var(--space-sm);
    background-color: var(--color-burgundy);
    color: var(--color-cream);
    font-size: var(--text-small);
    letter-spacing: var(--text-nav-tracking);
    text-transform: uppercase;
    transform: translateY(-150%);
    transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* Görünür odak halkası — klavye kullanıcıları için */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: var(--border-medium) solid var(--color-focus-ring);
    outline-offset: 3px;
}

.surface-dark :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline-color: var(--color-focus-ring-dark);
}


/* ==========================================================================
   9. REVEAL / ANİMASYON TEMELLERİ
   Plan §13: JS kapalıyken tüm içerik görünür kalmalıdır. Bu yüzden
   başlangıç gizleme yalnızca <html class="js"> varken uygulanır.
   ========================================================================== */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slow) var(--ease-editorial),
        transform var(--duration-slow) var(--ease-editorial);
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* Sayfa yüklenince yumuşak giriş */
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.page-enter {
    animation: page-fade-in var(--duration-medium) var(--ease-out) both;
}

/* Bordo çizgi draw-in */
@keyframes rule-draw {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.rule-accent--animated {
    animation: rule-draw var(--duration-slower) var(--ease-editorial) 200ms both;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   10. RESPONSIVE AYARLAMALAR
   ========================================================================== */

/* --- 1024px altı: grid sıkıştırma --- */
@media (max-width: 1024px) {
    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-texture {
        display: none;
    }
}

/* --- 768px altı: tek sütun ağırlıklı --- */
@media (max-width: 768px) {
    html {
        scroll-padding-top: calc(var(--header-height-mobile) + var(--space-md));
    }

    .grid--2,
    .grid--3,
    .grid--4,
    .grid--12,
    .grid--60-40,
    .grid--40-60,
    .grid--70-30,
    .grid--30-70 {
        grid-template-columns: minmax(0, 1fr);
    }

    .main-content--offset {
        padding-block-start: var(--header-height-mobile);
    }

    .hide-mobile {
        display: none !important;
    }
}

/* --- 769px ve üzeri: yalnızca mobilde görünenleri gizle --- */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* --- 390px altı: en dar ekran --- */
@media (max-width: 390px) {
    :root {
        --space-gutter: 1.25rem;
    }
}


/* ==========================================================================
   11. PRINT
   ========================================================================== */

@media print {
    .site-header,
    .site-footer,
    .mobile-nav,
    .mobile-nav-toggle,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
    }
}