/* =========================================================================
   Doğuş Bayi Portalı — ana sayfa stilleri (kompakt sürüm)
   -------------------------------------------------------------------------
   Sayfa akışı: karşılama + arama + hesap kısayolları → kategori şeridi →
   öne çıkan ürünler.

   Tüm sınıflar "dg-" ön ekliyle yazılmıştır; temanın (Tailwind) sınıflarıyla
   çakışmaz. Tema değişkenleri kullanılır:
     --font-poppins   (gövde)   --font-dmserif (başlıklar)
     --color-navyBlue (#060c3b) --color-lightOrange (#f6f2eb)
   ========================================================================= */

/* ------------------------------- 1) TOKEN ------------------------------- */
:root {
  --dg-bg: #f4f2ed;
  --dg-surface: #ffffff;

  --dg-ink: #060c3b;
  --dg-ink-2: #1b2340;
  --dg-muted: #6f6a62;
  --dg-muted-2: #918c83;

  --dg-line: #e6e2d9;

  --dg-accent: #f26b38;
  --dg-accent-dark: #d9551f;
  --dg-accent-soft: #fdece3;

  --dg-container: 1360px;
  --dg-gutter: 24px;

  --dg-radius: 16px;
  --dg-radius-sm: 12px;

  --dg-shadow-sm: 0 1px 2px rgb(6 12 59 / 4%), 0 4px 14px rgb(6 12 59 / 4%);

  --dg-font: var(--font-poppins, "Poppins", "Helvetica Neue", Arial, sans-serif);
  --dg-font-head: var(--font-dmserif, "DM Serif Display", Georgia, serif);

  --dg-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------- 2) TEMEL ------------------------------- */
.dg-hero,
.dg-hero *,
.dg-cats,
.dg-cats *,
.dg-products,
.dg-products * {
  box-sizing: border-box;
}

.dg-container {
  width: 100%;
  max-width: var(--dg-container);
  margin-inline: auto;
  padding-inline: var(--dg-gutter);
}

.dg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ----------------------- 3) KARŞILAMA · ARAMA · KISAYOL ----------------------- */
.dg-hero {
  position: relative;
  z-index: 2;
  overflow: visible;
  padding-block: 26px 30px;
  background: linear-gradient(135deg, #060c3b 0%, #0c1442 58%, #111b55 100%);
  color: #fff;
}

.dg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 280px at calc(100% - 140px) 100%, rgb(242 107 56 / 26%), transparent 68%);
  pointer-events: none;
}

.dg-hero .dg-container {
  position: relative;
  z-index: 1;
}

.dg-hero__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dg-hero__welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
}

.dg-hero__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-family: var(--dg-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.dg-hero__welcome-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: var(--dg-font);
  line-height: 1.35;
}

.dg-hero__hello {
  overflow: hidden;
  color: rgb(255 255 255 / 80%);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-hero__hello strong {
  color: #fff;
  font-weight: 600;
}

.dg-hero__note {
  color: rgb(255 255 255 / 48%);
  font-size: 12px;
}

.dg-hero__account {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  color: #fff;
  font-family: var(--dg-font);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s var(--dg-ease), color 0.2s var(--dg-ease),
    border-color 0.2s var(--dg-ease);
}

.dg-hero__account:hover {
  border-color: #fff;
  background: #fff;
  color: var(--dg-ink);
}

.dg-hero__account svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-hero__title {
  margin: 0 0 16px;
  color: #fff;
  font-family: var(--dg-font-head);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Arama kutusu */
.dg-search {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 780px;
  padding: 6px;
  border-radius: var(--dg-radius);
  background: #fff;
  box-shadow: 0 18px 44px rgb(0 0 0 / 22%);
  transition: box-shadow 0.2s var(--dg-ease);
}

.dg-search:focus-within {
  box-shadow: 0 0 0 3px rgb(242 107 56 / 40%), 0 18px 44px rgb(0 0 0 / 22%);
}

.dg-search__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 44px;
  color: var(--dg-muted-2);
}

.dg-search__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-search__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--dg-ink);
  font-family: var(--dg-font);
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}

