/* =========================================================
   güneyler — ana sayfa stilleri
   Palet: sıcak fildişi beyaz + zümrüt yeşili + tek koyu ton
   Desen: geometrik sekiz kollu yıldız / sekizgen örgü (küçük vurgu alanları)
   ========================================================= */

:root{
  /* --- renkler --- */
  --paper:        #FBF8F1;   /* zemin — sıcak fildişi beyaz */
  --paper-soft:   #F2EDE0;   /* ikincil zemin — kart bölümleri */
  --white:        #FFFFFF;
  --ink:          #16241D;   /* tek koyu ton — koyu zümrüt-siyah */
  --emerald:      #0E6B4F;   /* birincil yeşil */
  --emerald-deep: #0A4D39;   /* yazı / hover için daha koyu yeşil */
  --emerald-bright:#149169;  /* parlak vurgu (hover) */
  --gold:         #B8923B;   /* üçüncü vurgu — eskimiş pirinç/altın */
  --gold-bright:  #D9B466;   /* parlak altın (hover / küçük detaylar) */
  --sage:         #E3EEDF;   /* açık yeşil zemin / rozet */
  --text-dim:     #4B5950;   /* ikincil metin — yeşilimsi gri */
  --line:         rgba(14,107,79,.18);

  /* --- tipografi --- */
  --f-display: "Fraunces", serif;
  --f-label:   "Cinzel", serif;
  --f-body:    "Schibsted Grotesk", sans-serif;
  --f-mono:    "DM Mono", monospace;

  --container: 1180px;

  --gutter: calc((100% - var(--container)) / 2); 

  /* --- geometrik desen (sekizgen/yıldız karo) --- */
  --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M29 0H71L100 29V71L71 100H29L0 71V29Z' fill='none' stroke='%230A4D39' stroke-opacity='0.07' stroke-width='1.4'/%3E%3C/svg%3E");
  --pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M29 0H71L100 29V71L71 100H29L0 71V29Z' fill='none' stroke='%23FBF8F1' stroke-opacity='0.14' stroke-width='1.6'/%3E%3C/svg%3E");
}

html {
  scrollbar-gutter: stable;
  
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main{
  flex: 1 0 auto; 
}

.site-footer{
  flex-shrink: 0;
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pattern-light);
  background-size: 80px 80px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(var(--gutter) * .4),
    transparent var(--gutter),
    transparent calc(100% - var(--gutter)),
    #000 calc(100% - var(--gutter) * .4),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(var(--gutter) * .4),
    transparent var(--gutter),
    transparent calc(100% - var(--gutter)),
    #000 calc(100% - var(--gutter) * .4),
    #000 100%
  );
}


img,svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font: inherit; background:none; border:none; color:inherit; cursor:pointer; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

/* Odaklanana kadar görünmez, ama ekranın DIŞINA taşırmadan gizlenir.
   Eski "left:-999px" RTL'de sayfayı sola kaydırılabilir yapıyordu; clip
   tabanlı gizleme hem LTR hem RTL'de taşma oluşturmaz. */
.skip-link{
  position:absolute; left:1rem; top:auto;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path: inset(50%); white-space:nowrap;
}
.skip-link:focus{
  width:auto; height:auto; overflow:visible; clip:auto; clip-path:none;
  top:1rem; z-index:200;
  background:var(--emerald); color:var(--white); padding:.6rem 1rem; border-radius:4px;
}

:focus-visible{
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
}

/* gentle atmospheric wash — kept airy, not heavy */
body{
  background-image:
    radial-gradient(ellipse 900px 560px at 88% -8%, rgba(14,107,79,.07), transparent 60%),
    radial-gradient(ellipse 700px 480px at -8% 30%, rgba(14,107,79,.05), transparent 60%);
}

.eyebrow{
  font-family: var(--f-label);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--emerald);
  margin: 0 0 .9rem;
  font-weight: 600;
}

h1,h2,h3{ font-family: var(--f-display); margin:0; color: var(--ink); }

/* =========================================================
   NAVBAR
   ========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(251,248,241,.92);
  border-bottom: 1px solid var(--line);
  /* backdrop-filter intentionally lives on ::after below, NOT here.
     filter/backdrop-filter on an element makes that element the
     containing block for its own position:fixed descendants (spec
     behavior). The mobile .nav-menu drawer below is position:fixed and
     lives inside this header, so with the filter here it sized itself
     against the header's own ~120px box instead of the viewport,
     collapsing the drawer to a sliver that overlapped the ticker
     instead of covering the screen. Moving the filter to a pseudo
     keeps the frosted-glass look without that side effect. */
}

.site-header::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--pattern-light);
  background-size: 80px 80px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(var(--gutter) * .4),
    transparent var(--gutter),
    transparent calc(100% - var(--gutter)),
    #000 calc(100% - var(--gutter) * .4),
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0,
    #000 calc(var(--gutter) * .4),
    transparent var(--gutter),
    transparent calc(100% - var(--gutter)),
    #000 calc(100% - var(--gutter) * .4),
    #000 100%
  );
}

.navbar{
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem;
}

.brand{ display:flex; align-items:baseline; gap:.4rem; }
.brand__mark{
  font-family: var(--f-label);
  font-size: 2.05rem;
  letter-spacing: .12em;
  color: var(--ink);
}
.brand__sub{
  font-family: var(--f-label);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--gold);
}

