/* birdinfo.css — güncellenmiş */
/* Temel değişkenler */
:root{
  --bg: url('162d10fa-010a-4fd5-a366-957f06016ca7.jfif');
  --accent-green: rgba(22,160,133,0.85);
  --accent-green-70: rgba(22,160,133,0.7);
  --shadow: 0 6px 12px rgba(0,0,0,0.25);
  --max-width: 1000px;
}

/* Reset / temel */
*{ box-sizing: border-box; }
html,body{
  height:100%;
  margin:0;
  padding:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg) no-repeat center center fixed;
  background-size: cover;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Wrapper */
.birdinfo-wrapper{
  width:94%;
  max-width:var(--max-width);
  margin:18px auto 60px;
  padding:12px;
  color:#fff;
}

/* Üst kontroller satırı */
.top-row {
  display:flex;
  align-items:center;
  gap:0px;
  justify-content:flex-start;
  margin-bottom:18px;
}

/* back-button: hem "Geri" hem de "Anasayfa" aynı sınıfı kullanır */
.back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(22, 160, 133, 0.7);
    color: #fff;
    font-size: 0.75em;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 10;
}

/* Anasayfa butonunu ekranın ortasında ve en üstte göstermek için (fixed) */
.home-wrapper .back-button{
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
}

/* Bilgi kutusu (header-box uyumlu) */
.info-box.header-box {
  background-color: rgba(241,175,88,0.5);
  padding:10px;
  border-radius:14px;
  box-shadow:var(--shadow);
  color:#000;
  margin-bottom:18px;
  margin-top: 38px;
}

/* Bilgi grid */
.info-grid{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
}
.info-item{
  flex:1 1 220px;
  min-width:180px;
  background: rgba(255,255,255,0.03);
  color:#000;
  padding:0px 0px;
  border-radius:8px;
  font-weight:600;
}

/* FOTOĞRAFLAR: 3 sütun sabit */
.photos-row {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  margin-bottom:22px;
  align-items:start;
}

/* photo item: caption (üstte) ve kare çerçeve (altta) */
.photo-item { display:flex; flex-direction:column; align-items:center; min-width:0; }