.dg-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.dg-search__input::placeholder {
  color: var(--dg-muted-2);
  opacity: 1;
}

.dg-search__submit {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 9px;
  height: 44px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--dg-radius-sm);
  background: var(--dg-accent);
  color: #fff;
  font-family: var(--dg-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--dg-ease);
}

.dg-search__submit:hover {
  background: var(--dg-accent-dark);
}

.dg-search__submit:focus-visible {
  outline: 2px solid var(--dg-ink);
  outline-offset: 2px;
}

.dg-search__submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-search__submit-short {
  display: none;
}

/* Hesap kısayolları */
.dg-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.dg-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  color: rgb(255 255 255 / 88%);
  font-family: var(--dg-font);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s var(--dg-ease), border-color 0.2s var(--dg-ease),
    color 0.2s var(--dg-ease);
}

.dg-shortcut-menu {
  position: relative;
}

.dg-shortcut-menu__trigger {
  list-style: none;
  cursor: pointer;
}

.dg-shortcut-menu__trigger::-webkit-details-marker {
  display: none;
}

.dg-shortcut-menu__chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.dg-shortcut-menu[open] {
  z-index: 40;
}

.dg-shortcut-menu[open] .dg-shortcut-menu__chevron {
  transform: rotate(180deg);
}

.dg-shortcut-menu__panel {
  position: absolute;
  z-index: 41;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  padding: 6px;
  border: 1px solid rgb(15 23 42 / 10%);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgb(0 0 0 / 20%);
}

.dg-shortcut-menu__panel a,
.dg-shortcut-menu__panel span {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #151a3b;
  font-family: var(--dg-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.dg-shortcut-menu__panel a:hover,
.dg-shortcut-menu__panel a:focus-visible {
  background: #fff1eb;
  color: #d94f2b;
  outline: none;
}

.dg-shortcut-menu__panel .is-disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

/* Masaüstü header; gerçek öğe yerleşimi header-assets.blade.php içindeki hedeflemeyle yapılır. */
@media (min-width: 1025px) {
  header form[action*="search"],
  header form[role="search"] {
    position: relative !important;
    width: 100%;
    border-radius: 14px;
    background: #f4f4f5;
    box-shadow: 0 4px 18px rgb(6 12 59 / 10%);
  }

  header form[action*="search"] input[type="search"],
  header form[role="search"] input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding-inline: 14px;
    border: 0;
    background: transparent;
  }

  header form[action*="search"] button,
  header form[role="search"] button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: var(--dg-accent);
    color: #fff;
  }
}

.dg-campaign {
  padding-block: 22px 4px;
  background: var(--dg-bg);
}

.dg-campaign__banner {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  max-height: 380px;
  border-radius: 18px;
  background: #111b55;
}

.dg-campaign__banner::after {
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(0deg, rgb(6 12 59 / 78%), transparent);
  content: "";
  pointer-events: none;
}

.dg-campaign__banner img {
  display: block;
  width: 100%;
  max-height: 380px;
  aspect-ratio: 16 / 5;
  object-fit: cover;
}

.dg-campaign__image-link {
  display: block;
}

.dg-campaign__content {
  position: absolute;
  z-index: 1;
  right: 28px;
  bottom: 24px;
  left: 28px;
  color: #fff;
}

.dg-campaign__content h2 {
  margin: 0;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 700;
}

.dg-campaign__content p {
  margin: 6px 0 0;
  font-size: 15px;
}

.dg-campaign__content a {
  display: inline-flex;
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--dg-accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 720px) {
  .dg-campaign {
    padding-block: 14px 2px;
  }

  .dg-campaign__banner {
    min-height: 120px;
    border-radius: 12px;
  }

  .dg-campaign__banner img {
    min-height: 120px;
    aspect-ratio: 4 / 3;
  }

  .dg-campaign__content {
    right: 16px;
    bottom: 16px;
    left: 16px;
  }
}

