/* ======================================================================
   MainStyle.css — Temiz, derli toplu stil dosyası
   - Header büyütüldü; header-box ile içindeki .selim-dogan arasında
     daha fazla padding eklendi (responsive).
   - Arama kutusu ve arama butonu birleşik, yükseklik değişkeniyle kontrol.
   - Yıl butonları responsive grid: geniş ekranda 3x2, dar ekranda 2x3.
   - Contact kutusu daraltıldı.
   - Taşma/overflow kontrolleri ve responsive font ölçeklemeleri içerir.
   ====================================================================== */

/* ========== Değişkenler ========== */
:root {
  --bg-image: url('162d10fa-010a-4fd5-a366-957f06016ca7.jfif');
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --accent-green: rgba(22,160,133,0.85);
  --accent-green-70: rgba(22,160,133,0.7);
  --accent-yellow-50: rgba(241,175,88,0.5);

  --card-radius: 12px;
  --year-gap: 14px;
  --year-min: 100px;
  --search-height: 64px;          /* arama butonu yüksekliği (kolayca ayarlanır) */
  --search-radius: 50px;
  --container-max: 1200px;
  --contact-max: 520px;

  --shadow-1: 0 6px 12px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.18);
}

/* ========== Reset & Temel ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-x: hidden; /* yatay taşmaları gizle (ancak ideal çözüm taşmayı kökten engellemek) */
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== Body & Container ========== */
body {
  color: #fff;
  background: var(--bg-image) no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding-top: 50px;
}

.container {
  width: 94%;
  max-width: var(--container-max);
  padding: 18px;
  margin: 0 auto;
}

/* ========== Header ========== */
/* header-box: daha büyük, iç padding responsive — özellikle .selim-dogan ile
   header-box arasındaki padding artırıldı (isteğe göre değiştirilebilir) */
.header-box {
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 12px auto;
  background-color: var(--accent-yellow-50);
  /* responsive padding: büyük ekranlarda büyük boşluk, küçük ekranda küçülür */
  padding: clamp(28px, 6.5vw, 100px) 28px; /* *BURADA padding üst-alt büyük* */
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  box-sizing: border-box;
}

/* header h1 (satırların sıkılığı ve genel ölçek) */
header h1 {
  margin: 0;
  line-height: 0.95;  /* satırlar birbirine yakın */
  text-align: center;
  font-size: clamp(28px, 5.6vw, 64px);
}

/* Selim Doğan — 2x büyütülmüş ve daha belirgin;
   transform kullanılmadı (daha stabil), padding ile aralık kontrolü header-box'ta yapıldı */
.selim-dogan {
  font-family: 'Great Vibes', cursive;
  display: block;
  color: #000 !important;
  /* büyük ekran için çok daha büyük, küçük ekranları clamp ile sınırla */
  font-size: clamp(3.2rem, 9.6vw, 6.4rem); /* istediğin orana göre ayarla */
  line-height: 0.95;
  margin: 0;
  padding-top: 8px;   /* içte küçük boşluk */
  /* Eğer ekstra boşluk istersen header-box padding'ini artır; bu satır iç boşluk içindir */
}

/* Show Jumbo Üretim — 2x büyütülmüş, siyah renk */
.show-jumbo-uretim {
  font-family: "Aptos Narrow", "Aptos", "Segoe UI", "Arial Narrow", Arial, sans-serif;
  display: block;
  color: #000 !important;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1;
  margin: 0;
  padding-top: 5px;
}


/* Mobil uyum: header-box küçüldüğünde padding azalt */
@media (max-width: 600px) {
  .header-box { padding: 18px 9px; }
  .selim-dogan { font-size: clamp(1.8rem, 12vw, 3.6rem); }
  .show-jumbo-uretim { font-size: clamp(1rem, 2vw, 1.5rem); }
}

/* ========== Arama (input + buton birleşimi) ========== */
.search-row { display:flex; justify-content:center; margin-bottom:20px; }

.search-box {
  display:flex;
  align-items: stretch;
  gap: 0;                      /* kesinlikle yapışık */
  width: 100%;
  max-width: 680px;
  height: var(--search-height);
  margin: 0 auto;
  box-sizing: border-box;
}

/* input — responsive font ve tam yüksekliğe uyum */
.search-input {
  flex: 1 1 auto;
  height: 70%;
  padding: 0 20px;
  border: 2px solid rgba(0,0,0,0.5);
  border-right: none;
  border-radius: var(--search-radius) 0 0 var(--search-radius);
  background-color: rgba(0,0,0,0.95);
  color: #333;
  font-size: clamp(9.8px, 1.8vw, 10px); /* ekran küçüldükçe metin küçülsün */
  outline: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  min-width: 0;
  box-sizing: border-box;
}

