/* ==========================================================================
   MERİDYEN HUKUK BÜROSU
   Antrasit-lacivert zemin · sıcak kağıt metin · ince editoryal serif · bordo vurgu
   Sabit kenar şeritleri (dikey büro adı + saat), numaralı bölüm/madde listeleri
   Referans ruhu: khanhnguyen.design (editoryal, "bölüm" mantığı, kenar etiketleri)
   ========================================================================== */
:root {
    /* Zemin — açık, sıcak kağıt tonu */
    --zemin:   #f7f5ef;
    --zemin-2: #efeade;
    --zemin-3: #e5dfcd;
    /* --paper artık İÇERİK/BAŞLIK rengini tutuyor (isim tarihsel, anlamı
       değişti): koyu lacivert-antrasit metin rengi */
    --paper:   #1c2430;

    /* Metin */
    --ink:      var(--paper);
    --ink-dim:  rgba(28, 36, 48, 0.68);
    --ink-mute: rgba(28, 36, 48, 0.42);

    /* Çizgiler */
    --line:        rgba(28, 36, 48, 0.13);
    --line-strong: rgba(28, 36, 48, 0.26);

    /* Vurgu — tek renk, az ve öz */
    --bordo: #8a3d3d;
    /* Bordo dolgulu butonlarda her zaman açık metin gerekir (tema koyu/açık
       fark etmeksizin) */
    --on-bordo: #f7f5ef;

    /* Tipografi */
    --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --sans:  'Manrope', 'Helvetica Neue', Arial, sans-serif;

    --ease:   cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 0.2s var(--ease);
    --t-norm: 0.45s var(--ease);

    --rail: 44px;
    --edge: clamp(20px, 4vw, 56px);
    --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    /* Akışkan taban punto: geniş ekranlarda tüm metinler (rem tabanlı) orantılı büyür */
    font-size: clamp(16px, 0.5vw + 14px, 20px);
}

body {
    font-family: var(--sans);
    background: var(--zemin);
    color: var(--ink);
    line-height: 1.65;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { text-decoration: none; color: inherit; transition: color var(--t-fast); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--edge);
    position: relative;
    /* .container bazı yerlerde bir flex öğesi (.story-panel'in tek çocuğu) —
       flex öğelerinin varsayılan min-width:auto değeri, içindeki grid
       sütunlarının (ör. team-grid, blog-grid) küçülmeyen içeriği yüzünden
       container'ı max-width'in ötesine ittirip taşmaya sebep oluyordu. */
    min-width: 0;
}

/* ==========================================================================
   Kenar şeritleri — sabit, dikey büro adı (sol) ve saat/konum (sağ)
   ========================================================================== */
.side-rail {
    position: fixed;
    top: 0; bottom: 0;
    width: var(--rail);
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 28px 0;
}
.side-rail.left { left: 0; border-right: 1px solid var(--line); }
.side-rail.right { right: 0; border-left: 1px solid var(--line); align-items: flex-start; }
.side-rail span {
    writing-mode: vertical-rl;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}
.side-rail.left span { transform: rotate(180deg); }
body { padding: 0 var(--rail); }
@media (max-width: 900px) {
    .side-rail { display: none; }
    body { padding: 0; }
}

/* ==========================================================================
   Tipografi
   ========================================================================== */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 350; line-height: 1.14; letter-spacing: -0.012em; color: var(--paper); }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 300; margin-bottom: 24px; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 18px; }
h3 { font-size: 1.22rem; font-weight: 500; margin-bottom: 10px; }
h4 { font-size: 1rem; font-weight: 500; }
p { color: var(--ink-dim); text-wrap: pretty; }
em, .italic { font-style: italic; color: var(--bordo); }

.eyebrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 18px;
}
.eyebrow b { color: var(--bordo); font-weight: 700; }
.section-desc { color: var(--ink-dim); font-size: 1.02rem; max-width: 46ch; }

