/*
 * Sedat Şahin — kişisel site
 *
 * TASARIM YÖNÜ: editöryel. Hazır şablon hissi vermemesi için üç karar:
 *   1) Başlıklar serif, gövde sans — dergi sayfası gibi okunsun.
 *   2) Gölge yerine ince çizgi (hairline) — "bootstrap kartı" görüntüsü
 *      en çok gölgeden geliyor.
 *   3) Tek sıcak vurgu rengi (kiremit). Her yerde mavi kullanılıyor;
 *      sıcak bir ton siteyi kendi kimliğine oturtuyor.
 *
 * RENKLER DEĞİŞKENDE: açık ve koyu tema aynı değişkenleri yeniden
 * tanımlar. Böylece her kuralı iki kez yazmak gerekmez ve bir rengi
 * değiştirmek tek satırla olur.
 */

/* ── Renk ve ölçü değişkenleri ───────────────────────────────── */

:root {
  /* Açık tema */
  --zemin: #fbfaf7;
  --zemin-2: #f3f1ec;
  --yazi: #1a1815;
  --yazi-soluk: #5c574f;
  --yazi-silik: #8a847a;
  --cizgi: #e2ded6;
  --vurgu: #b4451f;
  --vurgu-zemin: #fdf0ea;

  /* Tipografi ölçeği — 1.25 oranlı, mobilde biraz sıkışık */
  --olcek-xs: 0.78rem;
  --olcek-sm: 0.89rem;
  --olcek-md: 1rem;
  --olcek-lg: 1.2rem;
  --olcek-xl: 1.6rem;
  --olcek-2xl: 2.1rem;
  --olcek-3xl: 2.9rem;

  --genislik: 72rem;
  --bosluk-bolum: 5.5rem;
  --kose: 10px;

  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Koyu tema — kullanıcı tercihine göre kendiliğinden,
   ya da sayfadaki düğmeyle elle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --zemin: #13110f;
    --zemin-2: #1c1917;
    --yazi: #f2efe9;
    --yazi-soluk: #b5afa4;
    --yazi-silik: #857f74;
    --cizgi: #2e2a26;
    --vurgu: #e4703f;
    --vurgu-zemin: #2a1a12;
  }
}

:root[data-tema="koyu"] {
  --zemin: #13110f;
  --zemin-2: #1c1917;
  --yazi: #f2efe9;
  --yazi-soluk: #b5afa4;
  --yazi-silik: #857f74;
  --cizgi: #2e2a26;
  --vurgu: #e4703f;
  --vurgu-zemin: #2a1a12;
}

@media (min-width: 48rem) {
  :root {
    --olcek-2xl: 2.6rem;
    --olcek-3xl: 4.2rem;
    --bosluk-bolum: 8rem;
  }
}

/* ── Temel ────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sabit başlık altında kalan bölümler için pay */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--sans);
  font-size: var(--olcek-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Klavyeyle gezenler için görünür odak — erişilebilirliğin en
   çok atlanan parçası. */
:focus-visible {
  outline: 2.5px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Ekran okuyucuya özel; gözle görünmez ama okunur. */
.gizli-metin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Klavyeyle gelen ziyaretçi menüyü atlayıp içeriğe gidebilsin. */
.atla {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--vurgu);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--kose) 0;
}
.atla:focus {
  left: 0;
}

.kap {
  width: 100%;
  max-width: var(--genislik);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
  .kap {
    padding-inline: 2.5rem;
  }
}

/* ── Üst çubuk ────────────────────────────────────────────────── */

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4rem;
}

.marka {
  font-family: var(--serif);
  font-size: var(--olcek-lg);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.menu {
  display: none;
  gap: 1.75rem;
  align-items: center;
}

.menu a {
  text-decoration: none;
  font-size: var(--olcek-sm);
  color: var(--yazi-soluk);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.18s;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--vurgu);
  transition: right 0.22s ease;
}

.menu a:hover {
  color: var(--yazi);
}
.menu a:hover::after {
  right: 0;
}