/* arama butonu — sol kenarı düz, sağ kenar kavisli */
.search-button.year-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 70%;
  padding: 0 22px;
  border-radius: 0 var(--search-radius) var(--search-radius) 0;
  border: 2px solid rgba(0,0,0,0.12);
  border-left: none;
  background-color: var(--accent-green-70);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  min-width: 72px;
  box-sizing: border-box;
}
.search-button.year-box > * { pointer-events: none; }

/* erişilebilirlik focus */
.search-box:focus-within { box-shadow: 0 8px 20px rgba(0,0,0,0.18); border-radius: var(--search-radius); }
.search-input:focus { box-shadow: 0 6px 14px rgba(22,160,133,0.18); }

/* ========== Yıl Butonları (eşit boyutlu ve responsive grid) ========== */
/* grid: geniş ekranda 3 sütun x 2 satır, orta/dar ekranda 2 sütun x 3 satır */
.year-boxes {
  display: grid;
  gap: var(--year-gap);
  justify-content: center;
  align-items: stretch;
  width: 80%;
  max-width: 920px;
  margin: 0 auto 36px auto;
  grid-template-columns: repeat(3, minmax(var(--year-min), 1fr)); /* default 3 sütun */
}

/* buton stili — her zaman eşit, içerik ortalanmış */
.year-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 15vw, 32px);
  background-color: var(--accent-green-70);
  border-radius: 10px;
  color: #fff !important;
  font-weight: 1000;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-2);
  min-width: 0px;
  box-sizing: border-box;
}

/* hover */
.year-box:hover { background-color: var(--accent-green); transform: translateY(-3px); }

/* dar ekranda otomatik 2 sütuna geç */
@media (max-width: 700px) {
  .year-boxes { grid-template-columns: repeat(2, minmax(var(--year-min), 1fr)); }
  .year-box { height: 52px; font-size: clamp(24px, 15vw, 32px); }
}

/* çok dar ekranlarda hafif ayar */
@media (max-width: 420px) {
  .year-boxes { gap: 10px; }
  .year-box { height: 48px; font-size: 18px; padding: 0 10px; }
}

/* ========== Contact (daraltılmış) ========== */
.contact-section {
  background-color: rgba(0,0,0,0.6);
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-2);
  width: 100%;
  max-width: var(--contact-max);
  margin: 18px auto 0 auto;
}

.contact-section h2 { font-size: 1rem; margin: 0 0 6px 0; }
.contact-section p { margin: 8px 0; line-height: 1.4; font-size: 0.95rem; }

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.contact-link:hover { background: rgba(255,255,255,0.04); transform: translateY(-2px); }

/* ========== Utility / Taşma Önleme ========== */
/* flex/grid çocuklarının küçülmesine izin */
.search-box *, .year-box, .photo-card, .photo-frame { min-width: 0; }

/* metin taşmalarını önle */
.year-box, .contact-section, .photo-caption, .search-input { word-break: break-word; overflow-wrap: anywhere; }

/* responsive yazı ölçekleri (genel) */
:root { --base-font: clamp(14px, 1.8vw, 16px); }
body { font-size: var(--base-font); }

/* küçük ekran optimizasyonları */
@media (max-width: 360px) {
  :root { --search-height: 52px; }
  header h1 { font-size: 1.6rem; }
  .search-box { max-width: calc(100% - 20px); }
  .contact-section { padding: 8px 10px; width: calc(100% - 20px); }
}