/* ==========================================================================
   Butonlar
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 2px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.btn:hover { border-color: var(--paper); }

.btn-primary { background: var(--bordo); color: var(--on-bordo); border-color: var(--bordo); }
.btn-primary:hover { background: transparent; color: var(--paper); border-color: var(--paper); }

.btn-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 3px;
    transition: border-color var(--t-fast), gap var(--t-fast), color var(--t-fast);
}
.btn-line:hover { border-color: var(--bordo); gap: 12px; color: var(--bordo); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar { padding: 26px 0; position: fixed; top: 0; left: var(--rail); right: var(--rail); z-index: 80; background: rgba(247, 245, 239, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t-norm); }
.navbar.scrolled { border-bottom-color: var(--line); }
@media (max-width: 900px) {
    .navbar { left: 0; right: 0; }
}
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--paper); letter-spacing: -0.01em; }
.logo em { font-style: italic; color: var(--bordo); }

.nav-links { display: flex; gap: 32px; margin: 0 auto; }
.nav-links a { font-family: var(--sans); font-size: 0.86rem; font-weight: 500; color: var(--ink-mute); }
.nav-links a:hover { color: var(--paper); }
.nav-links a.active { color: var(--paper); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.mobile-menu-btn { display: none; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); width: 40px; height: 40px; border-radius: 2px; align-items: center; justify-content: center; cursor: pointer; }

/* ==========================================================================
   Bölüm iskeleti
   ========================================================================== */
main { position: relative; }
section { padding: clamp(64px, 10vh, 132px) 0; border-top: 1px solid var(--line); }
.hero { border-top: none; }
.section-header { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr); gap: 28px 56px; align-items: end; margin-bottom: 60px; }
.section-header h2 { margin-bottom: 0; max-width: 16ch; }
.section-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 52px; }

.hero-inner { max-width: 800px; min-width: 0; }
.hero-inner p { font-size: 1.12rem; margin: 0 0 36px; max-width: 54ch; }
.hero-buttons { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }

.hero-stats { display: flex; gap: 52px; margin-top: 72px; flex-wrap: wrap; position: relative; z-index: 1; }
.stat-number { font-family: var(--serif); font-size: 2.3rem; font-weight: 300; line-height: 1; margin-bottom: 8px; color: var(--paper); }
.stat-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* Hero — iki kolonlu düzen: metin + bilgi kartı (sayı/şehir gibi farklı türde
   değerleri aynı ölçekte "istatistik" gibi göstermek yerine etiket-değer satırları) */
.hero-grid { display: grid; grid-template-columns: 1.3fr 0.85fr; gap: 64px; align-items: start; width: 100%; position: relative; z-index: 1; }
.hero-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero-facts { margin-top: 0; min-width: 0; }
.hero-facts { border: 1px solid var(--line-strong); border-radius: 2px; padding: 8px 32px; }
.hero-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.hero-fact:first-child { border-top: none; }
.hero-fact-label { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-dim); }
.hero-fact-value { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--paper); white-space: nowrap; }
.story-horizontal .story-panel .hero-fact-value { font-size: 1.3rem; }
.story-horizontal .story-panel .hero-fact-label { font-size: 0.8rem; }
.story-horizontal .story-panel .hero-fact { padding: 18px 0; }
.story-horizontal .story-panel .hero-facts { padding: 6px 28px; }

/* Hero görsel — fotoğraf yerine, site paletiyle çizilmiş sade bir "adalet
   terazisi" çizgi illüstrasyonu (kod tabanlı, ücretsiz, metinsiz). */
.hero-visual {
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: var(--zemin-2);
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
}
.hero-visual img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.story-horizontal .story-panel .hero-visual { padding: 16px 22px 12px; }
@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 640px) {
    .hero-visual { display: none; }
}

