:root{
  --bg:#f4f2eb;
  --white:#fff;
  --text:#171717;
  --muted:#6f6a57;
  --primary:#a69963;
  --primary-dark:#4b4324;
  --soft:#dfe8bb;
  --border:#ddd8c9;
  --gold:#f0e327;
  --shadow:0 20px 50px rgba(53,45,20,.10);
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:linear-gradient(180deg,#f5f3ed,#efeae0);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif
}

a{
  text-decoration:none;
  color:inherit
}

.container{
  max-width:1380px;
  margin:0 auto;
  padding:0 20px
}

.page{
  padding:120px 20px 90px
}

.glass{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(166,153,99,.20);
  box-shadow:var(--shadow)
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid rgba(166,153,99,.18)
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0
}

.brand{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1
}

.brand-logo{
  width:78px;
  height:78px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--primary),#beb17a);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  color:#fff;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(95,83,30,.18)
}

.brand-logo img{
  width:100%;
  height:100%;
  object-fit:cover
}

.brand h1{
  margin:0;
  font-size:28px;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--primary-dark)
}

.brand p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:16px
}

.main-nav{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap
}

.menu-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 18px;
  border-radius:16px;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(166,153,99,.22);
  box-shadow:0 10px 24px rgba(95,83,30,.06);
  font-size:16px;
  font-weight:800;
  position:relative;
  overflow:hidden;
  transition:.25s;
  animation:fadeIn .6s ease both
}

.menu-pill::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-140%);
  transition:.7s
}

.menu-pill:hover::before{
  transform:translateX(140%)
}

.menu-pill:hover,
.menu-pill.active{
  transform:translateY(-2px)
}

.menu-pill.active{
  background:linear-gradient(135deg,var(--primary),#8f8455);
  color:#fff;
  box-shadow:0 16px 34px rgba(95,83,30,.15)
}

.menu-pill:nth-child(1){
  animation-delay:.03s
}

.menu-pill:nth-child(2){
  animation-delay:.07s
}

.menu-pill:nth-child(3){
  animation-delay:.11s
}

.menu-pill:nth-child(4){
  animation-delay:.15s
}

.lang-group{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border-radius:18px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(166,153,99,.22)
}

.lang-btn,
.acc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition:.25s
}

.lang-btn.active,
.lang-btn:hover,
.acc-btn:hover{
  background:linear-gradient(135deg,var(--primary),#8f8455);
  color:#fff;
  transform:translateY(-2px)
}

.acc-panel{
  position:fixed;
  top:100px;
  right:22px;
  width:300px;
  border-radius:22px;
  padding:18px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.14);
  display:none;
  z-index:200
}

.acc-panel.active{
  display:block;
  animation:fadeIn .25s ease
}

.acc-panel h4{
  margin:0 0 12px;
  color:var(--primary-dark)
}

.acc-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.tool-btn{
  border:none;
  border-radius:14px;
  padding:12px 10px;
  background:#f5f1e5;
  color:#3d3316;
  font-weight:700;
  cursor:pointer;
  transition:.25s
}

.tool-btn:hover{
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px)
}

body.high-contrast{
  background:#111!important;
  color:#fff!important
}

body.high-contrast .glass,
body.high-contrast .panel,
body.high-contrast .person-card,
body.high-contrast .book-card,
body.high-contrast .tab-content,
body.high-contrast .menu-pill,
body.high-contrast .lang-group,
body.high-contrast .region-card,
body.high-contrast .footer{
  background:#1a1a1a!important;
  color:#fff!important;
  border-color:var(--gold)!important
}

body.grayscale{
  filter:grayscale(1)
}

body.large-text{
  font-size:1.08em
}

body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after{
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

.hero{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:24px;
  padding:30px;
  border-radius:28px;
  margin-top:8px
}

.badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:#f4efdf;
  border:1px solid rgba(166,153,99,.22);
  color:var(--primary-dark);
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px
}

.hero h2{
  margin:16px 0 10px;
  font-size:38px;
  line-height:1.05;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--primary-dark)
}

.hero p{
  margin:0;
  font-size:18px;
  line-height:1.7;
  color:#3c392d
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px
}

.primary-btn,
.secondary-btn,
.footer-btn,
.small-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:16px;
  padding:13px 18px;
  font-weight:800;
  cursor:pointer;
  transition:.25s
}

