* { box-sizing: border-box; }
:root { color-scheme: dark; font-family: Georgia, serif; color: #fff8f0; background: #260710; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 45% 20%, #490b1b, #260710 70%); }
main { width: min(100%, 870px); display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d6b36a80; border-radius: 24px; overflow: hidden; box-shadow: 0 28px 90px #130208a6; background: #300912; }
.surat { min-height: 470px; background: #490b1b url(atirgullar.webp) center / cover no-repeat; border-right: 1px solid #d6b36a60; }
.mazmun { padding: 44px clamp(20px, 5vw, 58px) 34px; text-align: center; }
.belgi { display: block; margin: 0 auto 14px; }
h1 { color: #f2d698; font-size: clamp(44px, 7vw, 69px); font-weight: 400; line-height: .9; letter-spacing: .055em; margin: 0; }
h1 span { display: inline-block; font-size: .36em; letter-spacing: .24em; }
.shior { font-size: 18px; font-style: italic; margin: 18px 0 28px; }
nav { display: grid; gap: 10px; }
nav a { display: grid; grid-template-columns: 23px 1fr 15px; gap: 10px; align-items: center; text-align: left; padding: 13px 14px; min-height: 52px; border-radius: 9px; border: 1px solid #d6b36a90; color: #fff8f0; text-decoration: none; background: #490b1b; font: 600 15px system-ui, sans-serif; }
nav svg, nav span { color: #f2d698; }
nav a[href]:hover { background: #66142a; }
nav a:focus-visible { outline: 2px solid #fff8f0; outline-offset: 3px; }
nav a[aria-disabled] { opacity: .75; }
.holat { margin: 13px 0 0; color: #f2d698; font-size: 14px; }
footer { margin: 28px 0 0; color: #f2d698; font-size: 15px; font-style: italic; }
@media (max-width: 660px) {
  body { padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom)); }
  main { max-width: 390px; grid-template-columns: 1fr; border-radius: 17px; }
  .surat { min-height: 0; height: clamp(110px, 32vw, 155px); border: 0; border-bottom: 1px solid #d6b36a60; background-position: center 43%; }
  .mazmun { padding: 17px 20px 19px; }
  .belgi { width: 42px; height: 29px; margin-bottom: 8px; }
  h1 { font-size: clamp(39px, 11vw, 51px); }
  .shior { font-size: 16px; margin: 11px 0 16px; }
  nav { max-width: 310px; margin: 0 auto; gap: 8px; }
  nav a { min-height: 46px; padding: 9px 12px; font-size: 14px; }
  footer { margin-top: 19px; font-size: 14px; }
}
@media (max-width: 660px) and (max-height: 650px) {
  .surat { height: 98px; }
  .mazmun { padding-top: 12px; padding-bottom: 13px; }
  .belgi { height: 23px; margin-bottom: 5px; }
  .shior { margin: 8px 0 12px; }
  footer { margin-top: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  nav a { transition: background-color .2s ease; }
}