/* ==========================================================================
   Yatay kayan bölüm şeridi (anasayfa) — khanhnguyen.design'dan ilhamla:
   masaüstünde pin-scroll ile yatayda ilerleyen "bölümler". Varsayılan (JS
   çalışmadan / mobilde) düz dikey akış; story-scroll.js .story-horizontal
   sınıfını ekleyince yatay moda geçer.
   ========================================================================== */
.story { position: relative; }
.story-track { display: block; }
.story-panel {
    width: 100%;
    padding: clamp(64px, 10vh, 132px) 0;
    border-top: 1px solid var(--line);
    position: relative;
}
/* Dikey (mobil/no-JS) akışta navbar artık fixed olduğu için normal
   akıştan yer kaplamıyor — ilk panel bu payı kendi üst dolgusuna
   eklemezse navbar'ın altına gizleniyordu. Sadece ilk panel etkilenir;
   diğerleri zaten fixed navbar'ın ALTINDA kayarak geçiyor. */
.story-panel:first-child { border-top: none; padding-top: clamp(120px, 16vh, 160px); }

.story.story-horizontal {
    height: 100vh;
    overflow: hidden;
    /* GSAP, pin sırasında .story'ye inline position:fixed + left:0px atıyor
       (body'nin kenar şeridi payını hesaba katmadan) — böylece panel içeriği
       viewport'un gerçek sol kenarına yapışıp header/diğer section'larla
       hizasız görünüyordu. Rail payını burada zorla geri veriyoruz. */
    left: var(--rail) !important;
    width: calc(100vw - 2 * var(--rail)) !important;
}
.story.story-horizontal .story-track { display: flex; height: 100vh; will-change: transform; }
.story.story-horizontal .story-panel {
    /* Ham 100vw yerine kenar şeritlerinin genişliği düşülüyor — aksi halde
       panel gerçek viewport'tan taşıp sağa kayıyor (body'nin kenar şeridi
       payı yüzünden), bu da içeriğin container'a göre hizasız görünmesine
       yol açıyordu. Bu değer story-scroll.js'teki hesapla birebir eşleşmeli. */
    min-width: calc(100vw - 2 * var(--rail));
    width: calc(100vw - 2 * var(--rail));
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    /* İçerik dikeyde ORTALANIYOR. Üst/alt dolgu matematiksel olarak eşit
       OLMAMALI: header (~111px) ilerleme çubuğundan (~48px) daha kalın bir
       şerit kaplıyor. Eşit dolgu kullanılsaydı içerik KUTUYA göre ortalanır
       ama header'a olan boşluk, çubuğa olan boşluktan GÖRSEL olarak daha az
       kalırdı (iki şeridin farklı kalınlığı yüzünden). Bu yüzden üst dolguyu,
       alt dolgudan tam olarak bu fark kadar (header - ilerleme çubuğu ≈ 63px)
       fazla tutuyoruz — böylece GÖRÜNEN boşluklar (header'a ve çubuğa) eşit
       çıkıyor, kutu içindeki matematiksel ortalama değil. */
    align-items: center;
    border-top: none;
    --panel-pad-b: clamp(70px, 9vh, 100px);
    padding-top: calc(var(--panel-pad-b) + 63px);
    padding-bottom: var(--panel-pad-b);
    overflow: hidden;
}

/* Yatay modda punto ölçeği — normal (dikey) sayfalardaki başlıklardan
   kasıtlı olarak daha küçük tutuluyor: panel yüksekliği sabit olduğu için
   büyük başlıklar hem orantısız duruyor hem üst boşluğu yiyor */