/* caption: şeffaf yeşil (isteğe uyan renk), tek satır */
.photo-caption {
  width:100%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background: var(--accent-green);
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
  margin-bottom:8px;
  font-size: clamp(12px, 1.6vw, 16px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

/* Kare çerçeve (1:1) */
.photo-frame {
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--accent-green-70);
  border: 2px solid rgba(22,160,133,0.9);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Overlay / büyütme (aynı önceki) */
.photo-overlay{
  position: fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  padding: 18px;
}
.photo-overlay .overlay-img{
  max-width: 94vw;
  max-height: 88vh;
  width:auto; height:auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  touch-action: none;
}

/* Aile ağacı bölümü */
.family {
  margin-top:34px;
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:center;
}

/* parents row: iki sütun, her box relative - pseudo ile ok konulacak */
.parents-row {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  position:relative;
}

/* parent box (anne/baba) */
.parent-boxright {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:48%;
  min-width:160px;
  box-sizing:border-box;
  position:relative; /* ::before için gerekli */
}
.parent-boxleft {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:48%;
  min-width:160px;
  box-sizing:border-box;
  position:relative; /* ::before için gerekli */
}
/* arrow for parent: put arrow.png above each parent box *
/* ok görsellerinin çerçeve genişliğine göre stretchlenmiş ve ortalanmış hali */

/* parent (anne / baba) için: ok, foto çerçevesinin tam genişliğini kaplasın */
.parent-boxleft::before {
  content: "";
  position: absolute;
  /* ok çerçevenin tam genişliğini kaplasın ve ortalansın */
  left: 0;                    /* sol kenar parent-box'ın soluna hizalar */
  width: 100%;                /* parent-box genişliğine eşit */
  height: 100px;               /* ihtiyaca göre (küçültülebilir) */
  top: calc(-1 * 100px);       /* ok çerçevenin hemen üstünde durur */
  background-image: url('arrow-left.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; /* genişliği çerçeveye göre stretchle, yüksekliği sabit */
  pointer-events: none;
  opacity: 0.95;
  z-index: 2;
}
.parent-boxright::before {
  content: "";
  position: absolute;
  /* ok çerçevenin tam genişliğini kaplasın ve ortalansın */
  left: 0;                    /* sol kenar parent-box'ın soluna hizalar */
  width: 100%;                /* parent-box genişliğine eşit */
  height: 100px;               /* ihtiyaca göre (küçültülebilir) */
  top: calc(-1 * 100px);       /* ok çerçevenin hemen üstünde durur */
  background-image: url('arrow-right.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; /* genişliği çerçeveye göre stretchle, yüksekliği sabit */
  pointer-events: none;
  opacity: 0.95;
  z-index: 2;
}
/* parent photo frame */
.parent-boxleft .parent-boxright .family-photo {
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:10px;
  overflow:hidden;
  background: var(--accent-green-70);
  border:2px solid rgba(22,160,133,0.9);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.parent-boxright img{ width:100%; height:100%; object-fit:cover; }

.parent-boxleft img{ width:100%; height:100%; object-fit:cover; }
/* caption under parent photo: şeffaf yeşil, tek satır */
.parent-caption {
  margin-top:8px;
  width:100%;
  background: var(--accent-green);  /* şeffaf yeşil */
  color:#fff;
  padding:8px;
  text-align:center;
  border-radius:8px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size: clamp(12px, 1.2vw, 14px);
}

/* grandparents row: 4 boxes; her biri relative (ok için pseudo) */
.grandparents {
  width:100%;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:8px;
}

/* grand-box relative for arrow */
.grand-boxright {
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.grand-boxleft {
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

/* arrow above each grand-box */

/* büyük ebeveynler (dede / nine) için: daha küçük ok */
.grand-boxright::before {
  content: "";
  position: absolute;
  left: 0;                     /* kutu genişliğine göre hizala */
  width: 100%;
  height: 34px;                /* daha küçük ok yüksekliği (isteğe göre değiştir) */
  top: calc(-1 * 34px);
  background-image: url('arrow-right.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.95;
  z-index: 2;
}
.grand-boxleft::before {
  content: "";
  position: absolute;
  left: 0;                     /* kutu genişliğine göre hizala */
  width: 100%;
  height: 34px;                /* daha küçük ok yüksekliği (isteğe göre değiştir) */
  top: calc(-1 * 34px);
  background-image: url('arrow-left.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.95;
  z-index: 2;
}

/* grand photo */
.grand-photo {
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:8px;
  overflow:hidden;
  background: var(--accent-green-70);
  border:2px solid rgba(22,160,133,0.9);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.grand-photo img{ width:100%; height:100%; object-fit:cover; }

/* grand caption: şeffaf yeşil, tek satır */
.grand-caption {
  margin-top:8px;
  width:100%;
  background: var(--accent-green);
  color:#fff;
  padding:6px;
  text-align:center;
  border-radius:6px;
  font-weight:700;
  font-size: clamp(11px, 2vw, 14px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Responsive ince ayarlar */
@media (max-width:900px){
  :root{ --max-width:820px; }
  .photo-caption{ font-size: clamp(11px, 2.2vw, 14px); }
  .parent-boxleft::before { top: -36px; width: 100px; height: 42px; }
  .parent-boxright::before { top: -36px; width: 100px; height: 42px; }
  .grand-boxright::before { top: -26px; width: 64px; height: 30px; }
  .grand-boxleft::before { top: -26px; width: 64px; height: 30px; }
}

@media (max-width:640px){
  .photos-row{ gap:10px; }
  .photo-caption{ font-size:12px; padding:6px; }
  .info-item{ font-size:14px; padding:0px; }
  .grand-caption{ font-size:10px; padding:6px; }
  .grandparents { gap:10px; }
}

/* çok küçük ekran: yine 3 sutun korunur (kullanıcı istediği gibi) - öğeler küçülür */
@media (max-width:420px){
  .photo-caption{ font-size:11px; padding:5px; }
  .photo-frame{ border-radius:8px; }
  .parent-boxright { width:48%; }
  .parent-boxleft { width:48%; }
  .grandparents { grid-template-columns: repeat(4, minmax(0,1fr)); gap:6px; }
  .grand-caption{ font-size:7px; padding:5px; }
  .info-grid{ gap:8px; }
}
/* ---------- Arrow (ok) ortalama — photo wrapper'ın merkezine hizalar ---------- */
/* parent-box ve grand-box wrapper'ları photo-frame'i sarıyor olmalı ve relative olmalı */
.parent-boxleft,
.parent-boxright,
.grand-boxright,
.grand-boxleft {
  position: relative; /* pseudo-elementleri bu kutuya göre konumlandırmak için gerekli */
}

/* Anne / Baba ok (daha büyük) */
.parent-boxleft::before {
  content: "";
  display: block;
  position: absolute;

  /* tam yatay merkezlemeyi bu iki satır sağlar */
  left: 50%;
  transform: translateX(-50%);

  /* ok görselinin genişliğini fotoğraf çerçevesine göre ayarla */
  width: 80%;               /* istersen % yerine px kullanabilirsin */
  max-width: 320px;         /* çok büyük ekranlarda sınır */
  aspect-ratio: 3 / 1.0;    /* ok arası oran — isteğe göre değiştir */
  height: auto;

  /* ok, fotoğraf çerçevesinin hemen üstünde dursun */
  bottom: 100%;             /* wrapper'ın üst kenarının hemen üstü */
  margin-bottom: 8px;       /* ok ile çerçeve arasındaki boşluk */

  background-image: url('arrow-left.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* orantıyı korur; stretch istemezsek contain kullan */
  pointer-events: none;     /* ok tıklamayı etkilemesin, fotoğraf tıklanabilir kalsın */
  z-index: 20;
  opacity: 1;
}
.parent-boxright::before {
  content: "";
  display: block;
  position: absolute;

  /* tam yatay merkezlemeyi bu iki satır sağlar */
  left: 50%;
  transform: translateX(-50%);

  /* ok görselinin genişliğini fotoğraf çerçevesine göre ayarla */
  width: 80%;               /* istersen % yerine px kullanabilirsin */
  max-width: 320px;         /* çok büyük ekranlarda sınır */
  aspect-ratio: 3 / 1.0;    /* ok arası oran — isteğe göre değiştir */
  height: auto;

  /* ok, fotoğraf çerçevesinin hemen üstünde dursun */
  bottom: 100%;             /* wrapper'ın üst kenarının hemen üstü */
  margin-bottom: 8px;       /* ok ile çerçeve arasındaki boşluk */

  background-image: url('arrow-right.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* orantıyı korur; stretch istemezsek contain kullan */
  pointer-events: none;     /* ok tıklamayı etkilemesin, fotoğraf tıklanabilir kalsın */
  z-index: 20;
  opacity: 1;
}

/* Dede / Nine ok (daha küçük) */
.grand-boxright::before {
  content: "";
  display: block;
  position: absolute;

  left: 50%;
  transform: translateX(-50%);

  width: 45%;
  max-width: 220px;
  aspect-ratio: 3 / 1.0;
  height: auto;

  bottom: 100%;
  margin-bottom: 6px;

  background-image: url('arrow-right.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
  z-index: 18;
  opacity: 1;
}
.grand-boxleft::before {
  content: "";
  display: block;
  position: absolute;

  left: 50%;
  transform: translateX(-50%);

  width: 45%;
  max-width: 220px;
  aspect-ratio: 3 / 1.0;
  height: auto;

  bottom: 100%;
  margin-bottom: 6px;

  background-image: url('arrow-left.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
  z-index: 18;
  opacity: 1;
}

/* Mobil / küçük ekran ayarları — oklar küçülsün, merkezleme korunur */
@media (max-width: 700px) {
  .parent-boxleft::before { width: 56%; max-width: 220px; margin-bottom: 6px; aspect-ratio: 3/1; }
    .parent-boxright::before { width: 56%; max-width: 220px; margin-bottom: 6px; aspect-ratio: 3/1; }
  .grand-boxright::before  { width: 48%; max-width: 160px; margin-bottom: 4px; aspect-ratio: 3/1; }
  .grand-boxleft::before  { width: 48%; max-width: 160px; margin-bottom: 4px; aspect-ratio: 3/1; }
}
@media (max-width: 420px) {
  .parent-boxright::before { width: 64%; max-width: 200px; margin-bottom: 4px; }
  .parent-boxleft::before { width: 64%; max-width: 200px; margin-bottom: 4px; }
  .grand-boxright::before  { width: 52%; max-width: 140px; margin-bottom: 3px; }
  .grand-boxleft::before  { width: 52%; max-width: 140px; margin-bottom: 3px; }
}

/* Eğer ok görselini çerçeve genişliğine stretch ile tam doldurmak istersen background-size: 100% 100% yap */
/* background-size: contain bırakıldı çünkü görselin bozulmasını önler; istersen değiştir */
/* wrapper'ın relative olması zorunlu */
.photo-wrapper {
  position: relative;
  display: inline-block;    /* veya grid/flex konteynerine göre block/flex */
  width: 220px;             /* örnek genişlik; kendi düzenine göre ayarla / responsive yap */
  box-sizing: border-box;
}

/* ortak ::before ayarları (arrow görseli için) */
.photo-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;                     /* yatay merkezleme için */
  transform: translateX(-50%);   /* orta nokta wrapper merkezinde olur */
  bottom: 100%;                  /* wrapper'ın üst kenarının hemen üstünde */
  margin-bottom: 6px;            /* ok ile çerçeve arası boşluk */
  display: block;
  pointer-events: none;          /* okların tıklamayı engellememesi için */
  z-index: 20;
  /* boyut: fotoğraf çerçevesi ile aynı genişlikte yapmak istersen 100% kullan */
  width: 100%;
  max-width: 320px;              /* geniş ekran limitleri; gerektiğinde ayarla */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;    /* fotoğraf genişliğini doldursun -> stretch */
  height: 40px;                  /* ok resminin yüksekliği; aspect-ratio kullanabilirsin */
  box-sizing: border-box;
}

/* Eğer aspect-ratio destekliyorsan daha düzgün: 
.photo-wrapper::before { aspect-ratio: 4 / 1; height: auto; } 
ve width: 100% kalsın. */

/* arrow-left: anne & anne-cevheri (maternal) */
.photo-wrapper.arrow-left::before {
  background-image: url('arrow-left.png');
}

/* arrow-right: baba & paternal vs. kalan kutular */
.photo-wrapper.arrow-right::before {
  background-image: url('arrow-right.png');
}

/* responsive: çok küçük ekranlarda ok yüksekliklerini küçült */
@media (max-width: 700px) {
  .photo-wrapper::before {
    margin-bottom: 4px;
    height: 32px;
    max-width: 260px;
  }
}
@media (max-width: 420px) {
  .photo-wrapper::before {
    height: 24px;
    max-width: 200px;
    margin-bottom: 3px;
  }
}

/* Eğer okı fotoğraf alanı ile tam tamına aynı genişlikte istiyorsan
   wrapper içinde foto-frame genişliğini %100 yap; yukarıdaki width:100% bunu takip eder. */

/* photo-frame örnek (1:1 kare) */
.photo-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(22,160,133,0.18); /* şeffaf yeşil tonlu arka (isteğe göre) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* caption (ok ve fotoğraf ayrık olduğu için caption ayrı kutu) */
.photo-wrapper .caption {
  margin-top: 8px;
  text-align: center;
  background: rgba(22,160,133,0.7);
  color: #fff;
  padding: 6px 8px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1.6vw, 14px);
}

/* örnek: wrapper layout (yan yana sıralama) */
.photo-row { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: nowrap; }

/* Eğer arrow'ı fotoğrafın tam ortasına bindirmek istersen (yatay merkezde aynı nokta),
   left:50% + translateX(-50%) zaten bunu sağlar. */
/* Parent (anne / baba) fotoğraf çerçevesi */
.family-photo,
.parent-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-green-70);
  border: 4px solid rgba(22,160,133,0.1); /* çerçeve kalınlığı ve renk */
  box-shadow: var(--shadow);
  cursor: pointer;
  display: block;
}

/* Parent içindeki <img> için */
.family-photo img,
.parent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* arrow boyutlarını kontrol eden değişkenler */
:root{
  --parent-arrow-height: 160px;   /* anne/baba ok yüksekliği — burayı değiştirerek 2x/3x büyütebilirsin */
  --parent-arrow-width: 80%;      /* ok genişliği (fotoğraf kutusuna göre yüzdelik) */
  --parent-arrow-max: 640px;

  --grand-arrow-height: 68px;     /* dede/nine ok yüksekliği */
  --grand-arrow-width: 45%;
  --grand-arrow-max: 320px;

  --arrow-gap: 8px;               /* ok ile fotoğraf çerçevesi arasındaki boşluk */
}

/* OK'ların kapladığı alanı korumak için üst bölümlerde yeterli boşluk bırak */
.photos-row { margin-bottom: calc(var(--parent-arrow-height) + 28px); }
.parents-row { margin-top: calc(var(--grand-arrow-height) + 12px); }
.grandparents { margin-top: calc(var(--grand-arrow-height) + 12px); }

/* parent-box'ları relative bırak (zaten öyle) */

/* Anne / Baba ok: top ile yukarı yerleştir (bottom yerine top kullanıyoruz, çakışmayı engeller) */
.parent-boxleft::before,
.parent-boxright::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--parent-arrow-width);
  max-width: var(--parent-arrow-max);
  height: var(--parent-arrow-height);
  top: calc(-1 * (var(--parent-arrow-height) + var(--arrow-gap))); /* fotoğrafın üstünde ama dışarıda */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 60;
  opacity: 1;
}

/* Dede / Nine okları (küçük, yine top ile yerleştir) */
.grand-boxleft::before,
.grand-boxright::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--grand-arrow-width);
  max-width: var(--grand-arrow-max);
  height: var(--grand-arrow-height);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
}

/* arrow-left / arrow-right arka planları (bozulmasın diye contain) */
.parent-boxleft::before   { background-image: url('arrow-left.png'); }
.parent-boxright::before  { background-image: url('arrow-right.png'); }
.grand-boxleft::before    { background-image: url('arrow-left.png'); }
.grand-boxright::before   { background-image: url('arrow-right.png'); }

/* mobilde küçültme — okların boyutlarını küçült */
@media (max-width:900px){
  :root{
    --parent-arrow-height: 120px;
    --parent-arrow-max: 420px;
    --parent-arrow-width: 72%;

    --grand-arrow-height: 54px;
    --grand-arrow-max: 260px;
    --grand-arrow-width: 48%;
  }
  .photos-row { margin-bottom: calc(var(--parent-arrow-height)); }
}

@media (max-width:420px){
  :root{
    --parent-arrow-height: 88px;
    --parent-arrow-max: 280px;
    --parent-arrow-width: 64%;

    --grand-arrow-height: 40px;
    --grand-arrow-max: 200px;
    --grand-arrow-width: 52%;
  }
  .photos-row { margin-bottom: calc(var(--parent-arrow-height)); }
}
/* === Arrow: foto çerçevesine daha yakın olacak şekilde ayar === */
/* yakınlık kontrolü için değişkenler (isteğe göre küçült/büyüt) */
:root{
  --parent-arrow-height: 160px;   /* anne/baba ok yüksekliği */
  --arrow-gap: 8px;               /* ok ile fotoğraf çerçevesi arasındaki boşluk (pozitif -> ok çerçeveye yaklaşıyor) */
}

/* Foto satırının altındaki boşluğu arrow yüksekliğine göre ayarla (fazla alan kalksın) */
.photos-row { margin-bottom: calc(var(--parent-arrow-height) - var(--arrow-gap) + 16px); }

/* Anne / Baba ok: top hesaplamasını daha yakın yapıyoruz:
   - eski: top: calc(-1 * (height + gap))  => çok yukarıda
   - yeni: top: calc(-1 * var(--parent-arrow-height) + var(--arrow-gap)) => yükseklik - gap kadar yukarı (yakın) */
.parent-boxleft::before,
.parent-boxright::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 320px;
  height: var(--parent-arrow-height);
  top: calc(-1 * var(--parent-arrow-height) + var(--arrow-gap));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 60;
  opacity: 1;
}

/* Dede / Nine okları için de benzer yaklaşım */
:root{
  --grand-arrow-height: 68px;
}
.grand-boxleft::before,
.grand-boxright::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  max-width: 220px;
  height: var(--grand-arrow-height);
  top: calc(-1 * var(--grand-arrow-height) + (var(--arrow-gap) / 2));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 50;
  opacity: 1;
}

/* Mobilde de aynı mantık korunur; istersen burada gap'i küçültebilirsin */
@media (max-width:700px){
  :root{
    --parent-arrow-height: 120px;
    --grand-arrow-height: 54px;
    --arrow-gap: 6px;
  }
  .photos-row { margin-bottom: calc(var(--parent-arrow-height) - var(--arrow-gap) + 12px); }
}
/* ======= Parent row: anne & baba aynı satırda, dinamik boyut ======= */
.parents-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex-wrap: nowrap;      /* kesinlikle aynı satırda kalacak */
  overflow: hidden;       /* dışarı taşmasını önler */
  box-sizing: border-box;
}

/* parent box'lar: ESAS DEĞİŞİKLİK
   - flex:1 1 0 ile küçülebilir / büyüyebilir (taşmaz)
   - min-width:0 kritik: flex öğelerinin içeriği taşmasını engeller */
.parent-boxleft,
.parent-boxright {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;          /* çok önemli: flex öğesi küçülebilsin */
  box-sizing: border-box;
  position: relative;
  padding: 0 6px;        /* iç boşluk küçük ekranlarda taşmayı azaltır */
}

/* family-photo / parent photo: responsive, kutu esnemesine izin verir */
.family-photo,
.parent-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-green-70);
  border: 4px solid rgba(22,160,133,0.1);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: block;
  max-width: 100%;
  box-sizing: border-box;
}
.family-photo img,
.parent-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* caption küçültmesi (taşmayı engellemek için) */
.parent-caption {
  margin-top: 8px;
  width: 100%;
  background: var(--accent-green);
  color: #fff;
  padding: 6px 8px;
  text-align: center;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(11px, 1.8vw, 14px);
}

/* arrow ::before için responsive değişkenler */
/* --parent-arrow-height / --arrow-gap gibi değişkenleri kullanıyoruz */
:root {
  --parent-arrow-height: 160px;
  --arrow-gap: 8px;
}

/* Anne / Baba okları (pozisyonlama korunuyor ama artık parent box genişliği ne olursa olsun ortalanır) */
.parent-boxleft::before,
.parent-boxright::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 320px;
  height: var(--parent-arrow-height);
  top: calc(-1 * var(--parent-arrow-height) + var(--arrow-gap));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 60;
  opacity: 1;
}

/* küçük ekranlarda anne/baba blokları küçülsün, ok daha küçük olsun */
@media (max-width: 900px) {
  .parents-row { gap: 10px; }
  :root {
    --parent-arrow-height: 120px;
    --parent-arrow-width: 72%;
    --parent-arrow-max: 420px;
    --arrow-gap: 6px;
  }
  .parent-caption { font-size: clamp(10px, 2.0vw, 13px); padding: 6px; }
}

/* çok küçük ekran: daha agresif küçültme, ama yine aynı satırda kalırlar */
@media (max-width: 480px) {
  .parents-row { gap: 8px; }
  .parent-boxleft, .parent-boxright { padding: 0 4px; }
  :root {
    --parent-arrow-height: 88px;
    --parent-arrow-width: 64%;
    --parent-arrow-max: 280px;
    --arrow-gap: 4px;
  }
  .parent-caption { font-size: 11px; padding: 5px; }
}

/* güvenlik: ebeveyn kutularının taşmasını engellemek için önemli */
.parents-row, .parent-boxleft, .parent-boxright, .family-photo {
  min-width: 0;
  box-sizing: border-box;
}
/* ---------------------------
   Anne / Baba oklarını tamamen gizle
   (mevcut ::before kurallarını geçersiz kılar)
   --------------------------- */
.parent-boxleft::before,
.parent-boxright::before {
  display: none !important;
  content: none !important;
}

/* Oklar için ayrılmış boşluğu sıfırla — foto alanına fazladan margin kalmasın */
:root {
  --parent-arrow-height: 0;
  --arrow-gap: 0;
}

/* photos-row altındaki ekstra boşluğu küçült (önceden arrow yüksekliğine göre ayarlanmıştı) */
.photos-row {
  margin-bottom: 18px !important; /* ihtiyaca göre 12-28px arasında ayarlayabilirsiniz */
}

/* parents-row üst boşluğunu normalleştir */
.parents-row {
  margin-top: 12px !important;
}
/* -------------------------
   Parent arrows — küçük, grandparent tarzı
   (anne & baba için arrow-left/right görsellerini kullanır)
   ------------------------- */

/* Değişkenler: grandparent ile uyumlu değerler */
:root{
  --parent-arrow-height: 68px;   /* küçük ok yüksekliği (grandparent ile eşleşir) */
  --parent-arrow-width: 45%;     /* foto kutusuna göre yüzde genişlik */
  --parent-arrow-max: 220px;     /* maksimum genişlik */
  --arrow-gap: 6px;              /* ok ile fotoğraf kutusu arasındaki boşluk */
}

/* Anne / Baba okları */


/* Hangi tarafta hangi ok görseli kullanılacak */
.parent-boxleft::before  { background-image: url('arrow-left.png')  !important; }
.parent-boxright::before { background-image: url('arrow-right.png') !important; }

/* Foto satırı / parent-row için boşluk ayarı (oklar görünsün diye yeterli üst/alt boşluk) */
.photos-row { margin-bottom: calc(var(--parent-arrow-height) + 12px) !important; }
.parents-row { margin-top: calc(var(--parent-arrow-height) / 2) !important; }

/* Mobilde küçültme (gerekirse daha da küçültebilirsin) */
@media (max-width: 700px) {
  :root{
    --parent-arrow-height: 54px;
    --parent-arrow-width: 48%;
    --parent-arrow-max: 160px;
    --arrow-gap: 4px;
  }
  .photos-row { margin-bottom: calc(var(--parent-arrow-height) + 10px) !important; }
}
@media (max-width: 420px) {
  :root{
    --parent-arrow-height: 40px;
    --parent-arrow-width: 52%;
    --parent-arrow-max: 140px;
    --arrow-gap: 3px;
  }
  .photos-row { margin-bottom: calc(var(--parent-arrow-height) + 8px) !important; }
}
/* === Parent arrows görünür yapma fix === */

/* 1) parents-row içindeki pseudo-elementlerin kırpılmasını engelle */
.parents-row {
  overflow: visible !important;   /* önceki overflow:hidden'i kaldırır */
}

/* 2) parent-box'ların kendisi de overflow:hidden ise kaldır (pseudo göstermek için) */
.parent-boxleft,
.parent-boxright {
  overflow: visible !important;
  min-width: 0;
  box-sizing: border-box;
}

/* 3) okların kesin görünmesini sağla (önceki display:none !important varsa geçersiz kılar) */
.parent-boxleft::before,
.parent-boxright::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: var(--parent-arrow-width, 45%) !important;
  max-width: var(--parent-arrow-max, 220px) !important;
  height: var(--parent-arrow-height, 68px) !important;
  top: calc(-1 * var(--parent-arrow-height, 68px) + (var(--arrow-gap, 6px) / 2)) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 80 !important; /* üstte görünsün */
  opacity: 1 !important;
}

/* 4) sol/sağ için doğru görselleri ata (dosyaların bulunduğu dizine göre yolu güncelle) */
.parent-boxleft::before  { background-image: url('arrow-left.png')  !important; }
.parent-boxright::before { background-image: url('arrow-right.png') !important; }

/* 5) photos-row altındaki boşluğu oklar için yeterli bırak */
.photos-row {
  margin-bottom: calc(var(--parent-arrow-height, 68px) + 12px) !important;
}
/* -------- Dynamic arrows (JS tarafından oluşturulan .dyn-arrow için) -------- */
.birdinfo-wrapper { position: relative; } /* parent for absolute arrows */

.dyn-arrow {
  position: absolute;
  left: 0; /* will be overridden by JS per-arrow */
  width: 64px;             /* arrow görselinin yatay genişliği (JS ile merkezlenecek) */
  max-width: 44vw;
  min-width: 36px;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%; /* arrow görselini yüksekliğe göre stretchle */
  pointer-events: none;
  z-index: 120;            /* fotoğrafların üstünde gözüksün */
  transform-origin: center top;
  will-change: top, height, left;
  opacity: 1;
  box-sizing: border-box;
}

/* left / right flavour (görsel yollarını JS kullanmazsa CSS fallback) */
.dyn-arrow.left  { background-image: url('arrow-left.png');  }
.dyn-arrow.right { background-image: url('arrow-right.png'); }

/* Küçük ekranlarda okun genişliğini kısıtla */
@media (max-width: 700px) {
  .dyn-arrow { width: 48px; min-width: 28px; max-width: 30vw; }
}
@media (max-width: 420px) {
  .dyn-arrow { width: 40px; min-width: 26px; max-width: 40vw; }
}
.parent-boxleft::before,
.parent-boxright::before,
.grand-boxleft::before,
.grand-boxright::before {
  display: none !important;
  content: none !important;
}
/* Dede/Nine kutucuklarını yukarı çek: hızlı çözüm */
.grandparents {
  margin-top: 6px !important; /* varsayılandan çok daha küçük boşluk */
  transform: translateY(18px); /* ekstra yukarı taşıma (opsiyonel) */
}
/* top-row: üç hücreli (sol - orta - sağ) yerleşim; butonlar normal akışta yer alır */
.top-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* sol boşluk, ortadaki buton, sağ boşluk */
  align-items: center;
  gap: 0px;
  width: 100%;
  margin-bottom: 18px;
  box-sizing: border-box;
}

