/* ==========================================================================
   FRANCHISE SAYFASI — franchise.html
   stil.css'in üstüne biniyor; oradaki değişkenleri ve yardımcı sınıfları
   kullanıyor. Ayrı dosya çünkü bu kurallar yalnızca bu sayfada geçiyor,
   anasayfayı şişirmesin.

   Anasayfadan farkı: hero yok, zemin sabit siyah, sonunda beyaz bir form
   bölümü var. Beyaz bilerek — siyah anlatının içindeki tek beyaz ekran,
   göz doğrudan başvuruya düşüyor.
   ========================================================================== */

/* --- Sayfa başı ---------------------------------------------------------- */

.sayfabasi {
  background: var(--siyah);
  padding-block: clamp(9rem, 20vh, 14rem) clamp(3rem, 8vh, 6rem);
}
.sayfabasi__ic { grid-column: 1 / span 8; }
.sayfabasi__ic h1 { margin-block-start: 1.6rem; }
.sayfabasi__ic .giris { margin-block-start: clamp(1.5rem, 3.5vh, 2.5rem); }

@media (max-width: 900px) { .sayfabasi__ic { grid-column: 1 / -1; } }

/* Koyu zeminde düğmeler — beyaz bölümdeki .dugme--dolu/--hat'ın tersi. */
.dugme--acik {
  background: var(--metin);
  color: #000;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .9);
}
.dugme--acik:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .95);
}

.dugme--hayalet {
  background: transparent;
  color: var(--metin);
  border-color: var(--cizgi);
}
.dugme--hayalet:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
  transform: translateY(-2px);
}

/* --- Ne sağlıyoruz ------------------------------------------------------- */

.sunduk { background: var(--siyah); }
.sunduk__bas    { grid-column: 1 / span 4; }
.sunduk__bas h2 { margin-block-start: 1.6rem; }
.sunduk__liste  { grid-column: 6 / -1; }

@media (max-width: 900px) {
  .sunduk__bas, .sunduk__liste { grid-column: 1 / -1; }
  .sunduk__liste { margin-block-start: 2.5rem; }
}

/* --- Koşullar ------------------------------------------------------------ */

.kosullar { background: var(--zemin); }
.kosullar__bas    { grid-column: 1 / span 5; }
.kosullar__bas h2 { margin-block-start: 1.6rem; }
.kosullar__bas .giris { margin-block-start: 2rem; }
.kosullar__liste  { grid-column: 7 / -1; }

.olculer { margin: 0; padding: 0; }
.olculer > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding-block: .95rem;
  border-block-start: 1px solid var(--cizgi-sonuk);
}
.olculer > div:last-child { border-block-end: 1px solid var(--cizgi-sonuk); }
.olculer dt {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--metin-sonuk);
  padding-block-start: .15rem;
}
.olculer dd { margin: 0; font-size: .9375rem; color: var(--metin); }

.ortak { margin-block-start: clamp(2.5rem, 6vh, 4rem); }
.ortak h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.ortak .marka__ozellikler { margin-block-start: 1.25rem; }

@media (max-width: 700px) {
  .olculer > div { grid-template-columns: 1fr; gap: .35rem; }
}
@media (max-width: 900px) {
  .kosullar__bas, .kosullar__liste { grid-column: 1 / -1; }
  .kosullar__liste { margin-block-start: 2.5rem; }
}

/* --- Süreç --------------------------------------------------------------- */

.surec { background: var(--siyah); }
.surec__bas    { grid-column: 1 / span 4; }
.surec__bas h2 { margin-block-start: 1.6rem; }

.adimlar {
  grid-column: 6 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.adim {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  padding-block: clamp(1.5rem, 3.5vh, 2.3rem);
  border-block-start: 1px solid var(--cizgi-sonuk);
}
.adim:last-child { border-block-end: 1px solid var(--cizgi-sonuk); }

.adim__no {
  font-size: .625rem;
  letter-spacing: .16em;
  color: var(--metin-sonuk);
  font-variant-numeric: tabular-nums;
  padding-block-start: .5rem;
}
.adim h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.adim p {
  margin: .7rem 0 0;
  color: var(--metin-orta);
  font-size: .9375rem;
  max-width: 52ch;
}

@media (max-width: 900px) {
  .surec__bas, .adimlar { grid-column: 1 / -1; }
  .adimlar { margin-block-start: 2.5rem; }
}
@media (max-width: 520px) {
  .adim { grid-template-columns: 2.25rem 1fr; gap: 1rem; }
}

/* --- Sık sorulanlar ------------------------------------------------------ */

.sss { background: var(--zemin); }
.sss__bas    { grid-column: 1 / span 4; }
.sss__bas h2 { margin-block-start: 1.6rem; }
.sss__liste  { grid-column: 6 / -1; }

.sss__liste details { border-block-start: 1px solid var(--cizgi-sonuk); }
.sss__liste details:last-child { border-block-end: 1px solid var(--cizgi-sonuk); }

.sss__liste summary {
  list-style: none;
  cursor: pointer;
  padding-block: clamp(1.1rem, 2.6vh, 1.6rem);
  padding-inline-end: 2.5rem;
  position: relative;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--metin-orta);
  transition: color .3s var(--gecis);
}
.sss__liste summary::-webkit-details-marker { display: none; }
.sss__liste summary:hover,
.sss__liste details[open] summary { color: var(--metin); }