.story-horizontal .story-panel h1 { font-size: clamp(1.6rem, 2.2vw, min(2.9rem, 6vh)); margin-bottom: 16px; }
.story-horizontal .story-panel h2 { font-size: clamp(1.35rem, 1.7vw, min(2.1rem, 4.6vh)); margin-bottom: 12px; }
.story-horizontal .story-panel .eyebrow { margin-bottom: 12px; font-size: 0.76rem; }
.story-horizontal .story-panel .hero-inner p { font-size: 1rem; margin-bottom: 22px; }
.story-horizontal .story-panel .section-desc { font-size: 0.88rem; max-width: 38ch; }
.story-horizontal .story-panel .section-header { margin-bottom: 14px; gap: 10px 40px; }
.story-horizontal .story-panel .section-header-row { margin-bottom: 20px; }
.story-horizontal .story-panel .principles-grid,
.story-horizontal .story-panel .team-grid,
.story-horizontal .story-panel .blog-grid { gap: 1px; }
.story-horizontal .story-panel .principle-card { padding-top: 16px; }
.story-horizontal .story-panel .principle-card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.story-horizontal .story-panel .principle-card p { font-size: 0.92rem; }
.story-horizontal .story-panel .principle-index { margin-bottom: 8px; font-size: 0.95rem; }
.story-horizontal .story-panel .blog-card,
.story-horizontal .story-panel .team-card { padding: 18px 18px; }
.story-horizontal .story-panel .blog-card h3,
.story-horizontal .story-panel .team-card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.story-horizontal .story-panel .blog-card p,
.story-horizontal .story-panel .team-card p { font-size: 0.88rem; margin-bottom: 14px; }
.story-horizontal .story-panel .blog-meta { margin-bottom: 10px; }
.story-horizontal .story-panel .about-grid { gap: 36px; }
.story-horizontal .story-panel .about-lede { font-size: 1.08rem; margin-bottom: 12px; }
.story-horizontal .story-panel .article-list .article-row { padding: 7px 4px; }
.story-horizontal .story-panel .article-index { font-size: 1.3rem; }
.story-horizontal .story-panel .article-body h3 { font-size: 1.15rem; margin-bottom: 4px; }
.story-horizontal .story-panel .article-body p { font-size: 0.88rem; }
.story-horizontal .story-panel .cta-inner h2 { font-size: clamp(1.4rem, 2vw, min(2.1rem, 5vh)); margin-bottom: 0; }
.story-horizontal .story-panel .cta-copy p { margin-top: 10px; }
.story-horizontal .story-panel .btn,
.story-horizontal .story-panel .btn-line { font-size: 0.88rem; padding: 12px 20px; }
.story-horizontal .story-panel .hero-buttons { margin-top: 4px; }

/* .story'nin DIŞINda, sabit — JS ile .is-active eklenince görünür olur
   (story.story-horizontal soyundan gelme şartı artık yok, çünkü .story'ye
   GSAP'in uyguladığı transform bu öğeyi .story'nin kutusuna göre konumlardı) */
.story-progress { display: none; }
.story-progress.is-active {
    display: flex;
    align-items: center;
    gap: 18px;
    position: fixed;
    left: var(--rail);
    right: var(--rail);
    bottom: 0;
    z-index: 60;
    /* .container ile aynı şekilde ortalanıp genişlik sınırlanıyor, böylece
       sol kenarı her zaman içerik sütununun sol kenarıyla hizalı kalır */
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--edge) 24px;
}
.story-progress-count { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-mute); white-space: nowrap; }
.story-progress-track { flex-grow: 1; height: 2px; background: var(--line); position: relative; border-radius: 2px; overflow: hidden; }
.story-progress-fill { position: absolute; inset: 0; width: 0%; background: var(--bordo); }

.article-list-compact .article-row { padding: 24px 4px; }
.article-list-compact .article-index { font-size: 2rem; }

/* ==========================================================================
   İlkeler
   ========================================================================== */
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.principle-card { padding: 30px 24px 0 0; border-top: 1px solid var(--line-strong); }
.principle-card + .principle-card { padding-left: 24px; border-left: 1px solid var(--line); }
.principle-index { font-family: var(--serif); font-size: 0.95rem; color: var(--bordo); margin-bottom: 22px; display: block; }
.principle-card h3 { font-size: 1.08rem; }
.principle-card p { font-size: 0.92rem; }