/* BACK BUTTON: görünüşü tamamen korunuyor, fakat artık floating/absolute değil */
.back-button {
    /* position ve absolute/top/left kuralları silindi — stil aynen korundu */
    background-color: rgba(22, 160, 133, 0.7);
    color: #fff;
    font-size: 0.75em;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 10;

    /* akışta düzgün davranması için eklenenlar (görünüşe etki etmez) */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;          /* ALT ÇİZGİYİ KALDIRIR */
    -webkit-tap-highlight-color: transparent;
}

/* Home-butonu ortada durması için wrapper kullanılıyor */
.home-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Eğer anasayfa butonu için özel bir .home-wrapper .back-button kuralın varsa
   position/fixed içeren o kuralı sil veya aşağıdaki ile değiştir: */
.home-wrapper .back-button {
  /* sadece akışta ortalanmış görünüm — stil aynen korunur */
  background-color: rgba(22, 160, 133, 0.7);
  color: #fff;
  font-size: 0.7em;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Mobilde taşma/bozulma olmasın diye küçük ayar */
@media (max-width:520px){
  .top-row { grid-template-columns: auto 1fr auto; gap:80px; }
  .back-button { padding: 8px 14px; font-size: 0.72em; }
  .home-wrapper .back-button { padding: 8px 14px; font-size: 0.72em; }
}
/* ---------- Üst satır: geri butonu sol üst, anasayfa orta üst (örnek sayfadaki davranış) ---------- */
/* top-row konteyneri relative olmalı, böylece absolute butonlar ona göre konumlanır */
.top-row {
  display: flex;
  margin-bottom: 40px;
}

/* Geri buton: STİLİ tamamen aynı, yalnızca akıştan çıkarılıp sol üstte absolute konumlandırıldı */
.back-button {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(22, 160, 133, 0.7);
    color: #fff;
    font-size: 0.68em;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 10;

    /* alt çizgi kaldırma ve butonun inline görünmesi */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

/* Anasayfa butonu (orta üstte) - aynı stil, fakat fixed değil; top-row'a göre absolute */
.home-wrapper .back-button {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(22, 160, 133, 0.7);
  color: #fff;
  font-size: 0.70em;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1100;

  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Mobil uyumlu: butonlar çok genişse küçült */

/* --- Ayarlar (kolayca değiştir) --- */
:root{
  --bg: url('162d10fa-010a-4fd5-a366-957f06016ca7.jfif');
  --accent-green: rgba(22,160,133,0.85);
  --accent-green-70: rgba(22,160,133,0.7);
  --shadow: 0 6px 12px rgba(0,0,0,0.25);
  --max-width: 1000px;

  /* Parent (anne/baba) fotoğraflarının görsel ölçeği: 0.5 = yarı büyüklük */
  --parent-scale: 0.5;
}

/* --- Reset / temel --- */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg) no-repeat center center fixed;
  background-size: cover;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: #fff;
}

/* --- Konteyner --- */
.birdinfo-wrapper {
  width:94%;
  max-width:var(--max-width);
  margin:18px auto 60px;
  padding:12px;
}

/* --- Üst satır butonları --- */
.top-row { margin-bottom:18px; display:flex; align-items:center; gap:12px; }

/* --- Info box / grid --- */
.info-box.header-box { background: rgba(241,175,88,0.5); padding:10px; border-radius:12px; color:#000; box-shadow:var(--shadow); margin-bottom:16px; }
.info-grid { display:flex; flex-wrap:wrap; gap:2px 18px; }
.info-item { flex:1 1 220px; min-width:160px; background: rgba(255,255,255,0.03); color:#000; padding:0px; border-radius:8px; font-weight:600; }

/* --- Foto galerisi --- */
.photos-row {
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  margin-bottom:22px;
  align-items:start;
}
.photo-item { display:flex; flex-direction:column; align-items:center; min-width:0; }
.photo-caption {
  width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--accent-green); color:#fff; padding:8px 10px; border-radius:999px; font-weight:700;
  margin-bottom:8px; font-size:clamp(12px,1.6vw,16px);
}
.photo-frame {
  width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--accent-green-70); border:2px solid rgba(22,160,133,0.9); box-shadow:var(--shadow); cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.photo-frame img { width:100%; height:100%; object-fit:cover; display:block; }

/* overlay (JS tarafından kullanılıyor) */
.photo-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.75); z-index:9999; padding:18px; }
.photo-overlay .overlay-img{ max-width:94vw; max-height:88vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.6); }