@media (min-width: 56rem) {
  .menu {
    display: flex;
  }
}

.ust-sag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ikon-dugme {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: transparent;
  color: var(--yazi-soluk);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}

.ikon-dugme:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

.menu-ac {
  display: grid;
}
@media (min-width: 56rem) {
  .menu-ac {
    display: none;
  }
}

/* Mobil menü — açıldığında tam genişlik, dokunması kolay satırlar */
.mobil-menu {
  display: none;
  border-top: 1px solid var(--cizgi);
  background: var(--zemin);
}
.mobil-menu[data-acik="evet"] {
  display: block;
}
.mobil-menu a {
  display: block;
  padding: 0.95rem 0;
  text-decoration: none;
  color: var(--yazi-soluk);
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--olcek-md);
}
.mobil-menu a:last-child {
  border-bottom: 0;
}
@media (min-width: 56rem) {
  .mobil-menu {
    display: none !important;
  }
}

/* ── Hero ─────────────────────────────────────────────────────── */

.hero {
  padding-block: 4rem 3.5rem;
  border-bottom: 1px solid var(--cizgi);
}

@media (min-width: 48rem) {
  .hero {
    padding-block: 7rem 6rem;
  }
}

.hero-ic {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Asimetrik yerleşim: metin geniş, fotoğraf dar. Simetrik ikiye
   bölmek şablon hissi veriyor. */
@media (min-width: 56rem) {
  .hero-ic {
    grid-template-columns: 1.55fr 1fr;
    gap: 4.5rem;
  }
}

.hero-etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--olcek-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yazi-silik);
  margin-bottom: 1.4rem;
}

.hero-etiket::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--vurgu);
}

.hero h1 {
  font-size: var(--olcek-3xl);
  margin-bottom: 1.2rem;
}

.hero p {
  font-size: var(--olcek-lg);
  color: var(--yazi-soluk);
  max-width: 34rem;
  margin: 0 0 2.2rem;
  line-height: 1.6;
}

.dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--kose);
  text-decoration: none;
  font-size: var(--olcek-sm);
  font-weight: 600;
  border: 1px solid var(--cizgi);
  color: var(--yazi);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}

.dugme:hover {
  border-color: var(--vurgu);
  transform: translateY(-1px);
}

.dugme-dolu {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #fff;
}

.dugme-dolu:hover {
  background: color-mix(in srgb, var(--vurgu) 88%, #000);
}

/* Portre — hafif döndürülmüş çerçeve, "stok fotoğraf" hissini kırıyor */
.portre {
  position: relative;
  /* width ŞART: bu kutu bir ızgara öğesi ve margin-inline:auto taşıyor.
     Izgara/flex düzeninde otomatik kenar boşluğu esnemeyi iptal eder,
     kutu içeriğine göre büzülür — içindeki %100 genişlik de tanımsız bir
     ölçüye bakıp küçücük kalır. Açık genişlik bunu keser. */
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
}

.portre::before {
  content: "";
  position: absolute;
  inset: -0.7rem;
  border: 1px solid var(--vurgu);
  border-radius: var(--kose);
  transform: rotate(-2.2deg);
  opacity: 0.5;
}

.portre img,
.portre .bos {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--kose);
  background: var(--zemin-2);
}

.portre .bos {
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 3.6rem;
  color: var(--vurgu);
  border: 1px solid var(--cizgi);
}

/* ── Bölüm başlıkları ─────────────────────────────────────────── */

.bolum {
  padding-block: var(--bosluk-bolum);
  border-bottom: 1px solid var(--cizgi);
}

.bolum-bas {
  margin-bottom: 2.8rem;
  max-width: 44rem;
}

.bolum-etiket {
  display: block;
  font-size: var(--olcek-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vurgu);
  margin-bottom: 0.8rem;
}

.bolum-bas h2 {
  font-size: var(--olcek-2xl);
  margin-bottom: 0.7rem;
}

.bolum-bas p {
  color: var(--yazi-soluk);
  margin: 0;
}

/* ── Izgara ve kartlar ────────────────────────────────────────── */