.primary-btn{
  background:linear-gradient(135deg,var(--primary),#8f8455);
  color:#fff;
  box-shadow:0 14px 28px rgba(95,83,30,.18)
}

.secondary-btn,
.footer-btn,
.small-btn{
  background:#fff;
  border:1px solid rgba(166,153,99,.25);
  color:var(--primary-dark)
}

.primary-btn:hover,
.secondary-btn:hover,
.footer-btn:hover,
.small-btn:hover{
  transform:translateY(-2px)
}

.full-btn{
  width:100%
}

.hero-card{
  display:grid;
  gap:14px;
  align-content:center
}

.hero-stat{
  padding:20px;
  border-radius:24px;
  background:linear-gradient(135deg,#fff,#f6f2e5);
  border:1px solid rgba(166,153,99,.22);
  text-align:center;
  box-shadow:0 16px 36px rgba(95,83,30,.08)
}

.hero-stat strong{
  display:block;
  font-size:36px;
  color:var(--primary-dark)
}

.hero-stat span{
  color:var(--muted)
}

.section-title-wrap{
  margin:-2px 0 18px
}

.section-title{
  margin:0;
  font-size:28px;
  color:var(--primary-dark);
  font-family:Georgia,'Times New Roman',serif
}

.grid-cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:26px
}

.person-card,
.book-card,
.panel{
  background:#fff;
  border:1px solid rgba(166,153,99,.18);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(53,45,20,.07)
}

.book-card:hover,
.panel:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 44px rgba(53,45,20,.12)
}

.person-card img,
.book-img{
  width:100%;
  display:block;
  aspect-ratio:.82/1;
  object-fit:cover
}

.placeholder-cover{
  aspect-ratio:.82/1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#b7ac79,#918552);
  font-size:60px;
  color:#fff
}

.person-card .body{
  padding:14px 16px
}

.person-card h3{
  margin:0 0 6px;
  font-size:21px
}

.person-card p{
  margin:0 0 10px;
  color:#5a5646
}

.views{
  font-weight:700;
  color:#403d31
}

.region-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px
}

.region-card{
  display:block;
  text-decoration:none;
  color:#2b2b2b;
  background:linear-gradient(135deg,#c8dca6,#a9c37a);
  min-height:146px;
  padding:20px;
  border-radius:18px;
  clip-path:polygon(0 0,100% 0,100% 86%,78% 86%,54% 100%,0 92%);
  transition:all 0.5s ease;
  box-shadow:0 16px 30px rgba(53,45,20,.08);
  position:relative;
  overflow:hidden
}

.region-card:hover{
  background:linear-gradient(135deg,#a9c37a,#8fb35e);
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 18px 35px rgba(0,0,0,0.15)
}

.region-card h3{
  margin:0 0 10px;
  font-size:26px;
  color:#2d2c21
}

.region-card p{
  margin:0;
  font-size:20px;
  color:#4c4735;
  font-weight:700
}

.region-card:hover h3{
  color:#ffffff
}

.region-card:hover p{
  color:#f3f3f3
}

.region-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
  transition:0.6s
}

.region-card:hover::before{
  left:100%
}

.hero-detail{
  display:grid;
  grid-template-columns:220px 1fr 1.1fr;
  gap:24px;
  align-items:start
}

.detail-photo,
.detail-banner{
  width:100%;
  border-radius:24px;
  display:block
}

.detail-photo{
  aspect-ratio:.82/1;
  object-fit:cover
}

.detail-banner{
  height:100%;
  min-height:300px;
  object-fit:cover
}

.detail-placeholder,
.banner-fallback{
  border-radius:24px
}

.detail-placeholder{
  aspect-ratio:.82/1
}

.banner-fallback{
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#e1dac3,#c2b07d);
  font-size:28px;
  color:#fff
}

.hero-text{
  padding-top:8px
}

.hero-text h2{
  margin:0 0 24px;
  font-size:52px;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--primary-dark)
}

.hero-text p{
  margin:16px 0;
  font-size:24px;
  line-height:1.4
}

.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:28px
}

.tab{
  padding:16px 14px;
  border-radius:18px;
  background:linear-gradient(135deg,#a69963,#8f8455);
  color:#fff;
  text-align:center;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  transition:.25s
}

.tab:hover,
.tab.active{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(95,83,30,.18)
}

.tab-content{
  display:none;
  margin-top:18px;
  padding:24px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(166,153,99,.18);
  box-shadow:0 16px 36px rgba(53,45,20,.06)
}

.tab-content.active{
  display:block
}

.books-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px
}

.book-cover{
  width:100%;
  aspect-ratio:.75/1;
 
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px 14px;
  color:#fff;
  position:relative
}

.book-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 80%,rgba(255,230,120,.8),transparent 18%)
}