.dg-shortcut:hover {
  border-color: rgb(255 255 255 / 26%);
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

.dg-shortcut svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #f8a184;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------- 4) KATEGORİ ŞERİDİ ---------------------------- */
.dg-cats {
  padding-block: 18px 4px;
  background: var(--dg-bg);
}

.dg-cats__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dg-chips {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 2px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.dg-chips:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 3px;
  border-radius: var(--dg-radius-sm);
}

.dg-chips::-webkit-scrollbar {
  display: none;
}

.dg-chips > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Şerit taşarsa kenarları yumuşakça solar; son kategori yarım kesilmiş gibi
   görünmez. Sınıflar betik tarafından güncellenir. */
.dg-cats__row.is-scrollable:not(.is-at-end) .dg-chips {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}

.dg-cats__row.is-scrollable:not(.is-at-start):not(.is-at-end) .dg-chips {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 34px,
    #000 calc(100% - 34px),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 34px,
    #000 calc(100% - 34px),
    transparent
  );
}

.dg-cats__row.is-scrollable:not(.is-at-start).is-at-end .dg-chips {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px);
  mask-image: linear-gradient(to right, transparent, #000 34px);
}

.dg-cats__nav {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.dg-cats__nav[hidden] {
  display: none;
}

.dg-cats__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--dg-line);
  border-radius: 999px;
  background: var(--dg-surface);
  color: var(--dg-ink-2);
  box-shadow: var(--dg-shadow-sm);
  cursor: pointer;
  transition: border-color 0.2s var(--dg-ease), color 0.2s var(--dg-ease),
    box-shadow 0.2s var(--dg-ease);
}

.dg-cats__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-cats__arrow:hover:not(:disabled) {
  border-color: var(--dg-accent);
  color: var(--dg-accent-dark);
}

.dg-cats__arrow:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 2px;
}

.dg-cats__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.dg-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding-inline: 16px;
  border: 1px solid var(--dg-line);
  border-radius: 999px;
  background: var(--dg-surface);
  color: var(--dg-ink-2);
  font-family: var(--dg-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--dg-shadow-sm);
  transition: border-color 0.2s var(--dg-ease), color 0.2s var(--dg-ease),
    box-shadow 0.2s var(--dg-ease), transform 0.2s var(--dg-ease);
}

.dg-chip:hover {
  border-color: var(--dg-accent);
  color: var(--dg-accent-dark);
  box-shadow: 0 8px 22px rgb(6 12 59 / 9%);
  transform: translateY(-1px);
}

.dg-chip:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 2px;
}

.dg-chip__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--dg-accent);
}

.dg-chip__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-chip--all {
  border-color: var(--dg-ink);
  background: var(--dg-ink);
  color: #fff;
}

.dg-chip--all .dg-chip__icon {
  color: #fff;
}

.dg-chip--all:hover {
  border-color: var(--dg-accent);
  background: var(--dg-accent);
  color: #fff;
}

/* ---------------------------- 5) ÖNE ÇIKAN ÜRÜNLER ---------------------------- */
.dg-products {
  padding-block: 10px 56px;
  background: var(--dg-bg);
}

/* Tema karuseli kendi "container" sınıfını ve üst boşluğunu getirir;
   sayfa ızgarasına hizalanması için sıfırlanır. */
.dg-products .container {
  max-width: none;
  margin-top: 0;
  padding-inline: 0;
}

/* Tema ürün kartının kökü şeffaftır ve ürün bilgisi kutusu 36 px aşağı
   kaydırılmıştır. Tek satırlık ürün adlarında kart, satırdaki en uzun karttan
   kısa kaldığı için altında sayfa zemini (bej) bir bant görünüyordu.
   Çözüm: kart köküne beyaz zemin + ürün adına iki satırlık yer. Böylece
   satırdaki kartlar eşit yükseklikte kalır ve bant oluşmaz. */