.nav-menu{
  display:flex; align-items:center; gap: 1.2rem;
  font-size: .92rem;
}
.nav-menu > li > a,
.dropdown-toggle{
  display:flex; align-items:center; gap:.3rem;
  padding: .4rem 0;
  color: var(--text-dim);
  transition: color .2s ease;
  position: relative;
  /* Menü öğeleri tek satırda kalsın — dil değiştirici eklendikten sonra
     bazı öğeler (ör. "Ana Sayfa", "Basın Odası") iki satıra kırılıyordu. */
  white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li > a[aria-current="page"],
.dropdown-toggle:hover,
.dropdown-toggle[aria-expanded="true"]{
  color: var(--emerald-deep);
}
.nav-menu > li > a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background: var(--emerald); transition: width .25s ease;
}
.nav-menu > li > a:hover::after{ width:100%; }

.chev{ font-size:.65rem; transition: transform .2s ease; }
.dropdown-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.has-dropdown{ position: relative; }
.dropdown{
  position:absolute; top: calc(100% + .8rem); left: -1.1rem;
  min-width: 230px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem;
  box-shadow: 0 18px 40px rgba(22,36,29,.12);
  opacity:0; visibility:hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 5;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown{
  opacity:1; visibility:visible; transform: translateY(0);
}
.dropdown a{
  display:block; padding: .55rem .7rem; border-radius:6px;
  font-size: .88rem; color: var(--text-dim);
  transition: background .15s ease, color .15s ease;
}
.dropdown a:hover{ background: var(--sage); color: var(--emerald-deep); }

.nav-cta{
  border: 1px solid var(--emerald);
  border-radius: 999px;
  padding: .5rem 1.1rem !important;
  color: var(--emerald-deep) !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background: var(--emerald); color: var(--white) !important; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; padding:.4rem;
  /* Must out-rank .nav-menu (below) in the stacking order: once the
     drawer opens it's a position:fixed box covering the same corner of
     the screen the toggle sits in, so without a higher z-index here the
     drawer paints over the button and there is no way to close it. */
  position: relative;
  z-index: 210;
}
.nav-toggle span{
  width:24px; height:2px; background: var(--ink); display:block;
  transition: transform .25s ease, opacity .2s ease;
}
/* Hamburger -> X, so the open/close affordance is visible, not just functional */
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ticker — the one dark anchor near the top, with a faint geometric texture */
.ticker {
  overflow: hidden;
  background-color: var(--ink);
  background-image: var(--pattern-dark);
  background-size: 46px 46px;
  width: 100%;
  pointer-events: none;
}

.ticker__track {
  display: flex; 
  width: max-content;
  white-space: nowrap;
  padding: .55rem 0;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--paper);
  opacity: .85;
  
  /* Trigger the infinite loop animation.
     Duration is set inline by script.js (animationDuration), computed from
     the actual measured track width so the scroll SPEED (px/sec) stays
     constant no matter how many clones end up filling the bar. The 30s
     here is only a fallback in case JS hasn't run yet. */
  animation: ticker-move 30s linear infinite;
}

.ticker__items {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* The gap here handles the space between individual words */
  gap: 1.25rem;
  /* This trailing margin IS the space between Block 1 and Block 2.
     Putting it here (instead of as a gap on .ticker__track) makes each
     block — content + its own spacing — an identical-width repeat unit.
     That's what makes -50% below land exactly on the start of Block 2,
     instead of stopping halfway through the gap. */
  margin-right: 1.25rem;
}

.ticker__items span {
  display: inline-block;
}

.ticker__items .dot { 
  color: var(--gold-bright); 
}

/* We animate to -50% of the track.
   Since each .ticker__items block now carries its own trailing gap
   (margin-right) instead of the gap living between the two blocks,
   both blocks are equal-width repeat units. -50% of the total track
   width is therefore EXACTLY one full block, resulting in a flawless,
   gap-free loop.
*/
@keyframes ticker-move {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  max-width: var(--container);
  margin: 0 auto;
  padding: 5.5rem 1.5rem 6rem;
  display:grid;
  grid-template-columns: .85fr 1.15fr;
  align-items:start;
  gap: 3rem;
  position: relative;
}

.hero__text{ padding-top: .4rem; max-width: 460px; }

.hero__title{
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.12;
  font-weight: 600;
  display:block;
}
.hero__title span{ display:block; }
.hero__title em{ font-style: italic; color: var(--emerald); font-weight:500; }

.hero__lead{
  max-width: 480px;
  margin: 1.5rem 0 2.1rem;
  color: var(--text-dim);
  font-size: 1.04rem;
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--emerald);
  color: var(--white);
  font-weight: 600;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-size: .95rem;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{
  background: var(--emerald-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(14,107,79,.22);
}

.hero__branches{ position: relative; }
.hero__branches-label{ margin-bottom: 1rem; }

.hero__branches-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
}

/* reveal-on-load text (fires immediately on page load, e.g. hero copy) —
   deliberately named apart from .reveal-scroll below, which is a
   different animation contract (stays hidden until scrolled into view).
   Both used to share the name ".reveal", which meant the load-in
   keyframe silently won on any page using both, since CSS animations
   run on their own timeline regardless of viewport visibility. */
