/* ========== Fonts ========== */
@font-face{
  font-family: "Momo Trust Display";
  src: url("../fonts/MomoTrustDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Nata Sans";
  src: url("../fonts/NataSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Nata Sans";
  src: url("../fonts/NataSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Nata Sans";
  src: url("../fonts/NataSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Nata Sans";
  src: url("../fonts/NataSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== Vars ========== */
:root{
  --nl-orange:#FF4D1A;
  --nl-bg:#ffffff;
  --nl-text:#111;
  --nl-muted:#6B6B6B;
  --nl-border:#EAEAEA;
  --nl-danger:#E21B1B;
  --nl-radius:22px;
  --nl-shadow: 0 18px 60px rgba(0,0,0,.18);
}

/* JS body-lock helper */
html.nl-lock{ overflow:hidden; }
html.nl-lock body{ overflow:hidden; }

/* overlay */
.nl-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 9998;
}

/* modal shell */
.nl-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 28px;
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index: 9999;
}

/* active states */
.nl-overlay.is-open{ opacity:1; pointer-events:auto; }
.nl-modal.is-open{ opacity:1; pointer-events:auto; }

.nl-card{
  width:min(980px, calc(100vw - 56px));
  background: var(--nl-bg);
  border-radius: var(--nl-radius);
  box-shadow: var(--nl-shadow);
  position:relative;
  overflow:hidden; /* köşeler bozulmasın */
}

/* close button (çerçeve içinde, tam ortalı) */
.nl-close{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--nl-border);
  background: #F6F6F6;
  color:#222;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 3;
}
.nl-close span{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* inner scroll area (scroll burada, dış köşeler sabit) */
.nl-innerScroll{
  max-height: calc(100vh - 56px);
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 26px;
}

/* grid */
.nl-grid{
  display:grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 26px;
  align-items: stretch;
}

/* media */
.nl-media{
  border-radius: 18px;
  overflow:hidden;
  background:#f2f2f2;
}
.nl-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}

/* content */
.nl-content{ padding-right: 4px; }

.nl-title{
  font-family:"Momo Trust Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--nl-text);
  margin: 2px 0 6px;
}
.nl-sub{
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--nl-muted);
  margin: 0 0 16px;
}

/* form */
.nl-form{ margin-top: 6px; }

.nl-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nl-field{ margin-bottom: 12px; }

.nl-label{
  display:block;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--nl-text);
  margin: 0 0 8px;
}

.nl-input{
  width:100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--nl-border);
  padding: 0 14px;
  outline:none;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--nl-text);
  background:#fff;
}

/* Select ufak iyilestirme */
select.nl-input{ cursor:pointer; }

.nl-hint{
  margin-top: 6px;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: var(--nl-muted);
}

.nl-input:focus{
  border-color: rgba(255,77,26,.55);
  box-shadow: 0 0 0 3px rgba(255,77,26,.14);
}

.nl-field.has-error .nl-input{
  border-color: rgba(226,27,27,.65);
  box-shadow: 0 0 0 3px rgba(226,27,27,.12);
}

.nl-err{
  min-height: 16px;
  margin-top: 6px;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: var(--nl-danger);
}

/* checks */
.nl-checks{ margin: 6px 0 14px; }
.nl-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin: 8px 0;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color:#333;
}
.nl-check input{ margin-top: 3px; }
.nl-link{
  color:#1D4ED8;
  text-decoration: underline;
}

/* actions */
.nl-actions{ margin-top: 10px; }
.nl-btn{
  width:100%;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: var(--nl-orange);
  color:#fff;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor:pointer;
}
.nl-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.nl-toast{
  margin-top: 12px;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color:#0F5132;
  background: #E7F6EE;
  border: 1px solid #CDEEDB;
  padding: 10px 12px;
  border-radius: 12px;
  display:none;
}
.nl-toast.is-show{ display:block; }

/* ========== KVKK modal ========== */
.nl-kvkk{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 10000;
}
.nl-kvkk.is-open{ opacity:1; pointer-events:auto; }

.nl-kvkk__card{
  width: min(440px, calc(100vw - 44px));
  background:#fff;
  border-radius: 18px;
  box-shadow: var(--nl-shadow);
  position:relative;
  overflow:hidden;
  padding: 18px 18px 16px;
}

.nl-kvkk__close{
  position:absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--nl-border);
  background:#F6F6F6;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nl-kvkk__close span{ font-size: 20px; transform: translateY(-1px); }

.nl-kvkk__title{
  font-family:"Momo Trust Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin: 4px 44px 10px 4px;
  color: var(--nl-text);
}
.nl-kvkk__body{
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color:#444;
}
.nl-kvkk__actions{
  display:flex;
  justify-content:flex-end;
  margin-top: 14px;
}
.nl-kvkk__btn{
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border:none;
  background: var(--nl-orange);
  color:#fff;
  font-family:"Nata Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  cursor:pointer;
}

/* ========== Mobile ========== */
@media (max-width: 860px){
  .nl-modal{ padding: 16px; }

  .nl-card{
    width: calc(100vw - 32px);
    border-radius: 22px;
  }

  .nl-innerScroll{
    max-height: calc(100vh - 32px);
    /* Close butonu resmin uzerine binmesin diye icerigi asagi it */
    padding: 62px 14px 14px;
  }

  .nl-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .nl-close{
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    z-index: 4;
  }

  .nl-media{
    border-radius: 16px;
  }

  .nl-media img{
    height: 180px;
    object-fit: cover;
  }

  .nl-row{ grid-template-columns: 1fr; }
}