.izgara {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .izgara-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 56rem) {
  .izgara-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .izgara-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 40rem) {
  .izgara-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.kart {
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: 1.5rem;
  background: var(--zemin);
  transition: border-color 0.2s, transform 0.2s;
}

a.kart {
  text-decoration: none;
  display: block;
}

a.kart:hover {
  border-color: var(--vurgu);
  transform: translateY(-2px);
}

.kart h3 {
  font-size: var(--olcek-lg);
  margin-bottom: 0.5rem;
}

.kart p {
  color: var(--yazi-soluk);
  font-size: var(--olcek-sm);
  margin: 0;
}

/* Uzmanlık kartları — numaralı, editöryel his */
.uzmanlik {
  counter-increment: uz;
  position: relative;
  /* Numara ile başlık arasında nefes payı; 2.4rem'de serif başlığın
     üst uzantıları numaraya değiyordu. */
  padding-top: 3.1rem;
}

.uzmanlik::before {
  content: "0" counter(uz);
  position: absolute;
  top: 1.4rem;
  left: 1.5rem;
  font-family: var(--serif);
  font-size: var(--olcek-sm);
  color: var(--vurgu);
  letter-spacing: 0.06em;
}

.uzmanliklar {
  counter-reset: uz;
}

/* ── Hakkımda ─────────────────────────────────────────────────── */

.hakkimda-ic {
  display: grid;
  gap: 3rem;
}

@media (min-width: 56rem) {
  .hakkimda-ic {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.hakkimda-metin p {
  font-size: var(--olcek-lg);
  color: var(--yazi-soluk);
  margin: 0 0 1.3rem;
  line-height: 1.7;
}

.hakkimda-metin p:first-child {
  color: var(--yazi);
}

/* ── Video ────────────────────────────────────────────────────── */

/*
 * VİDEO CEPHESİ (facade).
 *
 * YouTube gömüsü her video için ~1 MB betik ve çerez getiriyor. Bu
 * yüzden önce yalnızca KAPAK GÖRSELİ yükleniyor; oynatıcı ancak
 * tıklanınca oluşturuluyor. On video da olsa açılış hızı değişmiyor.
 */
.video {
  position: relative;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  overflow: hidden;
  background: var(--zemin-2);
}

.video-cerceve {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--zemin-2);
  cursor: pointer;
  display: block;
  overflow: hidden;
}

.video-cerceve img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, opacity 0.3s;
}

.video-cerceve:hover img {
  transform: scale(1.04);
  opacity: 0.9;
}

.oynat {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.oynat span {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--vurgu);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.25);
}

.video-bilgi {
  padding: 1rem 1.1rem 1.2rem;
}

.video-bilgi h3 {
  font-size: var(--olcek-md);
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.3rem;
}

.video-sure {
  font-size: var(--olcek-xs);
  color: var(--yazi-silik);
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* ── Instagram ────────────────────────────────────────────────── */

.ig-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

@media (min-width: 40rem) {
  .ig-izgara {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ig-kart {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--kose);
  overflow: hidden;
  border: 1px solid var(--cizgi);
  text-decoration: none;
  display: block;
  background: var(--zemin-2);
}

.ig-kart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kapak görseli yoksa düz renk yerine ince bir desen; boş kutu
   "eksik" gibi duruyor, desen kasıtlı duruyor. */
.ig-desen {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    135deg,
    var(--zemin-2) 0 10px,
    var(--vurgu-zemin) 10px 20px
  );
}

.ig-baslik {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.2rem 0.85rem 0.8rem;
  font-size: var(--olcek-xs);
  color: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
  line-height: 1.35;
}

/* ── Yazılar ──────────────────────────────────────────────────── */

.yazi-kart {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  padding: 1.5rem;
  transition: border-color 0.2s, transform 0.2s;
}

.yazi-kart:hover {
  border-color: var(--vurgu);
  transform: translateY(-2px);
}

.yazi-ust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--olcek-xs);
  color: var(--yazi-silik);
}