.reveal-load{
  opacity:0; transform: translateY(16px);
  animation: revealUp .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes revealUp{ to{ opacity:1; transform: translateY(0); } }

/* =========================================================
   FAALİYET ALANLARI KARTLARI (hero içinde, metnin yanında)
   ========================================================= */

.branch-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 210px;
  padding: 1.5rem 1.4rem 1.4rem;
  display:flex; flex-direction:column; gap: .55rem;
  position:relative; overflow:hidden;
  opacity:0; transform: translateY(18px);
  transition: border-color .25s ease, transform .35s ease, box-shadow .35s ease;
}
.branch-card.is-visible{
  animation: cardIn .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.45s + var(--i) * .1s);
}
@keyframes cardIn{ to{ opacity:1; transform: translateY(0); } }

.branch-card::before{
  content:"";
  position:absolute; inset:0;
  background-color: var(--sage);
  opacity:0; transition: opacity .3s ease;
  z-index:0;
}
.branch-card:hover{
  border-color: var(--emerald);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(22,36,29,.10);
}
.branch-card:hover::before{ opacity:.4; }

/* Ghost-letter watermark — turns the negative space a short description
   leaves behind into a deliberate typographic flourish instead of dead
   air, using the same display face as the page's headings so it reads
   as part of the same voice rather than decoration bolted on. */
.branch-card::after{
  content: attr(data-glyph);
  position: absolute;
  right: .15rem;
  bottom: -.5rem;
  font-family: var(--f-display);
  font-size: 6rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(22,36,29,.045);
  z-index: 0;
  pointer-events: none;
  transition: color .35s ease, transform .35s ease;
}
.branch-card:hover::after{
  color: rgba(14,107,79,.09);
  transform: translateY(-6px);
}

.branch-card__icon,
.branch-card h3,
.branch-card p,
.branch-card__link{ position:relative; z-index:1; }

.branch-card__icon{ width:34px; height:34px; transition: transform .3s ease; }
.branch-card:hover .branch-card__icon{ transform: translateY(-2px); }
.branch-card__icon path,
.branch-card__icon circle,
.branch-card__icon ellipse{
  stroke: var(--emerald-deep); stroke-width: 1.6; stroke-linecap:round; stroke-linejoin:round;
}

.branch-card h3{ font-size: 1.05rem; font-weight:600; }
.branch-card p{ color: var(--text-dim); font-size: .85rem; margin: 0; }
.branch-card__link{
  font-family: var(--f-mono);
  font-size: .75rem; letter-spacing:.04em;
  color: var(--emerald);
  display:inline-flex; gap:.4rem; align-items:center;
  margin-top: auto;
  padding-top: 1.1rem;
  transition: gap .2s ease, color .2s ease;
}
.branch-card:hover .branch-card__link{ color: var(--emerald-deep); gap:.65rem; }

/* Altın & Döviz kartı (gruptaki ilk kart) için altın vurgusu */
.hero__branches-grid .branch-card:first-child .branch-card__icon path,
.hero__branches-grid .branch-card:first-child .branch-card__icon circle,
.hero__branches-grid .branch-card:first-child .branch-card__icon ellipse{
  stroke: var(--gold);
}
.hero__branches-grid .branch-card:first-child:hover{ border-color: var(--gold); }
.hero__branches-grid .branch-card:first-child:hover .branch-card__link{ color: var(--gold); }
.hero__branches-grid .branch-card:first-child:hover::after{ color: rgba(184,146,59,.14); }

/* =========================================================
  Timeline
   ========================================================= */

/* Full-width clipping wrapper around .timeline-container. This is where
   the real fix for the timeline jank lives — deliberately NOT on
   .timeline-container itself, and that distinction matters, so read on:

   .timeline-track (inside .timeline-container below) is much wider than
   the viewport and slides via translateX every 4s. Left totally
   un-clipped, the browser has to treat the page's total paintable area
   as changing on every tick (the union of all that off-screen content
   shifts as the track translates), forcing a full repaint of the page's
   shared root rendering layer on every frame of every transition.
   Confirmed with a Chrome trace: ~650-750ms of raster work and a
   ~6200x900px layer fully repainted 12 times, in one single 4-second
   auto-advance cycle — that's the actual dropped-frame jank.

   Two things were tried and rejected before this one:
   1) overflow-x: hidden directly on .timeline-container. This clips at
      that box's own edges — centered and capped at max-width:
      var(--container) (1180px) — which hard-cuts the neighboring
      timeline cards right at that 1180px line, well short of where they
      used to visibly bleed into the outer page margins toward the real
      viewport edge (that bleed never actually added to the page's
      scrollable width in the first place — translateX only affects
      paint, not layout — so it was always harmless, just visible).
      Losing that bleed was a visible regression: the "peek" of
      upcoming/past cards past the content column disappeared.
   2) overflow-x: hidden on <body> instead, left .timeline-container
      alone. This does NOT fix the jank at all (re-measured: raster work
      stayed at ~600ms) — the browser's main scrolling/root layer isn't
      bounded by overflow on the scrolling root element the same way an
      ordinary block descendant bounds its own subtree, empirically.

   This wrapper is the fix that gets both right: it's an ordinary block
   element (so, like option 1, it actually bounds the paint/raster cost),
   but it's full-width and sits OUTSIDE .timeline-container, so it clips
   at the true viewport edges — the same place content already stopped
   being visible before — while .timeline-container inside it keeps its
   original max-width/centering untouched, so the track's static
   starting position (and therefore every card's on-screen position) is
   pixel-identical to before. Measured result: raster work per cycle
   drops from ~650-750ms to ~35ms, with zero layout/position change. */
