/* Medya CV — ortak temel. Masaüstü ve mobil kabuklar bunun üstüne kendi düzenini kurar.
   Dil (2026-10-01, rakip incelemesinden sonra): beyaz zemin, açık lila bantlar, mürdüm moru ana renk,
   yuvarlak köşeli kartlar, ince açık kenarlık, çok hafif gölge. Degrade yok. Yazı tipi Open Sans (başlık + gövde), rakam satırları IBM Plex Mono. */

:root {
  /* Zemin ve yüzeyler */
  --kagit: #ffffff;            /* sayfa zemini */
  --kagit-acik: #ffffff;       /* kart / form yüzeyi */
  --kagit-koyu: #f6f1fb;       /* açık lila bant, ek kutu */
  --zemin-gri: #faf8fc;        /* uygulama içi çalışma alanı */
  --murekkep: #1d1424;         /* metin */
  --murekkep-2: #3e3546;
  --gri: #625a6b;
  --gri-acik: #8e8698;
  --cizgi: #eee8f3;            /* liste ayırıcı */
  --kenar: #e5ddec;            /* kart / alan kenarlığı */
  --kenar-koyu: #cfc4da;       /* form alanı kenarlığı */

  /* Marka: mürdüm moru + safran. Kırmızı yalnız uyarı (hata, gecikme, silme). */
  --mor: #6b1f8f;
  --mor-koyu: #4b1466;
  --mor-acik: #f3eafa;
  --mor-orta: #e3d1f0;
  --patlican: #23102f;         /* koyu blok (hero, alt bilgi) */
  --sari: #f5b700;
  --sari-acik: #fff4cc;
  --vurgu: var(--mor);
  --vurgu-koyu: var(--mor-koyu);
  --hata: #c4281c;
  --hata-koyu: #9a1d13;
  --kirmizi: var(--hata);
  --kirmizi-koyu: var(--hata-koyu);
  --yesil: #1d6b4a;
  --yesil-acik: #e4f4ec;
  --mavi: #1d3fa8;

  --serif: 'Open Sans', 'Segoe UI', Arial, sans-serif;   /* başlık (kullanıcı kararı: Open Sans) */
  --sans: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --kose: 12px;
  --kose-kucuk: 8px;
  --kose-buyuk: 20px;
  --golge: 0 1px 2px rgba(35, 16, 47, .04), 0 6px 20px rgba(35, 16, 47, .06);
  --golge-buyuk: 0 2px 4px rgba(35, 16, 47, .05), 0 18px 48px rgba(35, 16, 47, .12);

  /* Düğme dili tek yerde: birincil = ana eylem, ikincil = yardımcı eylem */
  --g-birincil: var(--mor);
  --g-birincil-koyu: var(--mor-koyu);
  --g-birincil-yazi: #ffffff;
  --g-ikincil: var(--murekkep);
  --odak: 3px solid rgba(107, 31, 143, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: 'kern';
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--mor); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mor-koyu); }
:focus-visible { outline: var(--odak); outline-offset: 2px; }
::selection { background: var(--mor-orta); color: var(--murekkep); }
mark, .vurgu-sari { background: var(--sari-acik); color: var(--murekkep); padding: 0 .15em; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.02em; color: var(--murekkep); }
h1 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.9rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
.italik { font-family: var(--serif); font-style: italic; }
.mono, .rakam-mono { font-family: var(--mono); }
.rakam { font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.sessiz { color: var(--gri); }
.kucuk { font-size: .875rem; }
.gizli-metin { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Küçük üst etiket */
.etiket { font: 600 .78rem/1.3 var(--sans); letter-spacing: .01em; color: var(--mor); }
.etiket b { color: var(--murekkep); font-weight: 600; }

/* Ayırıcılar */
.cizgi { border: 0; border-top: 1px solid var(--cizgi); margin: 1.5rem 0; }
.cizgi-kalin, .cizgi-cift { border: 0; border-top: 1px solid var(--kenar); margin: 0; height: 0; }

/* Künye satırı: "Reels ............ 2.500 ₺" */
.kunye { margin: 0; }
.kunye > div { display: flex; align-items: baseline; gap: .5rem; padding: .4rem 0; }
.kunye dt { font: 400 .9rem/1.4 var(--sans); color: var(--gri); white-space: nowrap; }
.kunye .dolgu { flex: 1; border-bottom: 1px dotted var(--kenar-koyu); transform: translateY(-.3em); min-width: 1rem; }
.kunye dd { margin: 0; font-family: var(--mono); font-size: .92rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--murekkep); }

/* Rozet (eski adıyla damga): yayında / barter / yeni gibi durumlar */
.damga {
  display: inline-flex; align-items: center; gap: .3rem;
  font: 600 .72rem/1 var(--sans); letter-spacing: .03em;
  color: var(--mor-koyu); background: var(--mor-acik);
  border: 0; border-radius: 999px;
  padding: .38rem .62rem;
  white-space: nowrap;
}
.damga.yesil { color: var(--yesil); background: var(--yesil-acik); }
.damga.gri { color: var(--gri); background: #f1eef4; }

/* Düğmeler */
.dugme {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.3rem;
  font: 600 1rem/1.1 var(--sans);
  color: var(--g-birincil-yazi); background: var(--g-birincil);
  border: 1.5px solid var(--g-birincil); border-radius: var(--kose);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.dugme:hover { background: var(--g-birincil-koyu); border-color: var(--g-birincil-koyu); color: #fff; }
.dugme.ikincil { background: #fff; color: var(--g-ikincil); border-color: var(--kenar-koyu); }
.dugme.ikincil:hover { background: var(--mor-acik); color: var(--mor-koyu); border-color: var(--mor-orta); }
.dugme.kirmizi { background: var(--hata); border-color: var(--hata); color: #fff; }
.dugme.kirmizi:hover { background: var(--hata-koyu); border-color: var(--hata-koyu); }
.dugme.yalin { background: none; border-color: transparent; color: var(--mor); padding-left: .2rem; padding-right: .2rem; text-decoration: underline; text-underline-offset: 4px; }
.dugme.yalin:hover { color: var(--mor-koyu); background: none; }
.dugme.sari { background: var(--sari); border-color: var(--sari); color: var(--patlican); }
.dugme.sari:hover { background: #ffc933; border-color: #ffc933; color: var(--patlican); }
.dugme[disabled] { opacity: .5; cursor: not-allowed; }
.dugme.tam { width: 100%; }
.dugme .ok { font-family: var(--sans); font-size: 1.1em; line-height: 0; }

/* Form */
.alan { display: block; margin: 0 0 1.15rem; }
.alan > span:not(.on-ek):not(.son-ek), .alan legend, .alan-baslik { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .4rem; }
.alan small, .alan .ipucu { display: block; color: var(--gri); font-size: .8rem; margin-top: .35rem; }
fieldset.alan { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel],
input[type=date], input[type=search], select, textarea {
  width: 100%; min-height: 48px;
  font: 400 1rem/1.3 var(--sans); color: var(--murekkep);
  background: #fff;
  border: 1px solid var(--kenar-koyu); border-radius: var(--kose-kucuk);
  padding: .7rem .85rem;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--mor); box-shadow: 0 0 0 3px rgba(107, 31, 143, .16); }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--hata); }
.alan-hata { color: var(--hata-koyu); font-size: .85rem; margin-top: .3rem; }
select { -webkit-appearance: none; appearance: none; padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--gri) 50%), linear-gradient(135deg, var(--gri) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.on-ek { display: flex; align-items: stretch; }
.on-ek > span { display: flex; align-items: center; padding: 0 .75rem; font-family: var(--mono); font-size: .88rem; color: var(--gri); border: 1px solid var(--kenar-koyu); border-right: 0; border-radius: var(--kose-kucuk) 0 0 var(--kose-kucuk); background: var(--kagit-koyu); }
.on-ek input { border-radius: 0 var(--kose-kucuk) var(--kose-kucuk) 0; }
.son-ek { display: flex; align-items: stretch; }
.son-ek > span { display: flex; align-items: center; padding: 0 .75rem; font-family: var(--mono); font-size: .88rem; color: var(--gri); border: 1px solid var(--kenar-koyu); border-left: 0; border-radius: 0 var(--kose-kucuk) var(--kose-kucuk) 0; background: var(--kagit-koyu); }
.son-ek input { border-radius: var(--kose-kucuk) 0 0 var(--kose-kucuk); }

/* Seçim düğmeleri (radyo) — hap biçiminde */
.secenekler { display: flex; flex-wrap: wrap; gap: .45rem; }
.secenekler label { position: relative; }
.secenekler input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secenekler span {
  display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: .5rem 1rem;
  border: 1px solid var(--kenar-koyu); border-radius: 999px; background: #fff;
  font-size: .92rem; cursor: pointer; user-select: none; transition: background-color .15s, border-color .15s;
}
.secenekler span:hover { border-color: var(--mor); }
.secenekler input:checked + span { background: var(--mor); color: #fff; border-color: var(--mor); }
.secenekler input:focus-visible + span { outline: var(--odak); outline-offset: 2px; }
.secenekler input:checked + span small, .secenekler input:checked + span .sessiz { color: #f3eafa !important; opacity: 1; }

.onay { display: flex; gap: .65rem; align-items: center; min-height: 44px; font-size: .92rem; margin: 0 0 .6rem; cursor: pointer; }
.onay input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--mor); }

/* Bilgi kutuları */
.not {
  border-left: 3px solid var(--mor); background: var(--kagit-koyu);
  border-radius: 0 var(--kose-kucuk) var(--kose-kucuk) 0;
  padding: .8rem 1rem;
  font-size: .92rem; color: var(--murekkep-2);
}
.not.kirmizi { border-color: var(--hata); background: #fdf0ee; }
.uyari-bilgi { font: .8rem/1.5 var(--sans); color: var(--gri); }
.bildirim-serit { padding: .85rem 1.1rem; border: 1px solid var(--mor-orta); background: var(--mor-acik); color: var(--mor-koyu); border-radius: var(--kose); margin: 0 0 1.25rem; font-size: .95rem; }
.bildirim-serit.hata { border-color: #f3c4bf; background: #fdf0ee; color: var(--hata-koyu); }
.bildirim-serit.tamam { border-color: #bfe3d0; background: var(--yesil-acik); color: var(--yesil); }

/* Kart */
.kart-yuzey, .kutu { background: #fff; border: 1px solid var(--kenar); border-radius: var(--kose-buyuk); box-shadow: var(--golge); }
.belge { background: #fff; border: 1px solid var(--kenar); border-radius: var(--kose); }

/* İlerleme çubuğu (20/B eşiği vb.) */
.cetvel { position: relative; height: 10px; border-radius: 999px; background: var(--mor-acik); overflow: hidden; }
.cetvel > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mor); border-radius: 999px; }
.cetvel.sari > i { background: #c99400; }
.cetvel.kirmizi > i { background: var(--hata); }

/* Tablo */
.tablo { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tablo th { text-align: left; font: 600 .76rem/1.2 var(--sans); color: var(--gri); padding: .6rem .7rem; border-bottom: 1px solid var(--kenar); background: var(--zemin-gri); }
.tablo td { padding: .75rem .7rem; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo tr:hover td { background: var(--zemin-gri); }
.tablo .sag { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Boş durum */
.bos { padding: 2.5rem 1.5rem; color: var(--gri); text-align: center; background: var(--zemin-gri); border: 1px dashed var(--kenar-koyu); border-radius: var(--kose-buyuk); }
.bos h3 { color: var(--murekkep); }

.el-cizgi { box-shadow: inset 0 -.38em 0 var(--sari-acik); padding: 0 .1em; }
.vurgulu-kelime { color: var(--mor); }

/* Telefon çerçevesi: ürünün gerçek ekranını gösterir (hero, tanıtım) */
.telefon {
  width: 300px; max-width: 100%;
  background: #fff; border: 10px solid #1d1424; border-radius: 42px;
  box-shadow: var(--golge-buyuk);
  padding: 1.6rem .95rem 1.1rem; position: relative; overflow: hidden;
}
.telefon::before { content: ''; position: absolute; top: 9px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: #1d1424; border-radius: 999px; }
.telefon-adres { font: .7rem/1 var(--mono); color: var(--gri); text-align: center; background: var(--zemin-gri); border-radius: 999px; padding: .45rem .6rem; margin: .5rem 0 1rem; }

/* Örnek künye (tanıtım sayfalarında temsilî Medya CV parçası) */
.ornek-kunye { margin: 0; max-width: 410px; }
.ornek-kunye figcaption { margin-bottom: .5rem; }
.ornek-kagit { background: #fff; border: 1px solid var(--kenar); border-radius: var(--kose-buyuk); box-shadow: var(--golge); padding: 1.4rem 1.5rem 1.2rem; position: relative; }
.ornek-ad { font: 500 1.7rem/1.1 var(--serif); margin: 0; padding-right: 6rem; }
.ornek-alt { font-size: .78rem; color: var(--gri); margin: .3rem 0 .9rem; }
.ornek-kagit .kunye { margin-top: .7rem; }
.ornek-kagit .damga { position: absolute; right: 1.2rem; top: 1.3rem; margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* İki satırlı seçenekler hap değil, yuvarlak köşeli kutu */
.secenekler span:has(small), .secenekler span:has(b), .iki-secenek span { border-radius: var(--kose); align-items: flex-start; }
/* Dosya seçme düğmesi sitenin ikincil düğmesi gibi */
input[type=file] { font: .9rem var(--sans); color: var(--gri); max-width: 100%; }
input[type=file]::file-selector-button { font: 600 .9rem var(--sans); color: var(--murekkep); background: #fff; border: 1px solid var(--kenar-koyu); border-radius: var(--kose-kucuk); padding: .6rem .9rem; margin-right: .8rem; cursor: pointer; min-height: 44px; }
input[type=file]::file-selector-button:hover { background: var(--mor-acik); border-color: var(--mor-orta); color: var(--mor-koyu); }

/* Profil fotoğrafı: örnek künye ve başlıktaki kullanıcı rozeti */
.ornek-kim { display: flex; align-items: center; gap: .85rem; }
.ornek-foto { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--mor-orta); }
.avatar { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--mor-acik); color: var(--mor-koyu); font: 700 .75rem/1 var(--sans); }
.kullanici-rozet { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .3rem; border: 1px solid var(--kenar); border-radius: 999px; background: #fff; text-decoration: none; color: var(--murekkep-2); min-height: 44px; font-size: .88rem; font-weight: 600; }
.kullanici-rozet:hover { border-color: var(--mor-orta); background: var(--mor-acik); color: var(--mor-koyu); }

/* Site içi onay penceresi (ortak.js, data-onay) */
.onay-kutu { border: 0; border-radius: var(--kose-buyuk); padding: 1.5rem; max-width: min(440px, calc(100vw - 32px)); box-shadow: var(--golge-buyuk); color: var(--murekkep); }
.onay-kutu::backdrop { background: rgba(35, 16, 47, .5); }
.onay-soru { font-size: 1.02rem; margin: 0 0 1.2rem; }
.onay-dugmeler { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* Türkçe dosya seçici (pages/cv/parca/dosya-sec.php — her modülde kullanılabilir) */
.cv-dosya { position: relative; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cv-dosya-girdi { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cv-dosya-girdi:focus-visible + .cv-dosya-dugme { outline: var(--odak); outline-offset: 2px; }
.cv-dosya-dugme { cursor: pointer; min-height: 44px; padding: .6rem 1.1rem; font-size: .95rem; }
.cv-dosya-ad { font-size: .88rem; color: var(--gri); overflow-wrap: anywhere; min-width: 0; }
.cv-dosya-ad:empty { display: none; }

/* Sayfa üst şeridi (tanıtım sayfaları, fiyat hesaplayıcı): koyu zemin, yol bağlantısı, h1, açıklama, haplar */
/* En üst ince şerit (parca/sayfa-ust.php): tam genişlik görsel + koyu düz örtü (degrade yok), yol bağlantısı ve sayfa adı */
.sayfa-ust { position: relative; display: flex; align-items: center; overflow: hidden; background: var(--patlican); color: #fff; }
.sayfa-ust-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sayfa-ust-icerik { position: relative; z-index: 1; }
.sayfa-ust-yol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; color: #e3d7eb; }
.sayfa-ust-yol a { color: #e3d7eb; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.sayfa-ust-yol a:hover { color: var(--sari); }
.sayfa-ust-yol [aria-current] { color: #fff; font-weight: 600; }
.sayfa-ust h1 { color: #fff; margin: 0; letter-spacing: -.02em; }
.sayfa-ust-icerik { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; }
.sayfa-ust-icerik > div:first-child { max-width: 36rem; }
.sayfa-ust-aciklama { margin: .7rem 0 0; color: #eadff1; font-size: 1.05rem; line-height: 1.55; }
.sayfa-ust-haplar { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.sayfa-ust-haplar li { font-size: .82rem; font-weight: 600; color: #fff; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: .35rem .8rem; }
.sayfa-ust-haplar li::before { content: '✓'; color: var(--sari); margin-right: .35rem; }
.sayfa-ust-eylem { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* Kabuksuz tek mesaj sayfası (form güvenlik süresi, bakım) */
.yalin-sayfa { max-width: 560px; margin: 4rem auto; padding: 0 var(--bosluk, 16px); }