.book-cover .name,
.book-cover .title{
  position:relative;
  z-index:1;
  text-align:center;
  font-weight:800
}

.book-cover .name{
  font-size:21px
}

.book-cover .title{
  font-size:17px;
  color:#ffeb61
}

.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  font-weight:700;
  color:#463d1e
}

.book-viewer{
  display:grid;
  grid-template-columns:.4fr .6fr;
  gap:22px
}

.pdf-frame-wrap{
  min-height:70vh
}

.pdf-frame{
  width:100%;
  height:70vh;
  border:none;
  border-radius:18px
}

.audio-player{
  width:100%;
  margin-top:12px
}

.contact-section,
.stats-section{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:22px
}

.single-col{
  grid-template-columns:fr
}

.panel{
  padding:22px
}

.panel h3,
.panel h2{
  margin:0 0 16px;
  color:var(--primary-dark)
}

.form-grid,
.admin-form{
  display:grid;
  gap:12px
}

.form-grid{
  grid-template-columns:1fr 1fr
}

.form-grid .full{
  grid-column:1/-1
}

input,
textarea,
select{
  width:100%;
  padding:14px 15px;
  border-radius:16px;
  border:1px solid rgba(166,153,99,.22);
  background:#fbfaf6;
  font-size:16px;
  outline:none
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(166,153,99,.12)
}

textarea{
  min-height:150px;
  resize:vertical
}

.success-msg,
.error-msg{
  padding:14px 16px;
  border-radius:14px;
  margin-bottom:12px;
  font-weight:700
}

.success-msg{
  background:#e7f6e9;
  color:#17652f
}

.error-msg{
  background:#fde8e8;
  color:#8c1d1d
}

.muted{
  color:#6e6a59
}

.stat-box{
  padding:14px 16px;
  border-radius:16px;
  background:#fbfaf6;
  border:1px solid rgba(166,153,99,.16);
  margin-top:10px
}

.stats-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background:#efe8d3;
  border:1px solid rgba(166,153,99,.18);
  font-weight:800
}

.footer{
  margin-top:36px;
  background:linear-gradient(135deg,var(--primary-dark),#3b331b);
  color:#fff
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  padding:18px 0
}

.footer-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.footer-btn{
  background:#fff;
  color:var(--primary-dark)
}

.admin-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at top,#f5f0de,#ebe4d7)
}

.admin-login-card{
  width:min(92vw,430px);
  padding:26px;
  border-radius:28px
}

.admin-input{
  margin-bottom:12px
}

.admin-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
  background:#f7f3e8
}

.admin-sidebar{
  padding:24px;
  background:linear-gradient(180deg,var(--primary-dark),#302914);
  color:#fff
}

.admin-sidebar h2{
  margin-top:0
}

.admin-sidebar a{
  display:block;
  padding:12px 14px;
  margin:8px 0;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  transition:.25s
}

.admin-sidebar a:hover{
  background:rgba(255,255,255,.14)
}

.admin-content{
  padding:24px
}

.admin-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.admin-table-wrap{
  overflow:auto
}

.admin-table{
  width:100%;
  border-collapse:collapse
}

.admin-table th,
.admin-table td{
  padding:12px;
  border-bottom:1px solid #ece4d0;
  text-align:left;
  vertical-align:top
}

.small-btn{
  padding:8px 12px;
  border-radius:12px;
  font-size:13px
}

.danger{
  background:#ffefef;
  border-color:#efb1b1;
  color:#8d2222
}

.admin-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:20px
}

.admin-stat-card{
  padding:22px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(166,153,99,.18);
  box-shadow:0 14px 34px rgba(53,45,20,.06)
}

.admin-stat-card strong{
  display:block;
  font-size:34px;
  color:var(--primary-dark)
}

.admin-stat-card span{
  color:var(--muted)
}

.fade-in{
  animation:fadeIn .7s ease
}

.slide-in{
  animation:slideIn .65s ease
}

.floating{
  animation:floaty 5s ease-in-out infinite
}

.reveal{
  animation:fadeIn .8s ease both
}

.writer-banner-block{
  width:100%;
  display:flex;
  justify-content:flex-end
}

.writer-banner{
  width:100%;
  max-width:480px;
  height:260px;
  object-fit:cover;
  border-radius:24px
}

/* ===== WRITER PREMIUM UI ===== */

.writer-tabs .tab{
  color:#fff;
  transition:all 0.3s ease;
  position:relative
}

.writer-tabs .tab.active{
  color:#FFD700 !important;
  font-weight:700;
  text-shadow:0 0 8px rgba(255,215,0,0.6)
}

