:root {
  --zemin: #fff;
  --yazi: #222;
  --yazi-koyu: #1d1d1d;
  --siyah: #000;
  --yesil: #355944;          /* düğme/vurgu yeşili rgb(53,89,68) */
  --cizgi: #000;             /* üst bilgi, kahraman çizgileri */
  --cizgi-gri: #222;         /* değer kutuları, alt bilgi çizgisi */
  --koyu-dugme: #1d1d1d;
  --bakir: #d49a7b;
  --gece-gri: #f7f7f7;

  --f-genis: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* acumin-pro-wide yerine */
  --f-yol: "Overpass", "Helvetica Neue", Arial, sans-serif;    /* interstate yerine */
  --f-futura: "Jost", "Futura", sans-serif;                    /* futura-pt-bold yerine */
  --f-open: "Open Sans", Arial, sans-serif;
  --genis: 125%;

  --ust-y: 59px;
  --tel-ust-y: 74px;
  --icerik-sol: 101px;
  --icerik-gen: 519px;
  --bosluk: 34px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--zemin); color: var(--yazi); font-family: var(--f-genis); font-stretch: var(--genis); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }

/* ---------- Üst bilgi ---------- */
.ust { position: fixed; top: 0; left: 0; right: 0; height: var(--ust-y); background: var(--zemin); border-bottom: 1px solid var(--cizgi); z-index: 20; }
.ust-sol, .ust-sag { position: absolute; top: 0; font-family: var(--f-yol); font-stretch: normal; font-size: 14px; line-height: 14px; letter-spacing: 1.96px; text-transform: uppercase; color: #212121; }
.ust-sol { left: 24px; }
.ust-sag { right: 117px; text-align: right; }
.ust-sira { display: flex; gap: 22px; height: 16px; margin-top: 6px; align-items: center; }
.ust-sira + .ust-sira { margin-top: 15px; }
.ust-sag .ust-sira { justify-content: flex-end; }
.ust-sira a { transition: opacity .2s; }
.ust-sira a:hover { opacity: .6; }
.ust-sag .ust-sira + .ust-sira { margin-top: 6px; height: 34px; }
.ust-dugme { background: var(--yesil); color: #fff; padding: 10px; line-height: 14px; }
.ust-dugme:hover { opacity: .8 !important; }

.logo { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); height: 42px; display: flex; align-items: center; white-space: nowrap;
  font-family: var(--f-genis); font-stretch: 112%; font-weight: 700; font-size: 26px; letter-spacing: .2px; color: #111; }
.logo-imi { display: none; }

.sepet { position: absolute; left: 1371px; top: 17px; width: 31px; height: 26px; color: #222; }
.sepet svg { width: 31px; height: 26px; display: block; }
.sepet-sayi { position: absolute; left: 25px; top: -5px; width: 20px; height: 20px; border-radius: 10px; background: var(--yazi-koyu); color: #fff; font: 700 10px/20px var(--f-open); text-align: center; }

.tel-cubuk, .tel-menu { display: none; }

/* ---------- Kahraman ---------- */
.kahraman { display: grid; grid-template-columns: 720px 720px; }
.slayt-bolum { margin-top: 40px; height: 1233px; border-bottom: 1px solid var(--cizgi); background: var(--zemin); }
.slayt { position: sticky; top: 0; height: 900px; background: var(--gece-gri); overflow: hidden; }
.slayt figure { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.slayt figure.aktif { opacity: 1; }
.slayt img { width: 100%; height: 100%; object-fit: cover; }
.noktalar { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; justify-content: center; align-items: center; gap: 0; z-index: 2; }
.noktalar button { width: 10px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.noktalar button span { width: 5px; height: 5px; background: rgba(255,255,255,.3); display: block; }
.noktalar button.aktif span { background: #fff; }

.giris { border-left: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); height: 1273px; padding: 65px 100px 0 var(--icerik-sol); text-align: center; display: flex; flex-direction: column; align-items: center; }
.giris h1 { font-family: var(--f-genis); font-stretch: var(--genis); font-weight: 400; font-size: 34px; line-height: 40.8px; letter-spacing: .68px; color: var(--yazi); width: 100%; }
.cerceve-dugme { display: inline-block; margin-top: var(--bosluk); border: 1px solid #365944; color: #365944; padding: 33px 39px; font: 700 15px/normal var(--f-open); font-stretch: normal; letter-spacing: 6px; text-transform: uppercase; transition: opacity .2s; }
.cerceve-dugme:hover { opacity: .7; }
.bildiri { margin-top: var(--bosluk); font-family: var(--f-yol); font-stretch: normal; font-weight: 400; font-size: 23px; line-height: 36.8px; letter-spacing: .69px; color: var(--yazi); }
.giris p { margin-top: 19px; font-weight: 300; font-size: 16px; line-height: 25.6px; letter-spacing: .16px; color: var(--siyah); }
.koyu-dugme { margin-top: var(--bosluk); display: inline-block; background: var(--koyu-dugme); color: #fff; padding: 30.8px 36.4px; font: 400 14px/normal var(--f-open); font-stretch: normal; letter-spacing: 8.4px; text-transform: uppercase; transition: opacity .2s; }
.koyu-dugme:hover { opacity: .8; }
.giris-foto { margin-top: var(--bosluk); width: var(--icerik-gen); height: 385px; position: relative; }
.giris-foto img { width: 100%; height: 100%; object-fit: cover; }
.giris-foto::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.13); }

/* ---------- Alt bilgi ---------- */
.alt { border-top: 1px solid var(--cizgi-gri); display: grid; grid-template-columns: 432px 1008px; height: 450px; overflow: hidden; }
.alt-sol { padding-top: 40px; text-align: center; }
.insta-kare { display: block; width: 147px; height: 180px; margin: 0 auto; }
.insta-kare img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.insta-kare:hover img { opacity: .85; }
.alt-baslik { font-weight: 700; font-size: 15px; line-height: 33px; letter-spacing: 3.75px; text-transform: uppercase; color: var(--yazi); }
.alt-sol .alt-baslik { margin-top: 34px; }
.alt-orta { border-left: 1px solid var(--cizgi); padding: 40px 0 0 41px; display: flex; flex-direction: column; }
.alt-sutunlar { display: grid; grid-template-columns: 447px 447px; gap: 33px; }
.alt-sutun p { margin-top: 16px; font-weight: 300; font-size: 16px; line-height: 25.6px; letter-spacing: .16px; color: var(--yazi); }
.alt-sutun .alt-baslik + p { margin-top: 16px; }
.alt-sutun a { color: var(--yesil); border-bottom: 1px solid var(--yesil); }
.sosyal { display: flex; margin: 8px 0 0 -10px; }
.sosyal a { width: 32px; height: 40px; display: grid; place-items: center; color: #222; border: 0; }
.sosyal svg { width: 16px; height: 16px; transition: opacity .2s; }
.sosyal a:hover svg { opacity: .6; }
.aciklama { margin-top: 25px; width: 912px; font-weight: 300; font-size: 16px; line-height: 25.6px; letter-spacing: .16px; }
.aciklama strong { font-weight: 700; }
.alt-menu { margin-top: auto; margin-left: -40px; width: 1017px; height: 29px; border-top: 1px solid var(--cizgi); padding: 3px 5px 0; display: flex; justify-content: space-between; font-weight: 700; font-size: 10px; line-height: 22px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--yazi); }
.alt-menu a { padding: 0 5px; }
.alt-menu a:hover { opacity: .6; }

/* =================== Telefon (≤ 767) =================== */
@media (max-width: 767px) {
  .ust { display: none; }
  .tel-cubuk { display: block; position: fixed; top: 0; left: 0; right: 0; height: var(--tel-ust-y); background: var(--zemin); border-bottom: 1px solid var(--cizgi); z-index: 20; }
  .hamburger { position: absolute; left: 20px; top: 30px; width: 24px; height: 14px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
  .hamburger span { display: block; height: 1px; background: #222; }
  .logo-tel { top: 21px; height: 31px; font-size: 19.5px; letter-spacing: 0; }
  .sepet-tel { left: auto; right: 34px; top: 24px; }
  .tel-menu:not([hidden]) { display: block; position: fixed; inset: var(--tel-ust-y) 0 0 0; background: var(--zemin); z-index: 19; padding: 36px 36px; }
  .tel-menu nav { display: flex; flex-direction: column; }
  .tel-menu a { font: 700 20px/36px var(--f-futura); letter-spacing: 3.6px; text-transform: uppercase; color: #292929; padding: 6px 0; }

  main { padding-top: var(--tel-ust-y); }
  .slayt-bolum { margin-top: 0; height: 274px; border-bottom: 0; border-top: 1px solid var(--cizgi-gri); }
  .slayt { position: relative; height: 273px; }
  .noktalar { bottom: 0; }

  .giris { height: 1353px; border: 0; border-top: 1px solid var(--cizgi-gri); padding: 77px 20px 0; }
  .giris h1 { font-size: 32px; line-height: 38.4px; letter-spacing: 0; }
  .cerceve-dugme { width: 350px; padding: 33px 39px; }
  .bildiri { letter-spacing: .69px; }
  .giris-foto { width: 350px; height: 260px; margin-top: 33px; }

  .alt { display: block; height: auto; padding-bottom: 38px; }
  .alt-sol { padding: 37px 20px 0; }
  .insta-kare { width: 350px; height: 350px; }
  .alt-sol .alt-baslik { margin-top: 34px; }
  .alt-orta { border-left: 0; padding: 74px 20px 0; }
  .alt-sutunlar { display: block; }
  .alt-sutun + .alt-sutun { margin-top: 20px; }
  .alt-sutun .alt-baslik + p { margin-top: 16px; }
  .alt-sutun p { margin-top: 16px; }
  .sosyal { margin: 8px 0 0 -10px; }
  .aciklama { width: auto; margin-top: 35px; }
  .alt-menu { margin: 60px 0 0; width: auto; height: auto; border-top: 0; padding: 0; flex-direction: column; align-items: center; }
  .alt-menu a { line-height: 42px; }
}