/*
 * ==========================================================================
 * TÜM SAYFALAR - GLOBAL TİPOGRAFİ VE YAZI BOYUTLARI
 * ==========================================================================
 *
 * ETKİ ALANI:
 * - Bütün müşteri sayfalarının normal metinleri
 * - Bütün standart butonlar ve bağlantı biçimli butonlar
 * - Form alanları: input, select ve textarea
 * - Tablolar, etiketler, açılır menüler, kırıntılar ve sayfalama alanları
 * - H1-H6 başlık hiyerarşisi
 *
 * ETKİLEMEZ:
 * - Font Awesome ve başka ikon fontları
 * - SVG, PNG, JPG, GIF ve video dosyaları
 * - Yerleşim, renk, radius, border, gölge ve animasyon ayarları
 *
 * NASIL DEĞİŞTİRİLİR:
 * - Yalnız aşağıdaki :root bölümünde ":" işaretinden sonraki değeri değiştir.
 * - Değişken adını ve satır sonundaki ";" işaretini silme.
 * - Sayfaya özel bir istisna gerektiğinde bu dosyayı bozmak yerine ilgili
 *   sayfa CSS dosyasında route kapsamı kullanılır (örnek: #product-product).
 * ==========================================================================
 */

@font-face {
  font-family: "DEKOHOP Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2");
}

/* DEKOHOP-EDITABLE-SETTINGS-START */
/* DEKOHOP-KALICI-ELLE-DUZENLEME-KURALI
 * Bu dosyadaki her yeni tipografi ayarı:
 * 1. Aşağıdaki :root alanında anlamlı bir değişken olarak tanımlanır.
 * 2. Türkçe kategori ve açıklamayla birlikte eklenir.
 * 3. İkon fontlarını ve SVG simgelerini ezmez.
 * 4. Sayfaya özel istisnalar ayrı ve açık bir route kapsamında tutulur.
 * 5. Gelecekteki mobil kurallar masaüstü tipografisini yanlışlıkla ezmez.
 */
:root {
  /* 01 - ORTAK YAZI TİPİ
   * font-family: Bütün mağazanın temel yazı tipi ailesi.
   * Inter yüklenemezse sırayla Segoe UI, Arial ve sans-serif kullanılır.
   */
  --dekohop-font-family: "DEKOHOP Inter", "Inter", "Segoe UI", Arial, sans-serif;

  /* 02 - NORMAL METİN VE FORM PUNTOLARI
   * text-base: Paragraf, liste, tablo, hesap, sepet ve normal sayfa metni.
   * text-small: Bilinçli olarak daha küçük yardımcı/açıklama metni.
   * text-button: Bütün standart butonların yazı büyüklüğü.
   * text-input: Input, select ve textarea içindeki yazı büyüklüğü.
   * text-menu: Hesap, sepet ve açılır liste satırlarının ortak yazı büyüklüğü.
   */
  --dekohop-text-base: 14px;
  --dekohop-text-small: 13px;
  --dekohop-text-button: 14px;
  --dekohop-text-input: 14px;
  --dekohop-text-menu: 14px;

  /* 03 - BAŞLIK PUNTOLARI
   * Başlıklar normal metinden bilinçli olarak büyüktür; görsel hiyerarşi sağlar.
   */
  --dekohop-heading-h1: 28px;
  --dekohop-heading-h2: 24px;
  --dekohop-heading-h3: 20px;
  --dekohop-heading-h4: 18px;
  --dekohop-heading-h5: 16px;
  --dekohop-heading-h6: 14px;

  /* 04 - KALINLIK VE SATIR YÜKSEKLİĞİ
   * weight-normal: Normal metin kalınlığı.
   * weight-medium: Buton ve önemli kısa metin kalınlığı.
   * weight-heading: Başlık kalınlığı.
   * line-height-base: Normal metinlerin satır yüksekliği.
   * line-height-control: Buton ve form alanlarının satır yüksekliği.
   * line-height-heading: Başlıkların satır yüksekliği.
   */
  --dekohop-font-weight-normal: 400;
  --dekohop-font-weight-medium: 500;
  --dekohop-font-weight-heading: 700;
  --dekohop-line-height-base: 1.55;
  --dekohop-line-height-control: 1.42857143;
  --dekohop-line-height-heading: 1.2;
}
/* DEKOHOP-EDITABLE-SETTINGS-END */

/* DEKOHOP-COMMON-DESKTOP-RULES-START */
html,
body {
  font-family: var(--dekohop-font-family);
}

body {
  font-size: var(--dekohop-text-base);
  font-weight: var(--dekohop-font-weight-normal);
  line-height: var(--dekohop-line-height-base);
}

/* Tarayıcılar form kontrollerinde body fontunu her zaman miras almaz. */
button,
input,
select,
textarea,
.btn {
  font-family: var(--dekohop-font-family);
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.btn {
  font-size: var(--dekohop-text-button);
  font-weight: var(--dekohop-font-weight-medium);
  line-height: var(--dekohop-line-height-control);
}

input:not([type="button"]):not([type="reset"]):not([type="submit"]),
select,
textarea,
.form-control {
  font-size: var(--dekohop-text-input);
  line-height: var(--dekohop-line-height-control);
}

/* OpenCart'ın sık kullanılan standart metin alanlarında tek taban punto. */
p,
li,
dt,
dd,
th,
td,
label,
.help-block,
.alert,
.breadcrumb,
.pagination,
.list-group-item,
.dropdown-menu > li > a {
  font-family: var(--dekohop-font-family);
}

.dropdown-menu > li > a,
.list-group-item {
  font-size: var(--dekohop-text-menu);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--dekohop-font-family);
  font-weight: var(--dekohop-font-weight-heading);
  line-height: var(--dekohop-line-height-heading);
}

h1 { font-size: var(--dekohop-heading-h1); }
h2 { font-size: var(--dekohop-heading-h2); }
h3 { font-size: var(--dekohop-heading-h3); }
h4 { font-size: var(--dekohop-heading-h4); }
h5 { font-size: var(--dekohop-heading-h5); }
h6 { font-size: var(--dekohop-heading-h6); }

/*
 * Font Awesome glifleri metin fontuna çevrilmez. Bu açık koruma, daha sonra
 * eklenecek bileşen kurallarına karşı da ikonların bozulmasını önler.
 */
.fa,
[class^="fa-"],
[class*=" fa-"] {
  font-family: FontAwesome;
}
/* DEKOHOP-COMMON-DESKTOP-RULES-END */

/* DEKOHOP-RESPONSIVE-RULES-START */
/*
 * Mobil sayfa turuna geçildiğinde yalnız mobil cihaz yeteneklerine göre gereken
 * istisnalar buraya eklenecek. Şimdilik masaüstü görünümünü etkileyen kural yoktur.
 */
/* DEKOHOP-RESPONSIVE-RULES-END */