.dg-products .group {
  border-radius: var(--dg-radius-sm);
  background: var(--dg-surface);
}

.dg-products .group > div:nth-child(2) {
  border-radius: 0 0 var(--dg-radius-sm) var(--dg-radius-sm);
}

.dg-products .group > div:nth-child(2) > p:first-child {
  display: -webkit-box;
  min-height: 3rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Ürün akışı: kaydırdıkça yüklenen ızgara. Tema kartları sabit genişlikli
   karusel için tasarlandığından ızgarada kolon genişliğine uyması sağlanır. */
.dg-feed__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 20px;
}

.dg-feed__title {
  margin: 0;
  color: var(--dg-ink);
  font-family: var(--dg-font-head);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.15;
}

.dg-feed__all {
  color: var(--dg-accent-dark);
  font-family: var(--dg-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.dg-feed__all:hover {
  text-decoration: underline;
}

.dg-feed__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  align-items: start;
}

.dg-feed__grid > *,
.dg-feed__grid .group > div {
  min-width: 0;
  max-width: none;
}

.dg-feed__sentinel {
  height: 1px;
}

.dg-feed__status {
  margin: 28px 0 0;
  color: var(--dg-muted);
  font-family: var(--dg-font);
  font-size: 14px;
  text-align: center;
}

.dg-feed__retry {
  margin-left: 8px;
  padding: 6px 14px;
  border: 1px solid var(--dg-line);
  border-radius: 999px;
  background: var(--dg-surface);
  color: var(--dg-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 720px) {
  .dg-feed__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ------------------------------- 6) RESPONSIVE ------------------------------- */
@media (max-width: 1024px) {
  .dg-hero {
    padding-block: 22px 26px;
  }

  .dg-products {
    padding-bottom: 44px;
  }
}

@media (max-width: 720px) {
  :root {
    --dg-gutter: 18px;
  }

  .dg-hero__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .dg-hero__title {
    margin-bottom: 14px;
    font-size: 22px;
  }

  .dg-hero__note {
    display: none;
  }

  .dg-search {
    padding: 5px;
  }

  .dg-search__icon {
    width: 34px;
  }

  .dg-search__input {
    font-size: 14px;
  }

  .dg-search__submit {
    gap: 0;
    padding-inline: 16px;
  }

  .dg-search__submit-long,
  .dg-search__submit svg {
    display: none;
  }

  .dg-search__submit-short {
    display: inline;
  }

  .dg-shortcuts {
    gap: 6px;
    margin-top: 14px;
  }

  .dg-shortcut {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .dg-cats {
    padding-block: 14px 2px;
  }

  .dg-cats__nav {
    display: none;
  }

  .dg-chip {
    height: 40px;
    padding-inline: 14px;
    font-size: 13px;
  }

  .dg-products {
    padding-top: 4px;
    padding-bottom: 36px;
  }
}

@media (max-width: 640px) {
  /* Mobilde ürün adı iki satırı 2rem'de kaplar (max-sm:leading-4). */
  .dg-products .group > div:nth-child(2) > p:first-child {
    min-height: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dg-chip,
  .dg-shortcut,
  .dg-cats__arrow,
  .dg-hero__account,
  .dg-search,
  .dg-search__submit {
    transition: none;
  }

  .dg-chip:hover {
    transform: none;
  }
}

/* --------------------------- 7) STOK GÖRÜNÜRLÜĞÜ --------------------------- */
/* Stokta olmayan ürünler kart üzerinde soluk gösterilir; sepete ekleme
   düğmeleri devre dışı kalır. */
.product-card.out-of-stock,
.product-item.out-of-stock {
  opacity: 0.6;
}

.product-card.out-of-stock .product-card__media,
.product-item.out-of-stock .product-card__media {
  opacity: 0.7;
}

.product-card.out-of-stock button,
.product-card.out-of-stock a[role="button"],
.product-item.out-of-stock button,
.product-item.out-of-stock a[role="button"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ------------------------------ 8) ALTBİLGİ ------------------------------ */
/* Sayfa içeriği ekranı doldurmadığında altbilgi ekranın en altına iner;
   içerik uzunsa normal akışta kalır.

   Tema tüm vitrin sayfalarını #app içinde şu sırayla çizer: header → main →
   (eklenti bölümleri) → hizmetler → footer. #app esnek sütun yapılır ve
   artan boşluğu <main> alır; böylece altbilgi sayfanın en altında durur.
   Bu dosya her vitrin sayfasında yüklendiği için kural tüm mağaza
   sayfalarında geçerlidir; yönetim paneli etkilenmez. */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

#app > * {
  flex-shrink: 0;
}

#app > main {
  flex-grow: 1;
}

/* Anasayfada artan boşluk beyaz bant olarak görünmesin; zemin, son bölümün
   (öne çıkan ürünler) bej rengiyle aynı yapılır. */
#app > main:has(.dg-hero) {
  background: var(--dg-bg);
}

/* ----------------------- 9) TEMLİKLİ CİHAZ SORGULAMA ----------------------- */
/* Müşteri bilgileri formu; doğrulanınca WhatsApp sohbeti açılır. */
#app > main:has(.dg-temlikli) {
  background: var(--dg-bg);
}