/* ==========================================================================
   Faaliyet Alanları — büyük numaralı madde listesi
   ========================================================================== */
.article-list { border-top: 1px solid var(--line); }
.article-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 34px 4px;
    border-bottom: 1px solid var(--line);
    transition: background var(--t-fast), padding-left var(--t-fast);
    scroll-margin-top: 110px;
}
.article-row:hover { background: var(--zemin-2); padding-left: 16px; }
.article-index { font-family: var(--serif); font-weight: 200; font-size: 2.6rem; color: var(--ink-mute); line-height: 1; }
.article-row:hover .article-index { color: var(--bordo); }
.article-body h3 { margin-bottom: 8px; font-size: 1.28rem; font-weight: 400; }
.article-body p { font-size: 0.94rem; max-width: 62ch; margin-bottom: 0; }
.article-arrow { font-size: 1.2rem; color: var(--ink-mute); transition: transform var(--t-fast), color var(--t-fast); }
.article-row:hover .article-arrow { transform: translateX(6px); color: var(--bordo); }
@media (max-width: 700px) {
    .article-row { grid-template-columns: 56px 1fr; }
    .article-index { font-size: 1.8rem; }
    .article-arrow { display: none; }
}

/* ==========================================================================
   Hakkımızda / Ekip
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-lede { font-size: 1.1rem; color: var(--paper); margin-bottom: 20px; font-family: var(--serif); font-weight: 300; }
.method-list { display: flex; flex-direction: column; }
.method-item { padding: 24px 0; border-top: 1px solid var(--line); display: flex; gap: 22px; }
.method-item:last-child { border-bottom: 1px solid var(--line); }
.method-num { font-family: var(--serif); font-size: 1.3rem; font-weight: 300; color: var(--bordo); flex-shrink: 0; width: 2.2ch; }
.method-item h3 { margin-bottom: 6px; font-size: 1.05rem; }
.method-item p { font-size: 0.92rem; }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 60px; }
.team-card { background: var(--zemin); padding: 38px; min-width: 0; }
.team-card h3 { font-size: 1.4rem; margin-bottom: 6px; }
.team-role { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bordo); margin-bottom: 18px; display: block; }
.team-card p { font-size: 0.92rem; }

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.blog-card { background: var(--zemin); padding: 38px 26px; display: flex; flex-direction: column; min-width: 0; transition: background var(--t-norm); }
.blog-card:hover { background: var(--zemin-2); }
.blog-meta { display: flex; gap: 16px; margin-bottom: 18px; }
.blog-meta span { font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ink-mute); }
.blog-card h3 { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; margin-bottom: 14px; }
.blog-card p { font-size: 0.92rem; margin-bottom: 24px; flex-grow: 1; }

.blog-detail-hero { padding: clamp(136px, 15vh, 168px) 0 56px; border-top: none; }
.blog-detail-header { max-width: 820px; }
.blog-detail-header h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin-top: 22px; }
.blog-detail-content { padding: 60px 0 clamp(88px, 12vh, 150px); }
.blog-detail-content .prose { max-width: 720px; margin: 0 auto; }
.blog-detail-content p { margin-bottom: 20px; }
.blog-detail-content h3 { color: var(--paper); margin: 36px 0 14px; font-weight: 500; }

/* ==========================================================================
   SSS
   ========================================================================== */
