/* Kişisel marka sayfası: kapak fotoğrafı ve ad, tek renk marka logoları, dört fotoğraflık galeri, sade kapanış. Apple sistem fontları. */
:root {
  --zemin: #F4F5F7; --yazi: #15161A; --soluk: #686B75; --cizgi: #DDDFE4; --vurgu: #3F5C8C;
  --uyari: #8A5A00; --uyari-acik: #FBF0D6;
  /* Logos are shown in one ink colour: dark on light, light on dark. */
  --logo-filtre: brightness(0); --logo-dolgu: grayscale(1) brightness(.4) contrast(1.4);
  --f-baslik: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-govde: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0F1013; --yazi: #ECEDEF; --soluk: #9A9DA8; --cizgi: #2A2C33; --vurgu: #9DB4DE;
    --uyari: #F0C25A; --uyari-acik: #3A2F14;
    --logo-filtre: brightness(0) invert(1); --logo-dolgu: grayscale(1) brightness(1.6) contrast(1.1);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font: 17px/1.5 var(--f-govde); letter-spacing: -.016em; -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 4px; }
h1, h2 { font-family: var(--f-baslik); margin: 0; text-wrap: balance; }

.taslak {
  background: var(--uyari-acik); color: var(--uyari); text-align: center; font: 600 13.5px/1.4 var(--f-govde);
  padding: calc(9px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 9px max(16px, env(safe-area-inset-left, 0px));
}

.kahraman {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 56px max(20px, env(safe-area-inset-right, 0px)) 64px max(20px, env(safe-area-inset-left, 0px));
}
.k-metin { display: grid; gap: 20px; justify-items: start; }
h1 { font-size: clamp(48px, 7vw, 96px); font-weight: 700; line-height: .95; letter-spacing: -.045em; }
.k-alt { margin: 0; font-size: clamp(19px, 2vw, 22px); line-height: 1.4; color: var(--soluk); letter-spacing: -.02em; }
.k-rakam { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 8px 0 4px; }
.k-rakam div { display: flex; flex-direction: column-reverse; gap: 4px; }
.k-rakam dt { font-size: 13.5px; color: var(--soluk); }
.k-rakam dd { margin: 0; font: 700 34px/1 var(--f-baslik); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.sosyal { display: flex; gap: 20px; }
.sosyal a { font-weight: 600; text-decoration: none; color: var(--vurgu); }
.sosyal a:hover { text-decoration: underline; }
.k-gorsel { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; width: 100%; }
.k-gorsel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* Logo şeridi */
.markalar {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 28px;
  padding: 8px max(20px, env(safe-area-inset-right, 0px)) 72px max(20px, env(safe-area-inset-left, 0px));
}
.markalar h2 { font: 600 13px/1.3 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); text-align: center; }
.ipucu { margin: -16px 0 0; text-align: center; font-size: 14px; color: var(--soluk); }

/* Akan logo şeridi: yatay kaydırılabilen bir satır. akis.js listeyi ikinci kez yazar ve şeridi yavaşça kaydırır;
   ilk liste bitince fark edilmeden başa sarar. Parmakla, trackpad'le ya da klavyeyle de kaydırılabilir. */
.akis {
  display: flex; overflow-x: auto; overflow-y: hidden; border-block: 1px solid var(--cizgi); padding: 26px 0;
  scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.akis::-webkit-scrollbar { display: none; }
.serit { list-style: none; margin: 0; padding: 0; display: flex; flex: none; align-items: center; }
.serit.kopya { display: none; }
.akis.hazir .serit.kopya { display: flex; }
.serit li { flex: none; width: 168px; height: 64px; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.serit a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 12px; }
.serit img { max-height: 30px; max-width: 100%; width: auto; filter: var(--logo-filtre); opacity: .78; transition: filter .25s, opacity .25s; }
.serit img.genis { max-height: 22px; }
.serit img.yuksek { max-height: 46px; }
.serit img.buyuk { max-height: 64px; }
.serit img.dolgulu { filter: var(--logo-dolgu); opacity: .85; }
/* Açık zeminli rozet (Lipton): sarıyı açık griye, kırmızı yazıyı koyuya çeker. */
.serit img.acik-rozet { filter: grayscale(1) contrast(2.2) brightness(.95); opacity: .85; }
/* Logonun kendi rengi, fareyle üzerine gelince ya da klavyeyle seçilince. Dokunmatik ekranda dokunulan logo renkli kalmasın. */
.serit a:focus-visible img { filter: none; opacity: 1; }
@media (hover: hover) { .serit a:hover img { filter: none; opacity: 1; } }
/* Hareket azaltılmışsa şerit durur ve tüm logolar alt alta sarılır. */
@media (prefers-reduced-motion: reduce) {
  .akis { overflow: visible; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .serit { flex: auto; flex-wrap: wrap; justify-content: center; }
}

.galeri {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px));
}
.galeri img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: 18px; }
.galeri img.alt { object-position: 50% 72%; }

.son {
  max-width: 1180px; margin: 72px auto 0; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--cizgi);
  padding: 28px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px));
}
.imza { font: 600 17px/1.2 var(--f-baslik); letter-spacing: -.02em; }
.son nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.son nav a { color: var(--soluk); text-decoration: none; font-size: 15px; }
.son nav a:hover { color: var(--yazi); }

@media (max-width: 820px) {
  .kahraman { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; padding-bottom: 48px; }
  .k-gorsel { order: -1; border-radius: 22px; }
  .galeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .serit li { width: 132px; height: 56px; padding: 0 14px; }
  .serit img { max-height: 26px; }
  .serit img.genis { max-height: 18px; }
  .serit img.yuksek { max-height: 40px; }
  .serit img.buyuk { max-height: 56px; }
  .markalar { padding-bottom: 48px; }
}