/* Artı işareti — açılınca eksiye dönüyor */
.sss__liste summary::before,
.sss__liste summary::after {
  content: "";
  position: absolute;
  inset-inline-end: .25rem;
  inset-block-start: 50%;
  width: .75rem;
  height: 1px;
  background: var(--metin-sonuk);
  transition: transform .35s var(--gecis), background-color .3s;
}
.sss__liste summary::after { transform: rotate(90deg); }
.sss__liste details[open] summary::after { transform: rotate(0deg); }
.sss__liste details[open] summary::before,
.sss__liste details[open] summary::after { background: var(--metin); }

.sss__liste details p {
  margin: 0 0 clamp(1.2rem, 2.6vh, 1.7rem);
  padding-inline-end: 2.5rem;
  color: var(--metin-orta);
  font-size: .9375rem;
  max-width: 60ch;
}

@media (max-width: 900px) {
  .sss__bas, .sss__liste { grid-column: 1 / -1; }
  .sss__liste { margin-block-start: 2rem; }
}

/* --- Ön başvuru (beyaz bölüm) -------------------------------------------- */

.basvuru { background: var(--metin); color: #000; }
.basvuru .etiket { color: rgba(0, 0, 0, .45); }

.basvuru__bas    { grid-column: 1 / -1; }
.basvuru__bas h2 { margin-block-start: 1.6rem; }
.basvuru__giris {
  margin-block-start: 1.5rem;
  max-width: 46ch;
  font-size: clamp(1rem, .9vw + .8rem, 1.1875rem);
  line-height: 1.5;
  color: rgba(0, 0, 0, .68);
}

.form { grid-column: 1 / span 7; margin-block-start: clamp(2.5rem, 6vh, 4rem); }

.basvuru__yan {
  grid-column: 9 / -1;
  margin-block-start: clamp(2.5rem, 6vh, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: 2px solid #000;
  align-self: start;
}
.basvuru__yan h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; }
.basvuru__yan p {
  margin: .6rem 0 1.5rem;
  font-size: .875rem;
  color: rgba(0, 0, 0, .6);
}

.iletisim-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.iletisim-liste li { display: grid; gap: .15rem; justify-items: start; }
.iletisim-liste span {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .4);
}
.iletisim-liste a {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border-block-end: 1px solid rgba(0, 0, 0, .25);
  padding-block-end: .1rem;
  transition: border-color .3s;
}
.iletisim-liste a:hover { border-color: #000; }

@media (max-width: 1000px) {
  .form, .basvuru__yan { grid-column: 1 / -1; }
  .basvuru__yan { margin-block-start: 3rem; }
}

/* --- Form alanları ------------------------------------------------------- */

/* Gizli tuzak alanı. display:none KULLANMIYORUZ — bazı robotlar onu
   atlıyor. Ekran okuyucudan da gizli, klavye sırasında da yok. */
.form__tuzak {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.form__satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-block-end: 1.25rem;
}
@media (max-width: 620px) { .form__satir { grid-template-columns: 1fr; } }

.alan { display: block; margin-block-end: 1.25rem; }
.form__satir .alan { margin-block-end: 0; }

.alan__ad {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
  margin-block-end: .5rem;
}
.alan__ad b { color: #9a2b2b; font-weight: 600; }

.alan input,
.alan select,
.alan textarea {
  inline-size: 100%;
  font-family: inherit;
  font-size: .9375rem;
  color: #000;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 10px;
  padding: .85rem 1rem;
  transition: border-color .25s var(--gecis), box-shadow .25s var(--gecis);
  appearance: none;
}

/* iOS Safari, yazı boyutu 16 pikselin ALTINDA olan bir alana dokunulunca
   sayfayı zorla yakınlaştırıyor ve geri döndürmüyor — kullanıcı formun
   yarısını göremez hâle geliyor. Tasarım ölçüsü .9375rem (15px) idi;
   dar ekranda 16'ya çıkarıyoruz. Görsel fark yok denecek kadar az,
   yakınlaştırma tuzağı ise tamamen kalkıyor. */
@media (max-width: 900px) {
  .alan input,
  .alan select,
  .alan textarea { font-size: 1rem; }
}
.alan textarea { resize: vertical; min-block-size: 6rem; line-height: 1.55; }

/* Yerleşik ok kaldırıldı, kendi okumuz — tarayıcılar arası görünüm aynı
   olsun diye. RTL'de sola geçiyor. */
.alan select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, .55) 50%),
    linear-gradient(135deg, rgba(0, 0, 0, .55) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) calc(50% + 1px),
    calc(100% - .8rem)   calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
}
[dir="rtl"] .alan select {
  background-position: 1.15rem calc(50% + 1px), .8rem calc(50% + 1px);
  padding-inline-end: 1rem;
  padding-inline-start: 2.5rem;
}