.rozet {
  color: var(--vurgu);
  background: var(--vurgu-zemin);
  padding: 0.18rem 0.55rem;
  border-radius: 99px;
  font-weight: 600;
}

.yazi-kart h3 {
  font-size: var(--olcek-xl);
  line-height: 1.2;
}

.yazi-kart p {
  color: var(--yazi-soluk);
  font-size: var(--olcek-sm);
  margin: 0;
}

.yazi-kapak {
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--kose) - 3px);
  object-fit: cover;
  margin-bottom: 0.3rem;
}

/* ── Yazı detay sayfası ───────────────────────────────────────── */

.yazi-govde {
  max-width: 40rem;
  margin-inline: auto;
}

.yazi-govde h1 {
  font-size: var(--olcek-3xl);
  margin-block: 1rem 1.4rem;
}

.yazi-govde p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--yazi-soluk);
  margin: 0 0 1.5rem;
}

.yazi-govde h2 {
  font-size: var(--olcek-xl);
  margin-block: 2.6rem 1rem;
  color: var(--yazi);
}

.yazi-govde .giris {
  font-size: 1.2rem;
  color: var(--yazi);
  border-left: 2px solid var(--vurgu);
  padding-left: 1.2rem;
  margin-bottom: 2.2rem;
}

.geri {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--olcek-sm);
  color: var(--yazi-soluk);
  text-decoration: none;
  margin-bottom: 1.5rem;
}

.geri:hover {
  color: var(--vurgu);
}

/* ── İletişim ─────────────────────────────────────────────────── */

.iletisim-ic {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 56rem) {
  .iletisim-ic {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.uyari {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--vurgu-zemin);
  font-size: var(--olcek-sm);
  color: var(--yazi-soluk);
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

.alan {
  margin-bottom: 1rem;
}

.alan label {
  display: block;
  font-size: var(--olcek-sm);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.alan input,
.alan textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  background: var(--zemin);
  color: var(--yazi);
  font: inherit;
  font-size: var(--olcek-sm);
}

.alan textarea {
  min-height: 8rem;
  resize: vertical;
}

.alan input:disabled,
.alan textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.baglanti-listesi {
  display: grid;
  gap: 0.6rem;
}

.baglanti {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  text-decoration: none;
  font-size: var(--olcek-sm);
  transition: border-color 0.18s, transform 0.18s;
}

.baglanti:hover {
  border-color: var(--vurgu);
  transform: translateX(2px);
}

.baglanti svg {
  flex-shrink: 0;
  color: var(--vurgu);
}

.baglanti-ad {
  font-weight: 600;
}

.baglanti-alt {
  color: var(--yazi-silik);
  font-size: var(--olcek-xs);
}

/* ── Alt bilgi ────────────────────────────────────────────────── */

.alt {
  padding-block: 3rem;
}

.alt-ic {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 40rem) {
  .alt-ic {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.alt p {
  margin: 0;
  font-size: var(--olcek-sm);
  color: var(--yazi-silik);
}

.alt-sosyal {
  display: flex;
  gap: 0.5rem;
}

.alt-sosyal a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--cizgi);
  border-radius: var(--kose);
  color: var(--yazi-soluk);
  transition: color 0.18s, border-color 0.18s;
}

.alt-sosyal a:hover {
  color: var(--vurgu);
  border-color: var(--vurgu);
}


/* Video kimliği henüz girilmemiş kart — boş kutu yerine ne yapılacağını
   söyleyen bir yer tutucu. */
.video-bos {
  display: grid;
  place-items: center;
  cursor: default;
  background-image: repeating-linear-gradient(
    135deg,
    var(--zemin-2) 0 12px,
    var(--vurgu-zemin) 12px 24px
  );
}

.video-bos-yazi {
  text-align: center;
  font-size: var(--olcek-xs);
  color: var(--yazi-soluk);
  line-height: 1.6;
  background: var(--zemin);
  padding: 0.6rem 0.9rem;
  border-radius: var(--kose);
  border: 1px solid var(--cizgi);
}

.video-bos-yazi code {
  font-size: 0.95em;
  color: var(--vurgu);
}