/* --- Aile bölümü --- */
.family { margin-top:34px; display:flex; flex-direction:column; gap:20px; align-items:center; }

/* parents-row önemlisi: overflow visible, çünkü transform scale ile çizimler taşabilir */
.parents-row {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  position:relative;
  overflow: visible;  /* scaled parent foto kırpılmasın */
  box-sizing:border-box;
}

/* parent kutuları (anne/baba) */
.parent-boxleft, .parent-boxright {
  display:flex; flex-direction:column; align-items:center;
  width:48%; min-width:120px; position:relative; box-sizing:border-box;
  padding:0 6px;
}

/* Parent foto çerçevesi - KAPSAYICI olarak tam genişlik (boş alan korunur) */
.family-photo, .parent-photo {
  width:100%;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden; /* iç resim maskesi */
  background:var(--accent-green-70);
  border:4px solid rgba(22,160,133,0.1);
  box-shadow:var(--shadow);
  cursor:pointer;
  display:block;
  box-sizing:border-box;
  /* --- aşağıdaki satırlar parent fotoğrafının GÖRSEL küçülmesini sağlar --- */
  transform-origin: center center;
  transform: scale(var(--parent-scale));
  /* scaled halde ortalanmış gözükmesi için: */
  margin-left: auto;
  margin-right: auto;
  transition: transform .18s ease;
}

