/* ---------------------------------------------------------------------------
   TvOra — ortak tasarım dili
   ---------------------------------------------------------------------------
   Sıcak kâğıt zemin, mürekkep gibi koyu metin, tek bir vurgu rengi.
   Televizyonun kendisi koyu; sayfanın da koyu olması gerekmiyor. Koyu tema
   bir süre denendi ve geri alındı: ürünün kendisi zaten karanlık bir odada
   çalışıyor, sitesi ferah olsun.

   Değişken adları rol bildirir (zemin, yüzey, metin, vurgu) — renk bildirmez.
   Vurgu rengi tek satırda duruyor; marka değişirse burayı değiştirmek yeterli.

   Başlıklarda serif (Fraunces): arayüzü bir ürüne benzetiyor, panele değil.
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');

:root {
  --zemin:        #FBFAF7;   /* sayfa zemini — kâğıt, saf beyaz değil */
  --yuzey:        #FFFFFF;   /* kart, tablo */
  --yuzey-2:      #F3F0EA;   /* üzerine gelince, girintili alan */
  --metin:        #14120F;
  --metin-2:      #4A443C;
  --soluk:        #8B8378;
  --cizgi:        #E6E1D8;
  --vurgu:        #C2410C;   /* tek vurgu — marka değişince yalnızca bu satır */
  --vurgu-parlak: #EA580C;
  --vurgu-los:    #FFF3EC;
  --derin:        #14120F;   /* televizyon camı, kapanış bloğu */
  --iyi:          #15803D;
  --kotu:         #B91C1C;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --golge-s: 0 1px 2px rgba(20,18,15,.05);
  --golge-m: 0 4px 16px -4px rgba(20,18,15,.10), 0 1px 3px rgba(20,18,15,.05);
  --golge-l: 0 24px 60px -20px rgba(20,18,15,.22);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* Kâğıdın düz bir renk gibi durmaması için çok hafif bir doku. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(20,18,15,.035) 1px, transparent 0);
  background-size: 24px 24px;
}

body > * { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 .4em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

.soluk   { color: var(--soluk); }
.kucuk   { font-size: .875rem; }
.ortala  { text-align: center; }

/* --- üst bar ------------------------------------------------------------ */

.ustbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--cizgi);
  background: rgba(251,250,247,.85);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.marka {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  color: var(--metin);
}
.marka:hover { text-decoration: none; }
.marka span { color: var(--vurgu); }

/* Marka işareti: ekran + oyulmuş oynatma üçgeni. Üçgen boyanmadığı için
   işaret tek renkle her zeminde okunur. */
.marka { display: inline-flex; align-items: center; gap: 9px; }
.isaret { width: 26px; height: 26px; fill: var(--vurgu); flex: none; display: block; }

/* Menü ortada: marka solda, eylem sağda, gezinme ikisinin arasında ortalanmış.
   Üç bölgeyi eşit paylaştırmak yerine yan sütunlara aynı genişliği verip
   ortayı gerçekten sayfanın ortasına oturtuyoruz. */
.ustbar { display: grid; grid-template-columns: 1fr auto 1fr; }
.ustbar .marka { justify-self: start; }
.ustbar nav { display: flex; gap: 26px; align-items: center; justify-self: center; }
.ustbar .eylem { justify-self: end; }
.ustbar nav a { color: var(--metin-2); font-size: .92rem; font-weight: 500; }
.ustbar nav a:hover { color: var(--vurgu); text-decoration: none; }

/* --- düğmeler ----------------------------------------------------------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: var(--metin);
  color: var(--zemin);
  font: 600 .95rem/1 var(--sans);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none;
}
.dugme:hover { background: #2A251E; text-decoration: none; transform: translateY(-1px); box-shadow: var(--golge-m); }
.dugme:active { transform: translateY(0); }
.dugme:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }

.dugme.vurgu { background: var(--vurgu); }
.dugme.vurgu:hover { background: var(--vurgu-parlak); }

.dugme.hafif {
  background: transparent;
  color: var(--metin);
  border-color: var(--cizgi);
}
.dugme.hafif:hover { background: var(--yuzey-2); box-shadow: none; }

.dugme.kucukd { padding: 8px 14px; font-size: .85rem; }
.dugme.tam { width: 100%; }

/* --- form --------------------------------------------------------------- */

.alan { margin-bottom: 18px; }
.alan > label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--soluk);
  margin-bottom: 7px;
}