.alan input:focus-visible,
.alan select:focus-visible,
.alan textarea:focus-visible {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .10);
}

.alan input::placeholder,
.alan textarea::placeholder { color: rgba(0, 0, 0, .32); }

.alan--hatali input,
.alan--hatali select,
.alan--hatali textarea { border-color: #9a2b2b; }

.alan__hata {
  display: block;
  margin-block-start: .45rem;
  font-size: .8125rem;
  color: #9a2b2b;
}

/* Onay kutusu */
.onay {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-block: 1.75rem 0;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, .68);
  position: relative;
}
.onay input {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: .12rem;
  accent-color: #000;
  cursor: pointer;
}
.onay b { color: #9a2b2b; }
.onay__bag { border-block-end: 1px solid rgba(0, 0, 0, .35); }
.onay__bag:hover { border-color: #000; }
.onay .alan__hata {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 1.95rem;
}

.form__ayak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-block-start: 2.25rem;
}
.form__ayak .dugme--acik { background: #000; color: var(--metin); }
.form__ayak .dugme--acik:hover { background: #1a1a1a; }
.form__ayak button:disabled { opacity: .55; cursor: default; transform: none; }

.form__not {
  margin: 0;
  font-size: .8125rem;
  color: rgba(0, 0, 0, .5);
  max-width: 32ch;
}

.form__sonuc {
  margin-block-start: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  font-size: .9375rem;
  line-height: 1.5;
}
.form__sonuc--tamam { background: rgba(28, 94, 62, .10); color: #1c5e3e; }
.form__sonuc--hata  { background: rgba(154, 43, 43, .10); color: #9a2b2b; }

/* ==========================================================================
   KAYIT LİSTESİ — haberler ve açık pozisyonlar
   İkisi de aynı şey: tarih/yer + etiket + başlık + bir satır. Ayrı bileşen
   yazmaya değmez, tek liste ikisini de taşıyor.
   ========================================================================== */

.liste { background: var(--siyah); }

.kayit {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kayit__satir {
  display: grid;
  grid-template-columns: 9rem 8rem 1fr auto;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.6rem, 4vh, 2.6rem);
  border-block-start: 1px solid var(--cizgi-sonuk);
  transition: background-color .4s var(--gecis);
}
.kayit__satir:last-child { border-block-end: 1px solid var(--cizgi-sonuk); }
.kayit__satir:hover { background: rgba(255, 255, 255, .028); }

.kayit__tarih {
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--metin-sonuk);
}

.kayit__etiket {
  justify-self: start;
  padding: .3rem .7rem;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--metin-orta);
}

.kayit__govde h2 {
  margin: 0;
  font-family: var(--tipo-baslik);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.12;
}
.kayit__govde p {
  margin: .55rem 0 0;
  max-inline-size: 56ch;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--metin-orta);
}

.kayit__bag {
  align-self: center;
  white-space: nowrap;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--metin-orta);
  border-block-end: 1px solid var(--cizgi);
  padding-block-end: .2rem;
  transition: color .3s var(--gecis), border-color .3s var(--gecis);
}
.kayit__satir:hover .kayit__bag { color: var(--metin); border-color: var(--metin); }

@media (max-width: 860px) {
  .kayit__satir {
    grid-template-columns: 1fr auto;
    gap: .5rem 1rem;
    align-items: center;
  }
  .kayit__tarih { order: 1; }
  .kayit__etiket { order: 2; justify-self: end; }
  .kayit__govde { order: 3; grid-column: 1 / -1; margin-block-start: .4rem; }
  .kayit__bag { order: 4; grid-column: 1 / -1; justify-self: start; margin-block-start: .6rem; }
}

/* ==========================================================================
   İLETİŞİM — konu kartları ve merkez ofis
   Önce her kanalın kendi e-posta adresi vardı; dört kutuyu takip etmek
   müşteri tarafında iş yükü ve biri mutlaka gözden kaçıyor. Kartlar kaldı
   ama artık adres taşımıyor: tek forma götürüp konuyu orada seçiyorlar.
   ========================================================================== */

.kanallar { background: var(--siyah); }

.kanallar__giris {
  grid-column: 1 / -1;
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
  max-inline-size: 40ch;
  font-family: var(--tipo-baslik);
  font-size: clamp(1.35rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.034em;
  line-height: 1.14;
  color: var(--metin);
}

.kanal {
  grid-column: span 3;
  padding-block: 1.5rem 1.75rem;
  border-block-start: 1px solid var(--cizgi);
  display: grid;
  align-content: start;
  gap: .7rem;
  color: inherit;
  transition: border-color .35s var(--gecis);
}
.kanal:hover { border-color: var(--metin); }

.kanal h2 {
  margin: 0;
  font-family: var(--tipo-baslik);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.kanal p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--metin-orta);
}

.kanal__ok {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: .35rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--metin-sonuk);
  transition: color .35s var(--gecis), gap .35s var(--gecis);
}
.kanal__ok::after {
  content: "";
  inline-size: .4rem;
  block-size: .4rem;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
}
[dir="rtl"] .kanal__ok::after { transform: rotate(225deg); }
.kanal:hover .kanal__ok { color: var(--metin); gap: .8rem; }