.dg-temlikli,
.dg-temlikli * {
  box-sizing: border-box;
}

.dg-temlikli {
  padding-block: 28px 56px;
  color: var(--dg-ink);
  font-family: var(--dg-font);
}

.dg-temlikli__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--dg-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.dg-temlikli__back:hover {
  color: var(--dg-accent-dark);
}

.dg-temlikli__back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-temlikli__card {
  max-width: 560px;
  padding: 28px;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-sm);
}

.dg-temlikli__eyebrow {
  margin: 0 0 6px;
  color: var(--dg-accent-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dg-temlikli__title {
  margin: 0 0 8px;
  font-family: var(--dg-font-head);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.15;
}

.dg-temlikli__lead {
  margin: 0 0 22px;
  color: var(--dg-muted);
  font-size: 14px;
  line-height: 1.55;
}

.dg-temlikli__alert {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--dg-radius-sm);
  background: var(--dg-accent-soft);
  color: var(--dg-accent-dark);
  font-size: 13px;
  font-weight: 500;
}

.dg-temlikli__form {
  display: grid;
  gap: 16px;
}

.dg-temlikli__field {
  display: grid;
  gap: 6px;
}

.dg-temlikli__field label {
  color: var(--dg-ink-2);
  font-size: 13px;
  font-weight: 600;
}

.dg-temlikli__field input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--dg-line);
  border-radius: var(--dg-radius-sm);
  background: #fff;
  color: var(--dg-ink);
  font-family: var(--dg-font);
  font-size: 15px;
  transition: border-color 0.2s var(--dg-ease), box-shadow 0.2s var(--dg-ease);
}

.dg-temlikli__field input:focus {
  border-color: var(--dg-accent);
  box-shadow: 0 0 0 3px rgb(242 107 56 / 18%);
  outline: none;
}

.dg-temlikli__field input[aria-invalid="true"] {
  border-color: #dc2626;
}

.dg-temlikli__error {
  margin: 0;
  color: #dc2626;
  font-size: 12px;
}

.dg-temlikli__submit {
  min-height: 48px;
  margin-top: 4px;
  border: 0;
  border-radius: 999px;
  background: var(--dg-accent);
  color: #fff;
  font-family: var(--dg-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--dg-ease);
}

.dg-temlikli__submit:hover:not(:disabled) {
  background: var(--dg-accent-dark);
}

.dg-temlikli__submit:disabled {
  background: #d6d3cd;
  color: #fff;
  cursor: not-allowed;
}

.dg-temlikli__note {
  margin: 0;
  color: var(--dg-muted-2);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .dg-temlikli__card {
    padding: 20px;
  }
}