/* ========== Ek görsel ince ayarlar ========== */
a.year-box, a.year-box:link, a.year-box:visited { color: #fff; text-decoration: none; }
/* SEARCH INPUT: responsive font + sıkıştırma; placeholder da ölçeklenir */
.search-input {
  /* responsive font: dar ekranda küçülür, geniş ekranda okunaklı kalır */
  font-size: clamp(12px, 2.2vw, 16px);
  line-height: 1;
  letter-spacing: -0.02em;        /* harf aralığını biraz azaltarak sığmayı iyileştirir */
  height: 100%;
  padding: 0 12px;               /* padding biraz azaltıldı (placeholder daha çok sığsın) */
  border: 2px solid rgba(0,0,0,0.12);
  border-right: none;
  border-radius: var(--search-radius) 0 0 var(--search-radius);
  background-color: rgba(255,255,255,0.95);
  color: #333;
  outline: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap;           /* placeholder tek satırda kalsın */
  overflow: hidden;              /* taşan kısmı gizle (JS ile kısaltma yapılacak) */
  text-overflow: clip;
}

/* Placeholder stil: biraz daha ufak, opak, responsive */
.search-input::placeholder {
  font-size: clamp(11px, 2.0vw, 14px);
  color: rgba(51,51,51,0.7);
  opacity: 1;                    /* opaklığı kontrol et */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;       /* güvenlik olarak ellipsis uygula (JS ile tamamen görünür yapılır) */
}

/* Çok dar ekranlarda (yine güvenlik) */
@media (max-width: 360px) {
  .search-input { font-size: 11px; padding: 0 8px; }
  .search-input::placeholder { font-size: 10px; }
}
/* --- Tek kaynak: wrapper yüksekliği --- */
.search-box {
  display: flex;
  align-items: stretch;            /* çocuklar wrapper yüksekliğini alır */
  gap: 0;
  width: 100%;
  max-width: 680px;
  height: var(--search-height);    /* burayı değiştirerek tüm kontrolün yüksekliğini ayarlarsın */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Input ve buton aynı yükseklikte olacak şekilde %100 */
.search-input,
.search-button.year-box {
  height: 100%;                    /* wrapper yüksekliğini tamamen doldurur */
  box-sizing: border-box;          /* border ve padding yüksekliğe dahil olur */
  border-width: 2px;
  border-style: solid;
}

/* Input: sadece yatay padding bırak (dikey padding = 0) */
.search-input {
  flex: 1 1 auto;
  padding: 0 14px;                 /* dikey padding = 0 -> yükseklik sabit kalır */
  border-color: rgba(0,0,0,0.12);
  border-right: none;
  border-radius: var(--search-radius) 0 0 var(--search-radius);
  font-size: clamp(12px, 2.2vw, 16px);
  background-color: rgba(255,255,255,0.95);
  color: #333;
  outline: none;

  /* mobil tarayıcılarda input ek stil farklarını azalt */
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;                  /* dikey hizalama stabil olsun */
}

/* Buton: yatay padding, dikey padding 0 */
.search-button.year-box {
  padding: 0 18px;                 /* yatay boşluk */
  border-left: none;               /* input ile birleşik kenar düz olsun */
  border-color: rgba(0,0,0,0.12);
  border-radius: 0 var(--search-radius) var(--search-radius) 0;
  background-color: var(--accent-green);
  color: #fff;
  font-weight: 700;
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}

/* İçerik (ikon/metin) dikey ortalansın */
.search-button.year-box > * { pointer-events: none; }

/* Focus görsellik */
.search-box:focus-within { box-shadow: 0 8px 20px rgba(0,0,0,0.18); border-radius: var(--search-radius); }

/* Çok küçük ekranlarda wrapper yüksekliğini küçült (isteğe bağlı) */
@media (max-width: 360px) {
  :root { --search-height: 52px; } /* otomatik küçülme */
}
:root {
  --bg-image: url('162d10fa-010a-4fd5-a366-957f06016ca7.jfif');
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --accent-green: rgba(22,160,133,0.85);
  --accent-green-70: rgba(22,160,133,0.7);
  --accent-yellow-50: rgba(241,175,88,0.5);

  --card-radius: 12px;
  --year-gap: 14px;
  --year-min: 100px;
  --search-height: 56px;          /* -> KÜÇÜLTÜM (eski 64px) */
  --search-radius: 50px;
  --container-max: 1200px;

  /* iletişim kutusunu %20 küçülttük: 520px * 0.8 = 416px */
  --contact-max: 416px;

  --shadow-1: 0 6px 12px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.18);
}

/* ... (diğer genel kurallar aynı kalır) ... */

/* --- Arama wrapper: yüksekliği tek noktadan kontrol et --- */
.search-box {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  max-width: 680px;
  height: var(--search-height);    /* global küçültülmüş yükseklik kullanılır */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Input ve buton aynı piksel yüksekliğe uyar */
.search-input,
.search-button.year-box {
  height: 100%;
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
}

/* INPUT: placeholder'ı sığdırmak için daha küçük, responsive font ve daha dar paddings */
.search-input {
  flex: 1 1 auto;
  padding: 0 10px;                 /* yatay padding azaltıldı */
  border-color: rgba(0,0,0,0.12);
  border-right: none;
  border-radius: var(--search-radius) 0 0 var(--search-radius);
  background-color: rgba(255,255,255,0.95);
  color: #333;

  /* placeholder'ın her çözünürlükte sığması için clamp ile sınırla */
  font-size: clamp(12px, 1.6vw, 14px);
  line-height: 1;
  letter-spacing: -0.01em;         /* biraz sıkıştır */
  outline: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  min-width: 0;
  white-space: nowrap;             /* tek satırda tut */
  overflow: hidden;                /* taşan kısmı gizle (JS ile kısaltma yapılacak) */
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder stil: responsive ve kısa görünmesi için */
.search-input::placeholder {
  font-size: clamp(11px, 1.5vw, 13px);
  color: rgba(51,51,51,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buton: dikey padding yok, sadece yatay */
.search-button.year-box {
  padding: 0 16px;
  border-left: none;
  border-color: rgba(0,0,0,0.12);
  border-radius: 0 var(--search-radius) var(--search-radius) 0;
  background-color: var(--accent-green);
  color: #fff;
  font-weight: 700;
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}

/* Çok dar ekranlar için alternatif küçültmeler (güvenlik) */
@media (max-width: 420px) {
  :root { --search-height: 48px; }
  .search-box { max-width: calc(100% - 20px); }
  .search-input { padding: 0 8px; font-size: 12px; }
  .search-button.year-box { padding: 0 12px; min-width: 56px; }
}

/* --- Contact kutusu genişliği azaltıldı (variable değişti) --- */
/* Contact kutusunu ekranla orantılı küçült (genişlik + padding) */
.contact-section {
  background-color: rgba(0,0,0,0.6);
  padding: clamp(8px, 1.6vw, 14px);     /* padding ekranla beraber küçülür/büyür */
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-2);
  width: clamp(220px, 30vw, 520px);     /* min 220px, ideal 30vw, max 520px */
  margin: 18px auto 0;
  transition: width .18s ease, padding .18s ease, font-size .12s ease;
  box-sizing: border-box;
}

/* Başlık ve paragrafların boyutu, kutu/ekranla beraber küçülsün */
.contact-section h2 {
  font-size: clamp(13px, 1.6vw, 18px);  /* küçükten büyüğe otomatik */
  margin: 0 0 6px 0;
}

.contact-section p {
  font-size: clamp(12px, 1.2vw, 15px);
  margin: 6px 0;
  line-height: 1.35;
}

/* Linkler içinde emoji vb. varsa daha küçük ekranlarda dar yerleştirme */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.2vw, 14px);
  padding: clamp(4px, 0.8vw, 8px);
}


/* MainStyle.css
   Güncellenmiş: Arama alanı (select + input + button) uyumu ve stil düzeltmeleri
*/

/* ========== Değişkenler ========== */
:root{
  --bg-image: url('162d10fa-010a-4fd5-a366-957f06016ca7.jfif');
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --accent-green: rgba(22,160,133,0.85);
  --accent-green-70: rgba(22,160,133,0.7); /* Yıl butonları ve arama butonu için */
  --accent-yellow-50: rgba(241,175,88,0.5);

  --card-radius: 12px;
  --year-gap: 14px;
  --year-min: 100px;

  /* Arama alanı yüksekliği (tek noktadan kontrol). Bütün elemanlar bu yüksekliği kullanır */
  --search-height: 52px;

  --search-radius: 12px; /* global radius (kısmi kullanacağız) */

  --container-max: 1200px;
  --contact-max: 416px;

  --shadow-1: 0 6px 12px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 10px rgba(0,0,0,0.18);
}

/* ========== Reset & Temel ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-width: 0;
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Body arka planı vs. */
body {
  color: #fff;
  background: var(--bg-image) no-repeat center center fixed;
  background-size: cover;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  min-height:100vh;
  padding-top:50px;
}

/* Container */
.container {
  width:94%;
  max-width:var(--container-max);
  padding:18px;
  margin:0 auto;
}

/* Header (basit tutuldu; isteğe göre daha önceki header stillerini ekleyebilirsiniz) */
.header-box {
  width:100%;
  margin:0 auto 12px auto;
  background-color: var(--accent-yellow-50);
  padding: clamp(18px, 6.5vw, 80px) 24px;
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  box-sizing: border-box;
}
header h1 { margin:0; text-align:center; }

/* ========== ARAMA SATIRI - select + input + button ========== */
.search-row { display:flex; justify-content:center; padding:8px 0; margin-bottom:18px; }

/* Wrapper: hiçbir gap olmadan, elemanlar birleşik olacak */
.search-box {
  display:flex;
  align-items:center;
  gap:0;                        /* tamamen yapışık */
  width:100%;
  max-width:920px;
  box-sizing:border-box;
  /* yükseklik wrapper yerine elemanların %100 almasıyla sağlanır */
}

/* Ortak yükseklik — her eleman aynı yüksekliği alacak */
.search-box > * {
  height: var(--search-height);
  box-sizing: border-box;
  margin: 0;
}

/* Yıl combobox (solda) - sol köşeleri yuvarlak, sağ köşeleri DÜZ */
.year-select {
  -webkit-appearance: none;
  appearance: none;
  padding: 10px 12px;
  border: 2px solid rgba(0,0,0,0.12);
  border-right: none;                     /* ortadaki elemanla birleşim için sağ kenar kaldırıldı */
  background: rgba(255,255,255,0.95);
  color: #222;
  font-size: 15px;
  flex: 0 0 120px;                        /* sabit/belirli genişlik; gerekirse değiştirin */
  min-width: 80px;
  border-radius: var(--search-radius) 0 0 var(--search-radius); /* sağ köşeler düz */
  outline: none;
}

/* Numara input (ortada) - tüm köşeleri düz */
.num-input {
  padding: 10px 12px;
  border: 2px solid rgba(0,0,0,0.12);                    /* birleşimlerde çift kenar olmaması için */
  border-right: none;                     /* sağ ve sol düz olsun */
  background: rgba(255,255,255,0.95);
  color: #222;
  font-size: 15px;
  flex: 1 1 auto;                         /* kalan alanı kaplasın */
  min-width: 80px;
  border-radius: 0;                       /* tüm köşeleri düz */
  outline: none;
}

/* Ara butonu (sağda) - sol köşeleri düz, sağ köşeleri yuvarlak
   RENGİ yıl butonlarıyla aynı şeffaflıkta (var(--accent-green-70)) */
.search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;                        /* daraltıldı */
  border: 2px solid rgba(0,0,0,0.12);
  border-left: none;                      /* ortadaki input ile birleşim */
  background-color: var(--accent-green-70);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 64px;                        /* daraltılmış min genişlik */
  height: var(--search-height);
  border-radius: 0 var(--search-radius) var(--search-radius) 0; /* sol köşeler düz */
  box-shadow: none;
  white-space: nowrap;
}

/* Hover / aktif efekt (hafif koyulaşma) */
.search-button:hover { background-color: var(--accent-green); transform: translateY(-2px); }

/* Focus görseli bütün grubun etrafında olsun */
.search-box:focus-within { box-shadow: 0 8px 20px rgba(0,0,0,0.12); border-radius: var(--search-radius); }

/* Placeholder ve input davranışları (taşma kontrolü) */
.year-select, .num-input { overflow: hidden; text-overflow: ellipsis; }

/* Mobil küçük ekranlar için ince ayar */
@media (max-width: 420px) {
  :root { --search-height: 44px; } /* yükseklik biraz küçülsün */
  .year-select { padding: 8px 10px; font-size:13px; flex-basis: 96px; }
  .num-input { padding: 8px 10px; font-size:13px; }
  .search-button { padding: 0 10px; min-width: 56px; font-size:13px; }
}

/* Çok küçük ekran (güvenlik) */
@media (max-width: 340px) {
  :root { --search-height: 40px; }
  .year-select { flex-basis: 80px; }
  .search-button { min-width: 48px; padding: 0 8px; }
}

/* ========== Yıl Butonları (grid) ========== */
.year-boxes {
  display: grid;
  gap: var(--year-gap);
  justify-content:center;
  width:80%;
  max-width:920px;
  margin:0 auto 24px auto;
  grid-template-columns: repeat(3, minmax(var(--year-min), 1fr));
}

.year-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(24px, 15vw, 12px);
  background-color: var(--accent-green-70);
  border-radius: 10px;
  color: #fff !important;
  font-weight: 900;
  text-decoration:none;
  box-shadow: var(--shadow-2);
  min-width:0;
  padding: 8px 6px;
}
.year-box:hover { background-color: var(--accent-green); transform: translateY(3px); }

@media (max-width:700px) { .year-boxes { grid-template-columns: repeat(2, minmax(var(--year-min), 1fr)); } }

/* ========== Contact alanı ========== */
.contact-section {
  background-color: rgba(0,0,0,0.6);
  padding: clamp(8px, 1.6vw, 14px);
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-2);
  width: clamp(220px, 30vw, var(--contact-max));
  margin: 18px auto 0 auto;
}

/* Yardımcı: taşma önleme */
.search-box *, .year-box, .photo-card, .photo-frame { min-width: 0; }
.year-box, .contact-section, .photo-caption, .search-box { word-break: break-word; overflow-wrap: anywhere; }