.faq-container { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; }
.faq-info p { margin-bottom: 30px; max-width: 38ch; }
.faq-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-header { padding: 22px 4px; display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; }
.accordion-header h3 { font-family: var(--sans); font-size: 0.98rem; font-weight: 600; margin-bottom: 0; color: var(--ink-dim); transition: color var(--t-fast); }
.accordion-item:hover .accordion-header h3 { color: var(--paper); }
.accordion-toggle { background: transparent; border: 1px solid var(--line-strong); width: 28px; height: 28px; border-radius: 50%; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: pointer; flex-shrink: 0; transition: transform var(--t-norm); }
.accordion-item.active .accordion-toggle { transform: rotate(135deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--t-norm); }
.accordion-body p { font-size: 0.92rem; max-width: 60ch; padding-bottom: 4px; }
.accordion-item.active .accordion-body { max-height: 320px; padding-bottom: 24px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.cta-inner h2 { max-width: 18ch; margin-bottom: 0; }
.cta-copy p { margin-top: 16px; max-width: 44ch; }
.cta-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 80px 0 36px; border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; margin-bottom: 60px; }
.footer-brand .logo { margin-bottom: 18px; display: block; }
.footer-brand p { font-size: 0.9rem; margin-bottom: 18px; max-width: 42ch; }
.footer-links h4, .footer-contact h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 20px; }
.footer-links ul { display: flex; flex-direction: column; gap: 12px; }
.footer-links a, .footer-contact p { color: var(--ink-dim); font-size: 0.9rem; }
.footer-links a:hover { color: var(--paper); }
.footer-contact p { margin-bottom: 10px; }
.footer-contact .phone { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--paper); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; border-top: 1px solid var(--line); flex-wrap: wrap; gap: 14px; }
.footer-bottom p { font-size: 0.76rem; color: var(--ink-mute); }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { font-size: 0.76rem; color: var(--ink-mute); }
.footer-legal a:hover { color: var(--paper); }

/* ==========================================================================
   Sayfa üstü hero (iç sayfalar)
   ========================================================================== */
.page-hero { padding: clamp(136px, 15vh, 168px) 0 56px; border-top: none; position: relative; overflow: hidden; }
.page-hero-inner { max-width: 760px; position: relative; z-index: 1; }
.page-hero-inner p { font-size: 1.04rem; margin-top: 4px; }

/* ==========================================================================
   İletişim sayfası
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; }
.contact-form-card { border: 1px solid var(--line); border-radius: 2px; padding: 40px; }
.contact-form-card h2 { margin: 10px 0 12px; }
.contact-form-card > p { margin-bottom: 32px; }
.meridyen-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.form-group label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-dim); }
.meridyen-form input, .meridyen-form textarea, .meridyen-form select {
    background: var(--zemin-2);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    padding: 13px 14px;
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 0.95rem;
    width: 100%;
    transition: border-color var(--t-fast);
}
.meridyen-form input::placeholder, .meridyen-form textarea::placeholder { color: var(--ink-mute); }
.meridyen-form input:focus, .meridyen-form textarea:focus, .meridyen-form select:focus { outline: none; border-color: var(--bordo); }
.select-wrapper { position: relative; }
.select-wrapper select { appearance: none; cursor: pointer; }
.select-wrapper i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-mute); pointer-events: none; }
.form-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 20px; flex-wrap: wrap; }
.privacy-note { font-size: 0.76rem; color: var(--ink-mute); display: flex; align-items: center; gap: 8px; max-width: 32ch; }

.contact-info-column { display: flex; flex-direction: column; gap: 22px; }
.info-card, .map-card, .mini-faq { border: 1px solid var(--line); border-radius: 2px; padding: 30px; }
.info-card h3 { margin-bottom: 22px; }
.info-item { display: flex; gap: 16px; margin-bottom: 22px; }
.info-item:last-child { margin-bottom: 0; }
.info-icon { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--ink-dim); flex-shrink: 0; }
.info-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 4px; }
.info-text { font-size: 0.98rem; font-weight: 500; margin-bottom: 2px; color: var(--paper); }
.info-subtext { font-size: 0.85rem; color: var(--ink-mute); }
.map-card { padding: 20px; }
.map-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 0.8rem; font-weight: 600; color: var(--ink-dim); }
.map-link { color: var(--ink-mute); display: flex; align-items: center; gap: 5px; font-size: 0.8rem; }
.map-link:hover { color: var(--paper); }
.map-embed-wrapper { position: relative; border-radius: 2px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); filter: grayscale(0.2) contrast(0.96); }
.map-embed-wrapper iframe { width: 100%; height: 100%; border: 0; }
.mini-faq-title { font-size: 0.8rem; font-weight: 700; color: var(--ink-dim); margin-bottom: 14px; }
.mini-faq .accordion-header { padding: 15px 0; }
.mini-faq .accordion-header h3 { font-size: 0.9rem; }

/* ==========================================================================
   Scroll'da yumuşak belirme
   ========================================================================== */