.timeline-viewport {
  /* Restores the sticky-footer behavior main{flex:1 0 auto;} (further up
     this file) used to provide directly. That rule only takes effect on
     an element that is body's actual direct flex child; wrapping <main>
     in this div for the overflow fix above means <main> no longer is
     one, so without this, main stopped growing to absorb leftover
     vertical space and the footer stopped sitting at the bottom of a
     short page — it rode up right under the timeline instead. This
     wrapper is now the direct flex child in main's place, so it needs
     the same rule. */
  flex: 1 0 auto;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Timeline Frame */
.timeline-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem 0;
  position: relative;
  overflow: visible;
}

/* The horizontal track holding all items */
.timeline-track {
  display: flex;
  align-items: flex-start;
  gap: 8rem; /* Increased spacing for a cleaner look with many years */
  padding-left: 0;
  padding-right: 0;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  position: relative;
  /* Without an explicit width, this block box's own used width just
     fills its parent (.timeline-container, ~1180px) — its flex children
     (flex: 0 0 380px, non-shrinking) then overflow that box rather than
     enlarging it, since overflowing content never counts toward a box's
     own reported width. That's invisible for the items themselves
     (overflow: visible lets them render past track's edges either way),
     but it silently breaks ::before's width: 100% below: percentages on
     an absolutely positioned child resolve against the containing
     block's own box, not its overflowed content, so the axis line was
     only ever as long as that ~1180px, not the full row of years.
     max-content makes track's own box match its actual content width
     (every item + every gap), so 100% below means the real full width. */
  width: max-content;
}

/* Continuous horizontal axis line starting exactly at the first year item */
.timeline-track::before {
  content: '';
  position: absolute;
  top: 60px; /* Aligns vertically with the center of the year blocks */
  left: 0;
  width: 100%; /* matches .timeline-track's own content width exactly,
                   however many years get added — no magic number needed */
  height: 2px;
  background: var(--line);
  z-index: 1;
}