/* img içi normal davranış */
.family-photo img, .parent-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* captionlar */
.parent-caption, .grand-caption {
  margin-top:8px; width:100%; background:var(--accent-green); color:#fff; padding:8px; text-align:center; border-radius:8px;
  font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(11px,1.2vw,14px);
}

/* büyük ebeveynler (normal boyutta) */
.grandparents { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:8px; }
.grand-photo { width:100%; aspect-ratio:1/1; border-radius:8px; overflow:hidden; background:var(--accent-green-70); border:2px solid rgba(22,160,133,0.9); box-shadow:var(--shadow); cursor:pointer; }
.grand-photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* dyn-arrow (JS tarafından eklenecek) - basit fallback */
.dyn-arrow { position:absolute; pointer-events:none; background-repeat:no-repeat; background-position:center top; background-size:100% 100%; z-index:120; }

/* --- Responsive ince ayarlar --- */
@media (max-width:900px){
  :root { --max-width:820px; }
  .photo-caption{ font-size:clamp(11px,2.2vw,14px); }
  /* mobilde parentler çok küçük oluyorsa ölçek arttır */
  :root { --parent-scale: 0.75; }
}
@media (max-width:420px){
  :root { --parent-scale: 0.75; } /* küçük ekranda okunaklı olsun */
  .photos-row { gap:10px; }
  .grand-caption{ font-size:10px; }
}

