/* ==========================================================================
   Emma — ortak temel: yazı tipi, renkler, düğmeler, form alanları.
   Hem ziyaretçi sitesi hem yönetim paneli kullanır.
   ========================================================================== */

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Jakarta";
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-garamond-latin-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-garamond-latin-ext-normal.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-garamond-latin-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-garamond-latin-ext-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Logodaki EMMA harflerinin hafif mavimsi antrasiti ve ondan türeyen griler */
  --murekkep: #151a21;
  --murekkep-2: #242a33;
  --metin: #2c323a;
  --soluk: #626973;
  --cizgi: #e3e6ea;
  --cizgi-koyu: #cfd4da;
  --zemin: #ffffff;
  --kum: #f4f5f7;
  --kum-2: #e9ecef;

  /* Logodaki altın: orta ton çizgi/ikon, koyu ton beyaz zeminde yazı (AA), açık ton siyah zeminde */
  --altin: #d19c31;
  --altin-acik: #e7b95a;
  --altin-koyu: #a46909;
  --altin-zemin: #fcf4e3;

  --wa: #1d9a55;
  --wa-koyu: #17834a;
  --tehlike: #b42318;
  --tehlike-zemin: #fdecea;
  --basari: #1d7a46;
  --basari-zemin: #e9f5ee;
  --uyari: #9a5b06;
  --uyari-zemin: #fdf3e2;

  --yaricap: 16px;
  --yaricap-k: 12px;
  --golge: 0 1px 2px rgb(21 26 33 / 4%), 0 8px 24px rgb(21 26 33 / 6%);
  --golge-b: 0 18px 48px rgb(21 26 33 / 10%);

  --serif: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kap: 1280px;
  --gecis: 200ms cubic-bezier(.2, .7, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--murekkep); font-weight: 600; line-height: 1.12; letter-spacing: -0.028em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--altin-koyu); outline-offset: 3px; border-radius: 4px; }

.kap { width: min(100% - 32px, var(--kap)); margin-inline: auto; }
@media (min-width: 768px) { .kap { width: min(100% - 56px, var(--kap)); } }

.gizli { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.atla {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--murekkep); color: #fff; padding: .7rem 1rem; border-radius: var(--yaricap-k);
}
.atla:focus { top: 12px; }

/* --- İkon ---------------------------------------------------------------- */

.ikon {
  width: 1.15em; height: 1.15em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  vertical-align: -0.18em;
}

/* --- Düğmeler ------------------------------------------------------------ */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .95rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.dugme:active { transform: translateY(1px); }
.dugme .ikon { width: 1.1em; height: 1.1em; }

.dugme-koyu { background: var(--murekkep); color: #fff; }
.dugme-koyu:hover { background: #2a313b; }


.dugme-cizgi { background: #fff; color: var(--murekkep); border-color: var(--cizgi-koyu); }
.dugme-cizgi:hover { border-color: var(--murekkep); }

.dugme-acik { background: #fff; color: var(--murekkep); }
.dugme-acik:hover { background: var(--kum); }

.dugme-wa { background: var(--wa); color: #fff; }
.dugme-wa:hover { background: var(--wa-koyu); }

.dugme-tehlike { background: var(--tehlike); color: #fff; }
.dugme-tehlike:hover { background: #912018; }

.dugme-sade { background: transparent; color: var(--metin); padding-inline: .6rem; }
.dugme-sade:hover { color: var(--murekkep); background: var(--kum); }

.dugme-kucuk { padding: .55rem .95rem; font-size: .86rem; }
.dugme-buyuk { padding: 1rem 1.7rem; font-size: 1rem; }
.dugme-blok { width: 100%; }
.dugme[disabled] { opacity: .55; pointer-events: none; }

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

.alan { display: grid; gap: .4rem; }
.alan > label, .alan-etiket { font-size: .86rem; font-weight: 600; color: var(--murekkep); }
.alan-ipucu { font-size: .8rem; color: var(--soluk); }
.alan-hata, .field-validation-error { font-size: .82rem; color: var(--tehlike); font-weight: 500; }
.field-validation-valid { display: none; }

.girdi {
  width: 100%;
  padding: .78rem .95rem;
  background: #fff;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-k);
  font-size: .95rem; line-height: 1.4;
  transition: border-color var(--gecis), box-shadow var(--gecis);
  appearance: none;
}
.girdi::placeholder { color: #9ca3ac; }
.girdi:hover { border-color: #b9c0c8; }
.girdi:focus { outline: none; border-color: var(--murekkep); box-shadow: 0 0 0 4px rgb(21 26 33 / 8%); }
.girdi.input-validation-error { border-color: var(--tehlike); }
textarea.girdi { min-height: 130px; resize: vertical; }
select.girdi {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c6f75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
}

.onay { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.onay input {
  appearance: none; flex-shrink: 0;
  width: 20px; height: 20px; margin-top: .1rem;
  border: 1.5px solid var(--cizgi-koyu); border-radius: 6px; background: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--gecis), border-color var(--gecis);
}
.onay input::after {
  content: ""; width: 10px; height: 6px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform var(--gecis);
}
.onay input:checked { background: var(--murekkep); border-color: var(--murekkep); }
.onay input:checked::after { transform: rotate(-45deg) scale(1); }
.onay a { text-decoration: underline; text-underline-offset: 2px; }

/* --- Rozetler ------------------------------------------------------------ */

.rozet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .72rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; line-height: 1;
  background: var(--kum); color: var(--murekkep);
}
.rozet .ikon { width: .95em; height: .95em; }
.rozet-satilik { background: var(--murekkep); color: #fff; }
.rozet-kiralik { background: var(--altin-zemin); color: var(--altin-koyu); }
.rozet-rezerve { background: var(--uyari-zemin); color: var(--uyari); }
.rozet-kapandi { background: #eceef1; color: #565d66; }
.rozet-beyaz { background: #fff; color: var(--murekkep); }
.rozet-altin { background: var(--altin-zemin); color: var(--altin-koyu); }

/* --- Uyarı kutuları ------------------------------------------------------ */

.uyari-kutu {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: var(--yaricap-k);
  font-size: .92rem; border: 1px solid transparent;
}
.uyari-kutu .ikon { margin-top: .15rem; }
.uyari-basari { background: var(--basari-zemin); color: var(--basari); border-color: #c4e6d1; }
.uyari-hata { background: var(--tehlike-zemin); color: var(--tehlike); border-color: #f6c9c4; }
.uyari-bilgi { background: var(--altin-zemin); color: var(--altin-koyu); border-color: #ecdcb6; }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* --- Görsel yer tutucu --------------------------------------------------- */

.gorsel-yok {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: #eef0f3;
  color: #b9c0c8;
}
.gorsel-yok .ikon { width: 40px; height: 40px; stroke-width: 1.1; }