.reveal-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-up.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    .reveal-up { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
    .principles-grid { grid-template-columns: repeat(2, 1fr); }
    .principle-card:nth-child(odd) { padding-left: 0; border-left: none; }
    .principle-card:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--line); }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .section-header { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .nav-links { display: none; }
    .nav-actions .btn { display: none; }
    .nav-actions .mobile-menu-btn { display: flex; }
    .faq-container, .contact-grid { grid-template-columns: 1fr; }
    .cta-inner { flex-direction: column; align-items: flex-start; }

    /* Mobil menü açıkken: fixed navbar'ın hemen altına, TAM viewport
       genişliğinde, opak zeminle açılır (script.js .mobile-open'ı toggle'lar).
       left/right İLE width'in ikisinin de belirtilmesi kasıtlı — bazı
       tarayıcılarda position:fixed öğede ikisi birden varken width
       kazanıyor, o yüzden width de doğru (100vw) olmalı. */
    .nav-links.mobile-open {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        width: 100vw;
        flex-direction: column;
        gap: 0;
        margin: 0;
        background: var(--zemin);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 8px 0;
        z-index: 90;
        max-height: calc(100vh - 74px);
        overflow-y: auto;
    }
    .nav-links.mobile-open a {
        padding: 16px 24px;
        border-top: 1px solid var(--line);
    }
    .nav-links.mobile-open a:first-child { border-top: none; }
}

@media (max-width: 620px) {
    .principles-grid, .blog-grid { grid-template-columns: 1fr; }
    .principle-card, .principle-card:nth-child(even) { padding-left: 0; border-left: none; }
    .section-header-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .contact-form-card { padding: 28px 20px; }
    .meridyen-form .form-row { grid-template-columns: 1fr; }
    .form-footer { flex-direction: column; align-items: stretch; }
    .form-footer .btn { justify-content: center; }
    .footer-top { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .hero-stats { gap: 34px; }

    /* Mobil düzen inceltmeleri: kart iç boşlukları, çizgi/metin ilişkisi */
    .principle-card { padding-bottom: 28px; }
    .team-card { padding: 28px 22px; }
    .info-card, .map-card, .mini-faq { padding: 24px 20px; }
    .hero-facts { padding: 4px 22px; }
    .hero-fact { gap: 12px; padding: 18px 0; }
    .hero-fact-label { font-size: 0.8rem; }
    .hero-fact-value { font-size: 1.2rem; }
    .method-item { gap: 16px; }
    .blog-card { padding: 30px 22px; }

    /* Kartlar fade-in olurken grid'in gri "çizgi" zemini blok halinde
       görünmesin: zemini kaldır, ayırıcıyı kartın kendi üst çizgisi yap */
    .blog-grid { background: transparent; gap: 0; }
    .blog-card + .blog-card { border-top: 1px solid var(--line); }
    .team-grid { background: transparent; gap: 0; }
    .team-card + .team-card { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   Sayfa Geçişleri (View Transitions API)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  
  ::view-transition-old(root) {
    animation: 0.4s cubic-bezier(0.65, 0, 0.35, 1) both fade-out;
  }

  ::view-transition-new(root) {
    animation: 0.4s cubic-bezier(0.65, 0, 0.35, 1) both fade-in;
  }

  @keyframes fade-out {
    to { opacity: 0; transform: translateY(-10px); }
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
  }
}