/* Eğer tamamen farklı davranış istersen:
   - Görselin *kapsayıcı* genişliğini küçültmek istersen .parent-box* width değerini değiştir,
   - Görselin sadece içeriğini görsel olarak küçültmek istersen --parent-scale ile oyna.
*/
/* ---------- Parent caption eşleştirme + satır kaydırma (ekleme / override) ---------- */

/* Kontrollü değişkenler: ihtiyaca göre buradan ayarla */
:root{
  /* mevcut parent ölçeğinizi koru (ör. 0.5) */
  --parent-scale: 0.7;

  /* üst kaydırma miktarları (negatif: yukarı kaydırır). Ekran boyutuna göre responsive ayarlanacak) */
  --parents-vertical-shift: -48px;
  --grandparents-vertical-shift: -22px;
}

/* 1) Caption genişliğini görsel (scaled) frame ile eşleştir:
   - caption genişliği parent görselin *görsel* genişliği kadar (scale uygulamasıyla eşleşir)
   - ortalanmış (margin:auto) — böylece merkez kaymaz */
.parent-caption {
  /* Caption görsel genişliğine eşit: parent kapsayıcısının %'si * scale */
  width: calc(100% * var(--parent-scale));
  margin: 8px auto 0;       /* üst boşluk küçük bırakıldı, alt yok */
  box-sizing: border-box;
  display: block;
  text-align: center;
  /* görsel ile aynı köşe yuvarlama için isteğe bağlı küçük padding */
  padding-left: 6px;
  padding-right: 6px;
}

