.container { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:75px; margin-top:75px; font-weight:300; font-size:13px; height:90vh; }
.word-add-content { background-color:#f7f9fc; border-radius:12px; border-top:4px solid #cc0000; border-bottom:4px solid #cc0000; padding:20px; width:250px; display:flex; flex-direction:column; gap:12px; height:70vh; box-shadow:2px 0 8px rgba(0,0,0,0.4), -2px 0 8px rgba(0,0,0,0.4); }
label { display:block; margin:10px 0 5px; font-weight:bold; }
.form-input, .form-textarea { width:220px; padding:10px 12px; border-radius:8px; border:1px solid #a3a3a3; font-size:14px; outline:none; transition:border .2s, box-shadow .2s; background:#ffffffc0; backdrop-filter:blur(2px); }
.form-input:focus, .form-textarea:focus { border-color:#cc0000; box-shadow:0 0 4px rgba(204,0,0,0.4); }
.word-list-content { background-color:#f7f9fc; border-radius:12px; border-top:4px solid #cc0000; border-bottom:4px solid #cc0000; padding:20px; width:100vh; height:70vh; box-shadow:2px 0 8px rgba(0,0,0,0.4), -2px 0 8px rgba(0,0,0,0.4); }
.form-textarea { height:80px; resize:none; }
.word-add-btn { width:220px; padding:12px; border-radius:8px; border:none; font-size:15px; margin-top:15px; font-weight:bold; background:#cc0000; color:#fff; cursor:pointer; transition:background .2s, transform .1s; margin-left:10px; }
.word-add-btn:hover { background:#a50000; }
h2 { margin-top:0; text-align:center; padding:10px; border-radius:12px; color:#000000; background:linear-gradient(135deg, rgba(255,255,255,0.309), rgba(220,220,220,0.4)); backdrop-filter:blur(4px); background-color:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.4); box-shadow:4px 4px 10px rgba(0,0,0,0.12), inset 1px 1px 3px rgba(255,255,255,0.5); }
.placeholder { font-size:14px; text-align:center; height:370px; margin-top:20px; box-sizing:border-box; overflow-y:auto; box-shadow:inset 0 3px 3px -3px rgba(0,0,0,0.3), inset 0 -3px 3px -3px rgba(0,0,0,0.3); }
.words { box-shadow:2px 2px rgba(0,0,0,0.1); margin-bottom:15px; padding:10px; background-color:#fff; border:1px solid #e0e0e0; border-radius:10px; transition:transform .3s ease, box-shadow .3s ease; }
.words:hover { transform:scale(1.001); box-shadow:4px 4px 20px rgba(0,0,0,0.05); }
.words li { list-style:none; margin:0; padding:0; }
.words p { margin:0; line-height:1.6; }
.words p:first-child { font-size:15px; font-weight:400; color:#000000; text-shadow:1px 1px 3px rgba(0,0,0,0.1); }
.words .note { font-size:14px; color:#666; margin-top:8px; font-style:italic; border-top:1px solid #c2c2c2; padding-top:8px; }
ul { padding:0; }
.word-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.word-info p { font-size:16px; }
.delete-btn { background:none; border:none; cursor:pointer; color:#d9534f; font-size:16px; transition:color .2s; }
.delete-btn:hover { color:#c9302c; }
.word-management-section { padding:40px 45px; width:100%; box-sizing:border-box; display:flex; justify-content:center; align-items:center; }
.wordlist-container { width:85vw; background-color:#f7f9fc; box-shadow:0 4px 20px rgba(0,0,0,0.1); min-height:30vh; box-sizing:border-box; padding:20px; display:flex; flex-direction:column; align-items:center; gap:30px; border-radius:10px; border-top:4px solid #cc0000; border-bottom:4px solid #cc0000; box-shadow:2px 0 8px rgba(0,0,0,0.4), -2px 0 8px rgba(0,0,0,0.4); }
.wordheadermenu { display:flex; justify-content:space-between; align-items:center; width:100%; box-sizing:border-box; }
.word-header-left { display:flex; gap:10px; }
.allwords-btn, .favoritewords-btn, .search-btn { font-family:'Nunito', sans-serif; border:none; padding:10px 16px; border-radius:8px; font-size:15px; cursor:pointer; transition:transform .15s, background-color .15s; color:#fff; }
.allwords-btn { background-color:#c0392b; }
.allwords-btn:hover { background-color:#a93226; transform:scale(1.01); }
.favoritewords-btn { background-color:#2980b9; }
.favoritewords-btn:hover { background-color:#2471a3; transform:scale(1.01); }
.search-btn { background-color:#27ae60; }
.search-btn:hover { background-color:#229954; transform:scale(1.01); }
.word-header-center { display:flex; justify-content:center; flex:1; }
.date-picker { padding:10px 16px; border-radius:8px; font-family:'Nunito', sans-serif; color:#000000; cursor:pointer; background:linear-gradient(135deg, rgba(255,255,255,0.309), rgba(220,220,220,0.4)); background-color:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.4); box-shadow:4px 4px 10px rgba(0,0,0,0.12), inset 1px 1px 3px rgba(255,255,255,0.5); }
.word-header-right { display:flex; gap:8px; }
.search-word-input { padding:6px 10px; border-radius:6px; border:1px solid #ccc; }
.kelimelist { width:100%; font-size:14px; text-align:center; min-height:300px; max-height:70vh; box-sizing:border-box; overflow-y:auto; border-top:2px solid #b8b8b8; border-bottom:2px solid #b8b8b8; }
.word-actions { display:flex; align-items:center; gap:10px; }
.favorite-btn { background:none; border:none; cursor:pointer; font-size:16px; color:#f7d20b; transition:transform .2s, color .2s; }
.favorite-btn:hover { transform:scale(1.1); }
.favorite-btn .far.fa-star { color:#999; }
.favorite-form, .delete-form { margin:0; padding:0; display:inline-block; }
@media (max-width:1200px){ .container { gap:40px; margin-top:50px; } .word-list-content { width:55vh; } }
@media (max-width:992px){ .container { flex-direction:column; height:auto; padding:20px; gap:30px; margin-top:90px; align-items:center; } .word-add-content { width:85%; height:auto; margin-bottom:20px; padding:25px; box-sizing:border-box; } .word-add-content form { display:flex; flex-direction:column; width:100%; } .word-add-content label { width:100%; text-align:left; margin:12px 0 5px; font-size:15px; } .form-input, .form-textarea { width:100%; max-width:100%; box-sizing:border-box; margin:0; } .word-add-btn { width:100%; margin:15px 0 0; } .word-list-content { width:85%; min-height:350px; margin-bottom:20px; padding:25px; box-sizing:border-box; } .word-management-section { padding:20px 15px; padding-bottom:60px; width:100%; box-sizing:border-box; display:flex; justify-content:center; } .wordlist-container { width:90vw; max-width:800px; padding:25px; margin-top:20px; } .placeholder { height:auto; max-height:350px; } @media (max-width:992px){ .wordheadermenu { display:flex; flex-direction:column; gap:15px; width:100%; } .word-header-left { display:flex; flex-direction:column; gap:10px; width:100%; order:1; } .allwords-btn, .favoritewords-btn { width:100%; max-width:none; margin:0; } .word-header-center { order:2; width:100%; } .date-picker { width:100%; max-width:none; } .word-header-right { order:3; width:100%; display:flex; justify-content:space-between; gap:10px; } .search-word-input { width:70%; min-width:0; flex-grow:1; } .search-btn { width:28%; min-width:80px; } } }
@media (max-width:768px){ .wordheadermenu { flex-direction:column; gap:15px; } .word-header-left, .word-header-right { width:100%; justify-content:center; } .word-header-center { width:100%; } .date-picker { width:100%; } .search-word-input { flex-grow:1; width:65%; } .form-input, .form-textarea, .word-add-btn { width:100%; margin-left:0; box-sizing:border-box; } .container { margin-top:120px; padding:15px; } .word-add-content, .word-list-content { width:85%; } }
@media (max-width:576px){ .container { margin-top:110px; gap:20px; padding:10px; } .word-management-section { padding-bottom:60px; } .word-add-content, .word-list-content { width:92%; padding:15px; } h2 { font-size:1.2rem; padding:8px; margin-bottom:10px; } .allwords-btn, .favoritewords-btn, .search-btn { padding:8px 12px; font-size:14px; } .word-info { flex-direction:column; align-items:flex-start; gap:10px; } .delete-form { align-self:flex-end; } .words p:first-child { font-size:14px; } .words .note { font-size:13px; } .word-management-section { padding:15px 8px; padding-bottom:60px; } .wordlist-container { padding:15px; width:92vw; } .word-add-content label { font-size:14px; margin:8px 0 4px; } .placeholder { height:auto; max-height:470px; } }
@media (max-width:400px){ .header-right { width:100%; justify-content:center; margin-top:10px; } .container { margin-top:120px; padding:10px; gap:20px; } .word-add-content, .word-list-content { width:95%; padding:15px; } .word-add-content label { font-size:13px; } .form-input, .form-textarea { padding:8px 10px; font-size:13px; } .word-management-section { padding:15px 5px; padding-bottom:60px; width:95%; margin-left:auto; margin-right:auto; display:flex; justify-content:center; } .wordlist-container { width:100%; padding:15px; box-sizing:border-box; } .wordheadermenu { display:flex; flex-direction:column; gap:12px; width:100%; box-sizing:border-box; } .word-header-left, .word-header-center, .word-header-right { width:100%; display:flex; flex-direction:column; gap:8px; box-sizing:border-box; } .allwords-btn, .favoritewords-btn { width:100%; text-align:center; box-sizing:border-box; } .date-picker { width:100%; box-sizing:border-box; } .word-header-right { flex-direction:column; box-sizing:border-box; } .search-word-input { width:100%; margin-bottom:5px; box-sizing:border-box; } .search-btn { width:100%; box-sizing:border-box; } .placeholder { height:auto; max-height:470px; } .words { padding:8px; box-sizing:border-box; } .words p:first-child { font-size:14px; } .words .note { font-size:12px; } .wordheadermenu>* { max-width:100%; box-sizing:border-box; } input, button, select, textarea { max-width:100%; box-sizing:border-box; } }
@media (min-width:577px) and (max-width:992px){ .wordheadermenu { flex-direction:row; flex-wrap:wrap; } .word-header-left, .word-header-center, .word-header-right { flex:1 1 100%; margin-bottom:10px; } .container { margin-top:100px; } .word-add-content, .word-list-content { width:70%; } .placeholder { height:auto; max-height:450px; } }
@media (min-width:993px) and (max-width:1200px){ .wordlist-container { width:80vw; max-width:900px; } .placeholder { height:auto; max-height:500px; } }
@media (max-height:500px) and (orientation:landscape){ .container { height:auto; min-height:100vh; margin-top:90px; flex-direction:row; flex-wrap:wrap; justify-content:center; } .word-add-content, .word-list-content { height:auto; min-height:320px; width:45%; margin:10px; } .word-add-content { overflow:hidden; } .word-add-content form { width:100%; } .word-add-content label { word-wrap:break-word; overflow-wrap:break-word; display:block; width:100%; } .word-management-section { padding-bottom:60px; } }