/* Single Year + Card Block */
.timeline-item {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Year wrapper to maintain structural spacing */
.year-wrapper {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}

/* Year node defaults (the 'other' years: small and light colored) */
.year-display {
  font-family: var(--f-display);
  font-size: 1.5rem; /* fixed — scaling is done via transform, not font-size,
                         so resizing never forces a layout recalculation */
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.35;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  background: var(--paper);
  padding: 0.5rem 1.5rem;
  z-index: 3;
  /* Permanent, unconditional — see the longer note on .activity-card
     below for why this must not be tied to .is-active/.is-neighbor. */
  will-change: transform;
}

/* Card details defaults */
.activity-card {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 2rem;
  border-radius: 14px;
  /* Fixed shadow — intensity is conveyed by the card's own opacity fading
     in/out, not by animating box-shadow itself. box-shadow isn't GPU
     compositable, so transitioning its blur/spread forces a full repaint
     on every single frame; baking it in once avoids that cost entirely. */
  box-shadow: 0 10px 30px rgba(14, 107, 79, 0.08);
  opacity: 0.12;
  transform: translateY(15px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              background-color 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  /* Permanent, unconditional — NOT tied to .is-active/.is-neighbor like
     it was before. The timeline JS strips both classes and re-adds the
     right one in the same synchronous pass on every advance; any item
     landing 2+ steps from the new active index gets no class back at
     all. Scoping will-change to the class meant that item's fade-out
     lost its promoted layer at the exact moment the transition started.
     This alone was a real (if secondary) cost; the main jank fix is the
     overflow-x: hidden on .timeline-container above. */
  will-change: opacity, transform;
}

.activity-tag {
  font-family: var(--f-label);
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 0.5rem;
}

.activity-card h3 {
  font-family: var(--f-display);
  color: var(--emerald-deep);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.activity-card p {
  font-size: 1.15rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* --- STATE: Near Neighbors (Year before and after) --- */
.timeline-item.is-neighbor .year-display {
  transform: scale(1.467); /* equivalent visual size to the old 2.2rem */
  font-weight: 500;
  color: var(--emerald);
  opacity: 0.7;
}
.timeline-item.is-neighbor .activity-card {
  opacity: 0.4;
  transform: translateY(5px);
}

/* --- STATE: Active (Current year: bold, big, centered) --- */
.timeline-item.is-active .year-display {
  transform: scale(2.667); /* equivalent visual size to the old 4rem */
  font-weight: 900;
  color: var(--emerald-deep);
  opacity: 1;
  text-shadow: 0 2px 10px rgba(14, 107, 79, 0.08);
}

.timeline-item.is-active .activity-card {
  background: var(--paper-soft);
  border-color: var(--emerald);
  opacity: 1;
  transform: translateY(0);
}

.location-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  opacity: 0.15;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  /* Permanent — this element previously had no will-change hint at all
     despite animating on every advance. Also narrowed `transition: all`
     down to the two properties that actually change; `all` silently
     starts animating any future property added here too. */
  will-change: opacity, transform;
}

.location-icon {
  width: 18px;
  height: 18px;
  color: var(--emerald-deep);
}

.location-text {
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--text-dim);
  letter-spacing: -0.2px;
}

/* --- STATE: Near Neighbors Layout Settings --- */
.timeline-item.is-neighbor .location-badge {
  opacity: 0.4;
  transform: translateY(4px);
}

/* --- STATE: Active Layout Settings --- */
.timeline-item.is-active .location-badge {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: var(--ink); color: var(--paper); }

/* geometric frieze border — the page's other "small place" pattern accent,
   marking the seam between the white content and the dark footer */
.footer__frieze{
  height: 30px;
  background-color: var(--emerald-deep);
  background-image: var(--pattern-dark);
  background-size: 32px 32px;
  background-repeat: repeat;
}

.site-footer__top{
  max-width: var(--container);
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1.2rem;
  padding: 2rem 1.5rem 1.5rem;
}
.site-footer__top .brand__mark{ color: var(--paper); }
.site-footer__top .brand__sub{ color: var(--gold-bright); }
.site-footer__top nav{ display:flex; gap:1.0rem; font-size:.88rem; color: rgba(251,248,241,.7); }
.site-footer__top nav a:hover{ color: var(--emerald-bright); }
.site-footer__legal{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 0.5rem 0.5rem;
  font-size: .78rem;
  color: rgba(251,248,241,.55);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .hero__text{ max-width: none; }
}

/* Yatay menü; 7 öğe + açılır menüler + dil değiştirici + marka ile ancak
   ~1024px üzerinde tek satıra sığıyor. Altında hamburger çekmeceye geçilir. */
@media (max-width: 1160px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:fixed; inset: 0 0 0 30%;
    z-index: 200;
    background: var(--white);
    flex-direction:column; align-items:flex-start;
    padding: 6rem 1.6rem 2rem;
    gap: .3rem;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y:auto;
    border-left: 1px solid var(--line);
  }
  .nav-menu.is-open{ transform: translateX(0); }
  .nav-menu > li{ width:100%; }
  .dropdown{
    position:static; opacity:1; visibility:visible; transform:none;
    display:none; margin-top:.3rem; box-shadow:none; border:none; padding-left:.5rem;
  }
  .has-dropdown.is-open .dropdown{ display:block; }

  /* Backdrop scrim behind the drawer: dims the page and gives a large,
     obvious tap target to dismiss the menu (in addition to the toggle
     button itself and Escape). */
  .nav-backdrop{
    position: fixed;
    inset: 0;
    /* Must stay below .site-header's own z-index (100), not just below
       the toggle/drawer's internal z-index values. .site-header is a
       stacking context (position:sticky + z-index:100), so everything
       inside it — however high its own internal z-index — is capped at
       that 100 when compared against elements outside it, like this
       backdrop, which is appended directly to <body>. A backdrop z-index
       of 90 sits below the header (and everything in it) while still
       rising above ordinary in-page content. */
    z-index: 90;
    background: rgba(22,36,29,.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .nav-backdrop.is-open{ opacity: 1; visibility: visible; }
}

/* Prevents the page behind the drawer from scrolling while it's open */
body.nav-open{ overflow: hidden; }

@media (max-width: 600px){
  .hero__branches-grid{ grid-template-columns: 1fr; }
  .hero{ padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001s !important; transition-duration: .001s !important; }
  .ticker__track{ animation: none; }
}

/*=====================================*/



/* =========================================================
   İLETİŞİM SAYFASI
   ========================================================= */
.contact-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 880px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-info .section-title{
  font-size: 2.1rem;
  margin-bottom: 1rem;
}

.contact-info__lead{
  color: var(--text-dim);
  max-width: 480px;
  margin: 0 0 2rem;
  font-size: 1rem;
}

.branch-list {
  display: grid !important;
  /* This forces exactly 2 equal columns, wrapping automatically */
  grid-template-columns: repeat(2, 1fr) !important; 
  gap: 1rem !important;
}

.branch-item {
  background: var(--paper-soft);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 1.3rem 1.5rem;
  /* No width math needed here at all! */
}

.branch-item__tag{
  font-family: var(--f-label);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--gold);
  font-weight: 600;
  display: block;
  margin-bottom: .5rem;
}

.branch-item h3{
  font-size: 1.15rem;
  margin-bottom: .7rem;
}

.branch-item p{
  margin: 0;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.65;
}

.branch-item p strong{ color: var(--text-dim); font-weight: 600; }

.branch-item__address-link{
  color: var(--emerald);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(10,77,57,.35);
  font-weight: 500;
  display: inline-flex;
  align-items: flex-start;
  gap: .3rem;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.branch-item__address-link:hover,
.branch-item__address-link:focus-visible{
  color: var(--emerald-deep);
  text-decoration-color: var(--emerald-deep);
}
.branch-item__address-link svg{
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: .15em;
  stroke: currentColor;
}

/* İletişim sayfasına özel: şubeler tek sütun olsun (diğer sayfalardaki .branch-list etkilenmesin) */
.contact-info .branch-list{
  grid-template-columns: 1fr !important;
}

.contact-form-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.4rem 2.4rem 2.6rem;
  box-shadow: 0 24px 60px rgba(22,36,29,.08);
}

.contact-form-card .section-title{
  font-size: 1.9rem;
  margin-bottom: .8rem;
}

.contact-form-card__lead{
  color: var(--text-dim);
  font-size: .96rem;
  margin: 0 0 1.8rem;
}

.contact-form{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

@media (max-width: 520px){
  .form-row{ grid-template-columns: 1fr; }
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.form-group label{
  font-family: var(--f-label);
  font-size: .7rem;
  letter-spacing: .14em;
  font-weight: 600;
  color: var(--emerald-deep);
}

.form-group input,
.form-group textarea{
  font-family: var(--f-body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .85rem 1rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
  color: var(--text-dim);
  opacity: .65;
}

.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(14,107,79,.12);
}

.form-group textarea{
  resize: vertical;
  min-height: 130px;
}

.contact-form .btn{
  justify-content: center;
  width: 100%;
  border: none;
  cursor: pointer;
  font-family: var(--f-label);
  letter-spacing: .08em;
  font-size: .85rem;
  padding: 1rem 1.5rem;
}

.form-status{
  font-size: .88rem;
  text-align: center;
  min-height: 1.2em;
}
.form-status.is-success{ color: var(--emerald-deep); }
.form-status.is-error{ color: #B3261E; }

/* =========================================================
   MARKALARIMIZ — tıklanabilir marka kartları
   ========================================================= */
.brand-card{
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.brand-card__logo{
  aspect-ratio: 1 / 1;
  background-color: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.brand-card__logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Logo assets with excess internal padding baked into the file (e.g. a
   small mark centered on a large canvas) — scale up so it reads at the
   same visual weight as the other logos in the grid. */
.brand-card__logo--zoom img{ transform: scale(4); }

.brand-card:hover .brand-card__logo,
.brand-card:focus-visible .brand-card__logo{
  border-color: var(--emerald);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(22,36,29,.12);
}

/* Gold-foil sheen on hover — the same signature catch-the-light motion
   used on the branch cards elsewhere on the site, so the gesture reads
   as one consistent idea rather than a one-off. */
.brand-card__logo::after{
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(217,180,102,.28) 45%,
    rgba(217,180,102,.05) 55%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 2;
}
.brand-card:hover .brand-card__logo::after{
  animation: foil-sweep 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-card:hover h3,
.brand-card:focus-visible h3{
  color: var(--emerald-deep);
}

.brand-card h3{
  font-family: var(--f-label);
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: .02em;
  line-height: 1.35;
  margin: 0;
  transition: color .2s ease;
}

/* ---------- Grouping by sector ----------
   Nine logos in one flat grid gives no sense of which world each brand
   belongs to. Grouping by the same four sectors named in the header
   ticker and homepage turns the page into something scannable, and
   reuses vocabulary the visitor has already seen. */
.brand-group{
  margin-bottom: 4rem;
  text-align: left;
}
.brand-group:last-child{ margin-bottom: 0; }

.brand-group__label{
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.brand-group__label .eyebrow{ margin: 0; white-space: nowrap; }
.brand-group__count{
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.brand-group__label::after{
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.brand-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  justify-content: center;
  gap: 2.2rem 1.6rem;
}

@media (max-width: 560px){
  .brand-card-grid{
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* =========================================================
   ALTIN & DÖVİZ — marka + şube sayfası
   ========================================================= */
.brands-page{
  max-width: var(--container);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 5rem;
}

.brands-page__intro{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}

.brands-page__intro .section-title{
  font-size: 2.3rem;
  margin-bottom: .9rem;
}

.brands-page__intro p{
  color: var(--text-dim);
  font-size: 1.02rem;
  margin: 0;
}

.brand-section{
  /* sabit (sticky) başlık + ticker'ın bağlantıyı kapatmaması için */
  scroll-margin-top: 150px;
  padding: 2.6rem 0;
  border-top: 1px solid var(--line);
}

.brand-section:first-of-type{ border-top: none; }

.brand-section__header{
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}

.brand-section__logo{
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  background-color: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.brand-section__logo img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-section__title h2{
  font-size: 1.6rem;
  margin-bottom: .3rem;
}

.brand-section__title p{
  margin: 0;
  color: var(--text-dim);
  font-size: .92rem;
}

.brand-section .branch-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

/* Mobil/tablet: iki harita yan yana sıkışınca her biri ~165px'e düşüp
   harita üstündeki adres/otopark kartları taşıyordu. Dar ekranda tek
   sütuna geçip her haritaya tam genişlik veriyoruz. Masaüstündeki (860px
   üstü) iki sütunlu düzen aynen korunuyor. .branch-list temel kuralı
   !important taşıdığı için bu geçersiz kılmanın da !important olması şart. */
@media (max-width: 860px){
  .branch-list,
  .brand-section .branch-list{
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   BRANCH FEATURE — küçük tanıtım kartı (görsel + metin + referanslar)
   .branch-list içinde şube kartının yanına oturur; aynı kağıt/altın
   dil ama görseli barındırdığı için köşeleri daha yumuşak.
   ========================================================= */
.branch-feature{
  background: var(--paper-soft);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 1.3rem 1.5rem 1.5rem;
}

/* --- görsel: kenarlarda yumuşak bulanıklık (glow) + hafif parlama (shine) ---
   Alttaki görsel kopyası büyütülüp bulanıklaştırılarak taşırılıyor; bu,
   kenarların keskin kesilmesi yerine ışık sızıyormuş hissi veriyor.
   Üstteki köşegen degrade ise camsı bir parlama katıyor. */
.branch-feature__media{
  position: relative;
  padding: 16px;
  margin-bottom: 1.3rem;
}

.branch-feature__glow{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(1.35);
  opacity: 0.7;
  transform: scale(0.9);
  border-radius: 1px;
  z-index: 0;
}

.branch-feature__img{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 200px;
  object-fit: fill;
  border-radius: 10px;
  box-shadow:
    0 12px 28px rgba(22,36,29,.16),
    0 0 42px rgba(217,180,102,.24);
}

.branch-feature__media::after{
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,.4), transparent 45%);
  pointer-events: none;
  z-index: 2;
}

.branch-feature__body h3{
  font-size: 1.15rem;
  margin: .5rem 0 .7rem;
}

.branch-feature__body p{
  margin: 0 0 1.2rem;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.65;
}

.branch-feature__stats{
  display: flex;
  gap: 1.6rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.branch-feature__stat{
  display: flex;
  flex-direction: column;
}

.branch-feature__stat-num{
  font-family: var(--f-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--emerald-deep);
  line-height: 1.1;
}

.branch-feature__stat-label{
  font-family: var(--f-label);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: .25rem;
}

.branch-feature__refs-label{
  font-family: var(--f-label);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--gold);
  font-weight: 600;
  display: block;
  margin-bottom: .4rem;
}

.branch-feature__refs p{
  margin: 0;
  font-size: .88rem;
  color: var(--text-dim);
}

/* =========================================================
   ALTIN & DÖVİZ — quick-jump nav
   Six real brand sections on a long page is a genuine wayfinding
   problem, so this is a functional scrollspy, not a decoration.
   ========================================================= */
.brand-jumpnav{
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin: 0 0 3rem;
  padding: .85rem 1rem;
  background: rgba(251,248,241,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand-jumpnav a{
  font-family: var(--f-label);
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.brand-jumpnav a:hover,
.brand-jumpnav a:focus-visible{
  color: var(--emerald-deep);
  border-color: var(--emerald);
}

.brand-jumpnav a.is-active{
  color: var(--emerald-deep);
  background: var(--paper-soft);
  border-color: var(--gold);
}

@media (max-width: 700px){
  .brand-jumpnav{
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .brand-jumpnav a{ flex: 0 0 auto; }
}

/* Divider ornament — echoes the ✦ used in the header ticker, so the
   seam between brand sections reads as part of the same visual
   vocabulary instead of a generic hairline rule. */
.brand-section{ position: relative; }

.brand-section:not(:first-of-type)::before{
  content: "✦";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--gold);
  background: var(--paper);
}

/* Scroll reveal — one quiet fade/rise per section, orchestrated rather
   than scattered across every card, so the motion reads as intentional.
   Named apart from .reveal-load (see near the hero styles): this one
   stays hidden until an IntersectionObserver marks it .is-visible. */
.reveal-scroll{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(0.25, 1, 0.5, 1),
              transform .6s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-scroll.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Gold-foil sheen — the one bold move on this page: a branch card
   catches the light on hover, the way a gold surface would. */
.brand-section .branch-item{
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow .3s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-section .branch-item::after{
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(217,180,102,.28) 45%,
    rgba(217,180,102,.05) 55%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
}

.brand-section .branch-item:not(.branch-item--pending):hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(22,36,29,.1);
}

.brand-section .branch-item:not(.branch-item--pending):hover::after{
  animation: foil-sweep 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes foil-sweep{
  from{ left: -60%; }
  to{ left: 130%; }
}

/* Pending state — for branches whose details aren't in hand yet. Styled
   as a deliberate "coming soon" moment instead of leftover bracket text,
   so it reads as intentional rather than unfinished. */
.branch-item--pending{
  background: transparent;
  border-left-style: dashed;
  border-left-color: var(--line);
}

.branch-item__tag--pending{
  color: var(--text-dim);
}

.pending-note{
  font-style: italic;
  color: var(--text-dim);
  opacity: .8;
}

/* =========================================================
   DİL DEĞİŞTİRİCİ (globe) — i18n.js navbar'a ekler
   ========================================================= */
.lang-switch{ position: relative; }
.lang-switch__btn{
  display:flex; align-items:center; gap:.4rem;
  padding:.35rem .65rem;
  color: var(--text-dim);
  border:1px solid var(--line);
  border-radius:999px;
  font-family: var(--f-body);
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.lang-switch__btn:hover,
.lang-switch.is-open .lang-switch__btn{ color: var(--emerald-deep); border-color: var(--emerald); }
.lang-switch__globe{ flex-shrink:0; }
.lang-switch__menu{
  position:absolute; top:calc(100% + .6rem); right:0;
  min-width:170px;
  list-style:none; margin:0;
  background: var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  padding:.4rem;
  box-shadow:0 18px 40px rgba(22,36,29,.14);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:6;
}
.lang-switch.is-open .lang-switch__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-switch__menu button{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; text-align:start;
  padding:.5rem .7rem; border-radius:6px;
  font-family: var(--f-body); font-size:.88rem; color: var(--text-dim);
  transition: background .15s ease, color .15s ease;
}
.lang-switch__menu button:hover{ background: var(--sage); color: var(--emerald-deep); }
.lang-switch__menu button[aria-current="true"]{ color: var(--emerald-deep); font-weight:600; }
.lang-switch__menu button[aria-current="true"]::after{ content:"✓"; color: var(--gold); }

@media (max-width: 1160px){
  .lang-switch{ width:100%; }
  .lang-switch__btn{ width:100%; justify-content:center; }
  .lang-switch__menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; padding:.3rem 0 0; min-width:0; background:transparent;
  }
  .lang-switch:not(.is-open) .lang-switch__menu{ display:none; }
}

/* =========================================================
   RTL — Arapça için yön düzeltmeleri
   (Görsel QA gerektirir; ana bileşenler burada ele alınmıştır.)
   ========================================================= */
[dir="rtl"] body{ text-align: right; }

/* Telefon numaraları her zaman soldan sağa okunur; RTL'de rakamlar/parantezler
   yeniden sıralanıp bozuk görünüyordu. tel: bağlantılarını yalıtılmış LTR yap. */
[dir="rtl"] a[href^="tel:"]{ direction: ltr; unicode-bidi: isolate; }

/* Ticker ve zaman tüneli, translateX animasyonu / offsetLeft geometrisiyle
   çalışan yatay kaydırıcılardır; RTL'de yön terslenince bozuluyorlar. Bu
   yüzden yerleşimlerini her zaman LTR'de tutuyoruz (kelimeler yine çevrilir,
   Arapça harfler kendi içinde sağdan sola dizilir). */
[dir="rtl"] .ticker,
[dir="rtl"] .ticker__track,
[dir="rtl"] .ticker__items{ direction: ltr; }
/* Arapça'da kayan bant ters yönde aksın (içerik sağa doğru). Yerleşim yine
   LTR kalır (kusursuz döngü geometrisi bozulmasın), sadece animasyon tersine
   çalıştırılır — JS yalnızca animation-duration'ı ayarladığı için bu korunur. */
[dir="rtl"] .ticker__track{ animation-direction: reverse; }
[dir="rtl"] .timeline-viewport,
[dir="rtl"] .timeline-container,
[dir="rtl"] .timeline-track{ direction: ltr; }
/* Zaman tüneli sağdan sola aksın (ilk yıl sağda, ilerledikçe sola): görsel
   sırayı ters çeviriyoruz ama direction:ltr kaldığı için JS'in offsetLeft
   geometrisi bozulmuyor. */
[dir="rtl"] .timeline-track{ flex-direction: row-reverse; }
/* Kart içindeki Arapça metin yine sağa yaslı/RTL okunsun */
[dir="rtl"] .activity-card{ direction: rtl; }

[dir="rtl"] .nav-menu > li > a::after{ left:auto; right:0; }
[dir="rtl"] .dropdown{ left:auto; right:-1.1rem; }
[dir="rtl"] .lang-switch__menu{ right:auto; left:0; }
[dir="rtl"] .branch-item{ border-left:none; border-right:3px solid var(--gold); }
[dir="rtl"] .branch-feature{ border-left:none; border-right:3px solid var(--gold); }

/* Chatbot RTL: sağ kenardaki tab ve pencere sola taşınır */
[dir="rtl"] .guneyler-bot-anchor{ right:auto; left:0; }
[dir="rtl"] .guneyler-bot-anchor.is-hidden{ transform: translateY(calc(-50% - var(--bot-shift, 0px))) translateX(-24px); }
[dir="rtl"] .guneyler-bot-launcher{ border-radius:0 16px 16px 0; border-left:none; border-right:1px solid rgba(217,180,102,.3); }
[dir="rtl"] .guneyler-bot-launcher:hover,[dir="rtl"] .guneyler-bot-launcher:focus-visible{ padding-left:.9rem; padding-right:1.3rem; }
/* Teaser (nudge) baloncuğu: launcher artık solda; kapatma butonu, ek boşluk
   ve konuşma balonu oku da sola aynalanır (ok launcher'a doğru bakar). */
[dir="rtl"] .guneyler-bot-teaser{ padding: .9rem 1.1rem .9rem 2.1rem; }
[dir="rtl"] .teaser-close{ right:auto; left:.55rem; }
[dir="rtl"] .guneyler-bot-teaser::after{ right:auto; left:-6px; transform: translateY(-50%) rotate(135deg); }
[dir="rtl"] .guneyler-bot-window{ right:auto; left:calc(1.4rem + env(safe-area-inset-left, 0px)); transform-origin:bottom left; }
[dir="rtl"] .incoming .message-bubble{ border-left:none; border-right:3px solid var(--emerald); border-radius:14px 0 14px 14px; }
[dir="rtl"] .outgoing .message-bubble{ border-radius:0 14px 14px 14px; }
[dir="rtl"] .message-row.incoming .message-meta{ text-align:right; }
@media (max-width: 480px){
  [dir="rtl"] .guneyler-bot-window{ left:0; }
}