/* 2) Anne/baba satırını yukarı çek: parents-row'u negatif margin ile yukarı kaydır */
.parents-row {
  /* Varolan margin-top'u override et (sadece bu stil eklendiğinde etkili olacak) */
  margin-top: var(--parents-vertical-shift) !important;
  /* overflow visible zaten setli — scaled görsel taşması sorun olmayacak */
}

/* 3) Büyük ebeveyn satırını da yukarı çek */
.grandparents {
  margin-top: var(--grandparents-vertical-shift) !important;
  /* küçük görsel ince ayar için hafif translate (opsiyonel) */
  /* transform: translateY(calc(var(--grandparents-vertical-shift) / 2)); */
}

/* Foto satırı altındaki ekstra boşluğu azalt (parents yukarı kaydığı için) */
.photos-row {
  /* gerekiyorsa burayı azalt — mevcut hesaplamaları bozmayacak şekilde küçük bir azaltma */
  margin-bottom: 12px !important;
}

/* --- Responsive ince ayarlar: küçük ekranlarda kaydırmaları azalt --- */
@media (max-width:900px) {
  :root{
    --parents-vertical-shift: -26px;
    --grandparents-vertical-shift: -6px;
    /* küçük ekranda parent ölçeğini biraz arttırmak istersen burayı değiştir */
    /* --parent-scale: 0.65;  (zaten mevcut responsive kodunda ayarlanıyor olabilir) */
  }
  .parent-caption {
    width: calc(100% * var(--parent-scale));
  }
}

@media (max-width:420px){
  :root{
    --parents-vertical-shift: -18px;
    --grandparents-vertical-shift: -10px;
    /* küçük ekranda caption çok dar olmaması için scale'ı yükselt (isteğe bağlı) */
    /* --parent-scale: 0.85; */
  }
  .parent-caption { font-size: 0.7rem; }
  .grand-caption { font-size: 0.5rem; }
  .photos-row { margin-bottom: 50px !important; }
}
.parent-caption {
  margin-top: -15px; /* Fotoğrafa daha yakın */
}