@media (max-width: 1000px) { .kanal { grid-column: span 6; } }
@media (max-width: 560px)  { .kanal { grid-column: 1 / -1; } }

/* --- Merkez ofis --------------------------------------------------------- */

.ofis { background: var(--zemin); }
.ofis__bas   { grid-column: 1 / span 4; }
.ofis__bilgi { grid-column: 6 / -1; }
.ofis__bilgi dd a {
  border-block-end: 1px solid var(--cizgi);
  padding-block-end: .1rem;
  transition: border-color .3s var(--gecis);
}
.ofis__bilgi dd a:hover { border-color: var(--metin); }

@media (max-width: 900px) {
  .ofis__bas, .ofis__bilgi { grid-column: 1 / -1; }
  .ofis__bilgi { margin-block-start: 2rem; }
}

/* ==========================================================================
   HUKUKİ METİN — aydınlatma metni
   Tek sütun, dar ölçü. Kurumsal sayfaların editoryal tipografisi burada
   işe yaramıyor: bu metin okunacak değil, TARANACAK — başlıktan başlığa
   atlayan biri aradığını bulabilmeli.
   ========================================================================== */

.metin { background: var(--siyah); }

.metin__govde {
  grid-column: 2 / span 7;
  max-inline-size: 68ch;        /* uzun hukuki cümlelerde satır ölçüsü kritik */
}

.metin__govde h2 {
  margin-block: clamp(2.5rem, 5vh, 3.5rem) .9rem;
  font-family: var(--tipo-baslik);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.15;
}
.metin__govde h2:first-child { margin-block-start: 0; }

.metin__govde p,
.metin__govde li {
  margin: 0 0 1rem;
  font-size: .9375rem;
  line-height: 1.72;            /* hukuki metinde nefes payı */
  color: var(--metin-orta);
}

.metin__govde b { color: var(--metin); font-weight: 500; }

.metin__govde ul {
  margin: 0 0 1rem;
  padding-inline-start: 1.1rem;
}
.metin__govde li { margin-block-end: .45rem; }
.metin__govde li::marker { color: var(--metin-sonuk); }

.metin__govde a {
  color: var(--metin);
  border-block-end: 1px solid var(--cizgi);
  transition: border-color .35s var(--gecis);
}
.metin__govde a:hover { border-color: var(--metin); }

.metin__not {
  margin-block-start: clamp(2.5rem, 5vh, 3.5rem);
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--cizgi);
  font-size: .8125rem !important;
  color: var(--metin-sonuk) !important;
}

@media (max-width: 900px) {
  .metin__govde { grid-column: 1 / -1; }
}