.writer-tabs .tab:hover{
  color:#ffe066
}

.writer-tabs .tab::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:0%;
  height:3px;
  background:#FFD700;
  transition:0.3s;
  transform:translateX(-50%)
}

.writer-tabs .tab:hover::after{
  width:60%
}

.writer-tabs .tab.active::after{
  width:80%
}

/* ===== SUPER SMOOTH CARD EFFECT ===== */

.person-card,
.writer-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  cursor:pointer;
  transition:
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  transform:translateZ(0)
}

.person-card img,
.writer-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:transform
}

.person-card::after,
.writer-card::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0%;
  background:linear-gradient(to top, rgba(17 252 13 / 37%), transparent);
  
  transition:
    height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1)
}

.person-card .body,
.writer-info,
.writer-actions{
  transition:all 0.8s cubic-bezier(0.22, 1, 0.36, 1)
}

.person-card:hover,
.writer-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 24px 50px rgba(0,0,0,0.18)
}

.person-card:hover img,
.writer-card:hover img{
  transform:scale(1.07)
}

.person-card:hover::after,
.writer-card:hover::after{
  height:65%
}

.person-card:hover .body,
.writer-card:hover .writer-info{
  transform:translateY(0);
  opacity:1
}

.writer-info{
  position:absolute;
  bottom:12px;
  left:16px;
  color:#fff;
  transform:translateY(25px);
  opacity:0
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(22px)
  }
  to{
    opacity:1;
    transform:none
  }
}

@keyframes slideIn{
  from{
    opacity:0;
    transform:translateX(-40px)
  }
  to{
    opacity:1;
    transform:none
  }
}

@keyframes floaty{
  0%,100%{
    transform:translateY(0)
  }
  50%{
    transform:translateY(-10px)
  }
}

@media(max-width:1200px){
  .grid-cards{
    grid-template-columns:repeat(3,1fr)
  }

  .region-grid{
    grid-template-columns:repeat(3,1fr)
  }

  .books-row{
    grid-template-columns:repeat(3,1fr)
  }

  .hero-detail{
    grid-template-columns:180px 1fr
  }

  .hero-detail>:last-child{
    grid-column:1/-1
  }

  .admin-stat-grid{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(max-width:1100px){
  .writer-banner-block{
    justify-content:center
  }

  .writer-banner{
    max-width:100%;
    height:auto
  }
}

@media(max-width:860px){
  .topbar-inner{
    flex-wrap:wrap
  }

  .brand{
    width:100%
  }

  .hero,
  .book-viewer,
  .contact-section,
  .stats-section,
  .admin-two-col{
    grid-template-columns:1fr
  }

  .grid-cards,
  .region-grid,
  .books-row{
    grid-template-columns:repeat(2,1fr)
  }

  .form-grid{
    grid-template-columns:1fr
  }

  .tabs{
    grid-template-columns:1fr 1fr
  }

  .hero h2{
    font-size:38px
  }

  .hero-text h2{
    font-size:40px
  }

  .hero-text p{
    font-size:20px
  }

  .admin-layout{
    grid-template-columns:1fr
  }

  .admin-sidebar{
    display:flex;
    gap:10px;
    overflow:auto
  }

  .admin-sidebar a{
    white-space:nowrap
  }

  .acc-panel{
    left:14px;
    right:14px;
    width:auto
  }
}

@media(max-width:560px){
  .container,
  .page{
    padding-left:14px;
    padding-right:14px
  }

  .grid-cards,
  .region-grid,
  .books-row,
  .tabs{
    grid-template-columns:1fr
  }

  .brand-logo{
    width:64px;
    height:64px;
    font-size:30px
  }

  .brand h1{
    font-size:23px
  }

  .menu-pill{
    flex:1 1 calc(50% - 8px)
  }

  .main-nav{
    justify-content:flex-start
  }

  .lang-group{
    width:100%;
    justify-content:center
  }

  .hero{
    padding:20px
  }

  .hero h2{
    font-size:31px
  }

  .hero-text h2{
    font-size:34px
  }

  .footer-inner{
    font-size:14px
  }
/* === KITOB MUQOVALARI BARCHADA BIR XIL === */
.book-card{
    width: 180px;
    flex: 0 0 auto;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.book-card img{
    width: 100%;
    height: 240px;        /* MUHIM — hamma bir xil balandlik */
    object-fit: cover;    /* rasmni kesib moslashtiradi */
    display: block;
    border-radius: 12px;
}

/* hover animatsiya */
.book-card:hover{
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}