/* `type` yazılmamış bir input da metin alanıdır; seçiciyi tipe göre daraltmak
   o alanların biçimsiz kalmasına yol açıyordu. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select {
  width: 100%;
  padding: 13px 15px;
  font: 400 1rem/1.3 var(--sans);
  color: var(--metin);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-s);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-los);
}
input::placeholder { color: #B5AC9E; }

/* Kod ve lisans alanları: harf harf okunacakları için monospace ve geniş. */
input.kodalani {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 1.15rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- kart --------------------------------------------------------------- */

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-m);
  padding: 26px;
  box-shadow: var(--golge-s);
}

/* --- rozet -------------------------------------------------------------- */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: var(--yuzey-2);
  color: var(--metin-2);
}
.rozet.iyi   { background: #E7F6EC; color: var(--iyi); }
.rozet.kotu  { background: #FCEAEA; color: var(--kotu); }
.rozet.vurgu   { background: var(--vurgu-los); color: var(--vurgu); }

.rozet::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rozet.noktasiz::before { display: none; }

/* --- bildirim ----------------------------------------------------------- */

.bildirim {
  padding: 13px 16px;
  border-radius: var(--r-s);
  font-size: .92rem;
  margin-bottom: 18px;
  border: 1px solid;
}
.bildirim.kotu { background: #FCEAEA; border-color: #F2C7C7; color: #8B1A1A; }
.bildirim.iyi  { background: #E7F6EC; border-color: #BFE3CB; color: #14532D; }

/* --- yükleniyor --------------------------------------------------------- */

.donen {
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: don .6s linear infinite;
  display: inline-block;
}
@keyframes don { to { transform: rotate(360deg); } }

/* --- alt bilgi ---------------------------------------------------------- */

.altbilgi {
  border-top: 1px solid var(--cizgi);
  padding: 28px 32px;
  color: var(--soluk);
  font-size: .85rem;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.altbilgi a { color: var(--soluk); }
.altbilgi .bosluk { flex: 1; }

@media (max-width: 640px) {
  .ustbar { padding: 16px 20px; gap: 16px; }
  .ustbar nav { gap: 14px; }
  .kart { padding: 20px; }
}

/* --- alt bilgi ---------------------------------------------------------- */
/* Dört sütun: marka, ürün, yasal, destek. Yasal bağlantıların görünür olması
   yalnızca zorunluluk değil, güven meselesi — gizlenmiş bir gizlilik
   politikası kimseyi ikna etmez. */

.altbilgi { border-top: 1px solid var(--cizgi); background: var(--yuzey);
            margin-top: 60px; padding: 52px 0 0; }
.altkabuk { max-width: 1120px; margin: 0 auto; padding: 0 32px;
            display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.altmarka .isaret { width: 30px; height: 30px; margin-bottom: 12px; }
.altmarka span { display: block; font-family: var(--serif); font-weight: 700;
                 font-size: 1.15rem; margin-bottom: 8px; }
.altmarka span b { color: var(--vurgu); }
.altmarka p { color: var(--soluk); font-size: .9rem; max-width: 34ch; margin: 0; }
.altsutun h4 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
               color: var(--soluk); margin: 0 0 14px; font-weight: 700; }
.altsutun a { display: block; color: var(--metin-2); font-size: .91rem; margin-bottom: 9px; }
.altsutun a:hover { color: var(--vurgu); text-decoration: none; }

.altson { border-top: 1px solid var(--cizgi); margin-top: 44px; padding-top: 22px;
          padding-bottom: 26px; display: flex; gap: 20px; flex-wrap: wrap;
          align-items: center; justify-content: space-between;
          color: var(--soluk); font-size: .85rem; }

@media (max-width: 860px) {
  .altkabuk { grid-template-columns: 1fr 1fr; gap: 30px; }
  .altmarka { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .altkabuk { grid-template-columns: 1fr; }

  /* Dar ekranda üç eleman alt alta dizilip başlığı gereksiz uzatıyordu.
     Marka ile düğme aynı satırda kalıyor, gezinme altına iniyor; yerleşimi
     açıkça yazmak şart, yoksa ızgara düğmeyi üçüncü satıra atıyor. */
  .ustbar { grid-template-columns: auto auto; row-gap: 10px; padding: 14px 20px; }
  .ustbar .marka { grid-area: 1 / 1; }
  .ustbar .eylem { grid-area: 1 / 2; justify-self: end; }
  .ustbar nav { grid-area: 2 / 1 / 3 / -1; justify-self: start;
                flex-wrap: wrap; gap: 18px; }
}